Text Input Element

​

When to Use

• Email addresses - Newsletter signups, account creation
• Names - Personalization, customer records
• Phone numbers - SMS marketing, support
• Custom data - Ages, preferences, feedback
• Passwords - Account creation, login forms

​

Input Types

​

Configuration

​

Basic Settings

• “Enter your email”
• “First name”
• “Your phone (optional)”

Default: {{user.email}}
Default: {{query.email}}

• Prevents form submission without input
• Shows validation message
• Adds asterisk (*) indicator

​

Validation

• Validates format ([email protected])
• Errors appear only if the field is marked Required and the user tries to navigate to another screen without entering a valid email

• Integer only - Only whole numbers are allowed. Decimals (e.g., 3.5) are not accepted
• Min value and Max value - The minimum and maximum allowed values
  • Exclusive: When set to Yes, the Min or Max value itself is not allowed
• Error message: Custom text shown for invalid values. You can provide your own message or keep the default one

​

Text Transformation

​

Using Input Values

​

Variables

Element ID: user-email
User enters: [email protected]

Available as: {{user-email}}

​

Multiple Inputs

Name: {{first-name}} {{last-name}}
Email: {{email}}
Phone: {{phone}}

​

Conditional Logic

Show premium options if {{age}} > 25
Show student discount if {{email}} contains ".edu"
Hide shipping if {{country}} equals "US"

​

Mobile Optimization

• Email: Shows @ and .com keys
• Number: Numeric keypad only
• Phone: Large number keys
• URL: No spaces, quick slash

• Autocomplete for common fields
• Autocorrect disabled for emails
• Auto-capitalization for names
• Password managers integration

• Minimum 44px height
• Clear tap areas
• Proper spacing between fields

​

Form Design Best Practices

​

Progressive Disclosure

• Increases completion rates by 30%
• Captures emails for abandonment recovery
• Feels less overwhelming

​

Field Order

1. Email (easiest to provide)
2. Name (personal but simple)
3. Phone (more hesitation)
4. Address (highest friction)

​

Labels vs Placeholders

• Label: “Email Address”
• Placeholder: “[email protected]”

​

Advanced Features

​

Autocomplete Attributes

Name: autocomplete="name"
Email: autocomplete="email"
Phone: autocomplete="tel"

​

Input Masking

• Phone: (555) 123-4567
• Credit card: 1234 5678 9012 3456
• Date: MM/DD/YYYY

​

Multi-line Text

• Set “Multiline” option
• Adjustable height
• Good for feedback, comments

​

Email Collection Strategies

​

Two-Step Opt-in

• Verifies email ownership
• Higher engagement rates
• Cleaner email list

​

Inline Validation

• ✓ Valid email format
• ✗ Invalid format
• ⚠️ Disposable email detected

​

Smart Defaults

{{query.email}} - From URL parameter
{{user.email}} - From previous input

​

Common Patterns

​

Newsletter Signup

Input: Email (required)
Placeholder: "Enter your email"
Button: "Get Free Updates"

​

Lead Magnet

Page 1:
- Email input
- "Get Free eBook" button

Page 2:
- Name input (optional)
- Download button

​

Account Creation

Email: Required, validated
Password: Required, min 8 characters
Confirm Password: Match validation

​

Quiz Start

"First, what's your name?"
Input: Text
Placeholder: "John"
Transform: Capitalize

Next page: "Nice to meet you, {{name}}!"

​

Conversion Optimization

​

Reduce Friction

• Single field per page - For critical inputs
• Optional indicators - Mark optional vs required
• Smart defaults - Pre-fill when possible
• Clear errors - Specific, helpful messages

​

Build Trust

• Privacy notice - “We’ll never spam you”
• Social proof - “Join 10,000+ subscribers”
• Benefits - “Get exclusive tips”
• Security - Lock icon for sensitive data

​

Increase Completion

• Progress indicators - Show form progress
• Save progress - Remember partial input
• Exit intent - Capture before leaving
• Inline validation - Fix errors immediately

​

Troubleshooting

​

Integration Examples

​

With Checkout

Page 1: Email input
Page 2: Checkout (email pre-filled)

​

With Options

Page 1: Name input
Page 2: "Hi {{name}}, what's your goal?"
Page 3: Options based on goal

​

With Analytics

// When email is entered
fox.track('Lead Captured', {
  email: '{{user-email}}'
});

​

Next Steps

• Use variables from inputs
• Add validation with actions
• Connect to webhooks for data sync
• Track conversions with analytics