Field Types & Validation

Comprehensive guide to all field types available in Fly Super forms, with validation rules, examples, and best practices.

Field Types Overview

Text Field

Purpose

General text input for short single-line text.

Common Uses

• First name, last name, full name
• Company name, job title
• Address, city, state/province
• Any short text response

Configuration

Basic Settings:

Label: "First Name"
Name: "firstName" (internal field name)
Placeholder: "John" (optional example)
Default Value: "" (optional pre-fill)

Validation:

• Required: Yes/No
• Min Length: Minimum characters (e.g., 2)
• Max Length: Maximum characters (e.g., 50)
• Pattern: Regex for custom validation

Validation Examples

Name (required, 2-50 characters)

Required: Yes
Min Length: 2
Max Length: 50
Pattern: ^[a-zA-Z\s'-]+$ (letters, spaces, hyphens, apostrophes only)
Error Message: "Please enter a valid name"

Username (required, 3-20 characters, alphanumeric)

Required: Yes
Min Length: 3
Max Length: 20
Pattern: ^[a-zA-Z0-9_]+$ (letters, numbers, underscores only)
Error Message: "Username must be 3-20 characters (letters, numbers, underscores)"

Promo Code (optional, exactly 8 uppercase letters/numbers)

Required: No
Pattern: ^[A-Z0-9]{8}$ (exactly 8 uppercase alphanumeric)
Error Message: "Promo code must be 8 characters"

Best Practices

• Use specific labels: "Work Email" not just "Email"
• Show examples in placeholders: "Acme Inc." not "Enter company"
• Don't make optional fields required
• Limit max length to reasonable values (50 for names, 100 for titles)

Email Field

Purpose

Email address input with automatic validation.

Common Uses

• Contact email, work email, personal email
• User account creation
• Newsletter signups
• Lead capture

Configuration

Basic Settings:

Label: "Email Address"
Name: "email"
Placeholder: "you@example.com"

Validation:

• Required: Yes/No
• Email Format: Automatic (validates name@domain.tld pattern)

Validation Examples

Required Email

Required: Yes
Error Message: "Please enter a valid email address"

Optional Email (for guest checkout)

Required: No
Error Message: "If provided, email must be valid"

Browser Behavior

• Mobile keyboards show "@" and ".com" buttons
• Autocomplete suggests saved emails
• Browser validates format before submission

Best Practices

• Always use email type for email addresses (not text)
• Mark required for forms that need to contact users
• Provide clear error message: "Please enter a valid email like name@example.com"
• Consider email confirmation field for critical forms (account creation)

Tel (Phone) Field

Purpose

Phone number input with optional format validation.

Common Uses

• Mobile number, office phone, emergency contact
• SMS verification
• Call scheduling

Configuration

Basic Settings:

Label: "Phone Number"
Name: "phone"
Placeholder: "(555) 123-4567"

Validation:

• Required: Yes/No
• Pattern: Regex for phone format

Validation Examples

US Phone (required, with formatting)

Required: Yes
Pattern: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$
Matches: (555) 123-4567, 555-123-4567, 5551234567
Error Message: "Please enter a valid US phone number"

International Phone (E.164 format)

Required: Yes
Pattern: ^\+[1-9]\d{1,14}$
Matches: +12025551234, +442071234567
Error Message: "Please enter phone with country code (e.g., +1234567890)"

Flexible Phone (any format)

Required: Yes
Pattern: ^[\d\s\-\(\)\+]+$
Matches: Any numbers, spaces, hyphens, parentheses, plus
Error Message: "Please enter a valid phone number"

Browser Behavior

• Mobile keyboards show numeric keypad
• Autocomplete suggests saved phone numbers

Best Practices

• Use tel type (not text) for phone numbers
• Show format example in placeholder
• Consider country code field for international forms
• Make optional unless you'll actually call/text them

URL Field

Purpose

Website address input with automatic URL validation.

Common Uses

• Company website, personal website, portfolio
• Social media profiles (LinkedIn, Twitter)
• Reference links

Configuration

Basic Settings:

Label: "Company Website"
Name: "website"
Placeholder: "https://example.com"

Validation:

• Required: Yes/No
• URL Format: Automatic (validates protocol + domain pattern)

Validation Examples

Required URL

Required: Yes
Error Message: "Please enter a valid URL starting with http:// or https://"

Optional LinkedIn Profile

Label: "LinkedIn Profile (Optional)"
Required: No
Placeholder: "https://linkedin.com/in/yourname"

Browser Behavior

• Mobile keyboards show ".com" button
• Browser validates URL format

Best Practices

• Include "https://" in placeholder to set expectations
• Consider accepting URLs without protocol (auto-add https://)
• Validate URL is accessible (optional webhook check)

Number Field

Purpose

Numeric input only, with optional min/max constraints.

Common Uses

• Age, quantity, price, budget
• Years of experience
• Number of employees, team size

Configuration

Basic Settings:

Label: "Quantity"
Name: "quantity"
Placeholder: "1"
Default Value: "1"

Validation:

• Required: Yes/No
• Min: Minimum value (e.g., 0)
• Max: Maximum value (e.g., 100)
• Step: Increment (e.g., 1 for integers, 0.01 for currency)

Validation Examples

Age (required, 18-120)

Required: Yes
Min: 18
Max: 120
Error Message: "Age must be between 18 and 120"

Quantity (optional, 1-999)

Required: No
Min: 1
Max: 999
Default: 1
Error Message: "Quantity must be between 1 and 999"

Budget (required, minimum $1000)

Label: "Budget (USD)"
Required: Yes
Min: 1000
Placeholder: "10000"
Error Message: "Budget must be at least $1,000"

Browser Behavior

• Mobile keyboards show numeric keypad
• Spinner buttons for increment/decrement
• Scroll to adjust value (some browsers)

Best Practices

• Set realistic min/max values
• Use step for appropriate precision (1 for integers, 0.01 for money)
• Consider select dropdown for small ranges (1-10)
• Include units in label: "Age (years)", "Budget (USD)"

Textarea Field

Purpose

Multi-line text input for longer content.

Common Uses

• Messages, comments, feedback
• Descriptions, bios, summaries
• Addresses (full address)
• Cover letters, essays

Configuration

Basic Settings:

Label: "Message"
Name: "message"
Placeholder: "Tell us about your project..."
Rows: 4 (height in lines)

Validation:

• Required: Yes/No
• Min Length: Minimum characters
• Max Length: Maximum characters

Validation Examples

Message (required, 20-1000 characters)

Required: Yes
Min Length: 20
Max Length: 1000
Error Message: "Message must be between 20 and 1000 characters"

Bio (optional, max 500 characters)

Required: No
Max Length: 500
Placeholder: "Tell us about yourself... (optional)"

Project Description (required, detailed)

Required: Yes
Min Length: 100
Placeholder: "Please provide a detailed description of your project needs..."
Error Message: "Description must be at least 100 characters"

Best Practices

• Set min length to encourage detailed responses (50-100 chars)
• Set max length to prevent abuse (500-2000 chars)
• Show character count (coming soon)
• Make rows appropriate for expected content (4-8 rows typical)
• Use textarea for any text over one sentence

Select (Dropdown) Field

Purpose

Single selection from a list of options. Compact UI.

Common Uses

• Country, state/province, city
• Industry, department, role
• Preferences with many options
• Any single-choice with 5+ options

Configuration

Basic Settings:

Label: "Industry"
Name: "industry"
Options: [
  { label: "Technology", value: "technology" },
  { label: "Healthcare", value: "healthcare" },
  { label: "Finance", value: "finance" },
  ...
]
Default: "technology" (optional)

Validation:

• Required: Yes/No
• Default Option: Pre-selected value

Examples

Country Selection (required)

Label: "Country"
Required: Yes
Options: [
  { label: "United States", value: "us" },
  { label: "Canada", value: "ca" },
  { label: "United Kingdom", value: "uk" },
  ... (all countries)
]
Error Message: "Please select your country"

Company Size (optional, with default)

Label: "Company Size"
Required: No
Default: "11-50"
Options: [
  { label: "1-10 employees", value: "1-10" },
  { label: "11-50 employees", value: "11-50" },
  { label: "51-200 employees", value: "51-200" },
  { label: "201-500 employees", value: "201-500" },
  { label: "500+ employees", value: "500+" }
]

Timeline (required)

Label: "When do you need this?"
Required: Yes
Options: [
  { label: "Immediately", value: "immediate" },
  { label: "Within 1 month", value: "1-month" },
  { label: "1-3 months", value: "1-3-months" },
  { label: "3-6 months", value: "3-6-months" },
  { label: "6+ months", value: "6-plus-months" }
]

Best Practices

• Use select for 5+ options (use radio for fewer)
• Sort options logically (alphabetical, by popularity, by size)
• Keep option labels concise
• Consider searchable select for long lists (50+ options)
• Include "Other" or "Prefer not to say" options when appropriate

Radio Buttons Field

Purpose

Single selection from a list of options. All options visible.

Common Uses

• Yes/No questions
• Gender, pronouns
• Pricing tiers (2-4 options)
• Any single-choice with 2-5 options

Configuration

Basic Settings:

Label: "Subscribe to newsletter?"
Name: "subscribe"
Options: [
  { label: "Yes", value: "yes" },
  { label: "No", value: "no" }
]
Default: "yes" (optional)

Validation:

• Required: Yes/No
• Default Selection: Pre-selected option

Examples

Yes/No Question

Label: "Are you a current customer?"
Required: Yes
Options: [
  { label: "Yes", value: "yes" },
  { label: "No", value: "no" }
]

Pricing Tier

Label: "Select Your Plan"
Required: Yes
Options: [
  { label: "Free - $0/month", value: "free" },
  { label: "Pro - $29/month", value: "pro" },
  { label: "Enterprise - Contact Sales", value: "enterprise" }
]

Priority Level

Label: "Issue Priority"
Required: Yes
Default: "medium"
Options: [
  { label: "Low - Minor inconvenience", value: "low" },
  { label: "Medium - Impacting work", value: "medium" },
  { label: "High - Blocking critical work", value: "high" },
  { label: "Critical - System down", value: "critical" }
]

Best Practices

• Use radio for 2-5 options (use select for more)
• Make options mutually exclusive
• Provide descriptions for clarity ("Pro - $29/month")
• Stack vertically for readability
• Don't require selection if "no preference" is valid

Checkboxes Field

Purpose

Multiple selections allowed. Each checkbox is independent.

Common Uses

• Interests, preferences, topics
• Features wanted, services needed
• Agreement checkboxes (terms, privacy, marketing)
• "Select all that apply" questions

Configuration

Basic Settings:

Label: "What are you interested in?"
Name: "interests"
Options: [
  { label: "Marketing", value: "marketing" },
  { label: "Sales", value: "sales" },
  { label: "Product", value: "product" }
]
Default: ["marketing"] (optional, array of pre-checked values)

Validation:

• Required: Yes/No (at least one must be checked if required)
• Default Checked: Pre-checked options

Examples

Interests (optional, multiple)

Label: "What topics interest you? (Select all that apply)"
Required: No
Options: [
  { label: "Content Marketing", value: "content" },
  { label: "SEO", value: "seo" },
  { label: "Social Media", value: "social" },
  { label: "Email Marketing", value: "email" },
  { label: "Paid Advertising", value: "paid-ads" }
]

Services Needed (required, at least one)

Label: "Which services do you need?"
Required: Yes
Options: [
  { label: "Consulting", value: "consulting" },
  { label: "Training", value: "training" },
  { label: "Implementation", value: "implementation" },
  { label: "Support", value: "support" }
]
Error Message: "Please select at least one service"

Agreements (required)

Label: "Agreements"
Required: Yes
Options: [
  { label: "I agree to the Terms of Service", value: "terms" },
  { label: "I agree to the Privacy Policy", value: "privacy" },
  { label: "I want to receive marketing emails (optional)", value: "marketing" }
]
Note: For agreements, use separate single checkboxes instead

Best Practices

• Use checkboxes when multiple selections make sense
• Limit to 3-8 options (use multi-select for more)
• Include "None" or "Other" options when appropriate
• For single agreements, use a single checkbox (not a group)
• Stack vertically for readability

Multi-Select Field

Purpose

Multiple selections from a dropdown. Compact UI for many options.

Common Uses

• Skills, technologies, tools
• Departments, teams, locations
• Any multi-choice with 8+ options

Configuration

Basic Settings:

Label: "Skills"
Name: "skills"
Options: [
  { label: "JavaScript", value: "javascript" },
  { label: "Python", value: "python" },
  { label: "React", value: "react" },
  ...
]
Default: ["javascript", "react"] (optional)

Validation:

• Required: Yes/No (at least one must be selected)
• Min Selections: Minimum number of selections
• Max Selections: Maximum number of selections

Examples

Skills (required, 1-5 selections)

Label: "Your Skills (select up to 5)"
Required: Yes
Min: 1
Max: 5
Options: [50+ programming languages/frameworks]
Error Message: "Please select 1-5 skills"

Session Preferences (optional)

Label: "Which sessions will you attend?"
Required: No
Options: [
  { label: "Opening Keynote", value: "keynote" },
  { label: "Marketing Workshop", value: "marketing" },
  { label: "Sales Masterclass", value: "sales" },
  { label: "Product Demo", value: "product" },
  ... (20+ sessions)
]

Best Practices

• Use for 8+ options (use checkboxes for fewer)
• Set max selections to prevent overwhelming choices
• Sort options logically (alphabetical, by category)
• Show selection count in UI
• Consider search functionality for very long lists (50+)

Date Field

Purpose

Date selection with calendar picker.

Common Uses

• Birth date, event date, deadline
• Start date, end date
• Appointment scheduling

Configuration

Basic Settings:

Label: "Event Date"
Name: "eventDate"
Placeholder: "MM/DD/YYYY" or "YYYY-MM-DD"

Validation:

• Required: Yes/No
• Min Date: Earliest allowed date
• Max Date: Latest allowed date

Validation Examples

Birth Date (18+ years old)

Label: "Date of Birth"
Required: Yes
Max Date: [today minus 18 years]
Error Message: "You must be at least 18 years old"

Event Date (future dates only)

Label: "Preferred Event Date"
Required: Yes
Min Date: [today]
Max Date: [today plus 1 year]
Error Message: "Please select a date between today and one year from now"

Availability Start Date

Label: "When can you start?"
Required: Yes
Min Date: [today]
Placeholder: "MM/DD/YYYY"

Browser Behavior

• Native date picker on most browsers
• Calendar popup on mobile devices
• Format varies by locale

Best Practices

• Use date type (not text) for date inputs
• Set realistic min/max dates
• Show expected format in placeholder
• Consider separate month/day/year fields for birth dates (better UX)
• Use appropriate granularity (date vs datetime vs time)

File Upload Field

Purpose

Upload files from user's device.

Common Uses

• Resume, CV, portfolio
• Profile photo, logo
• Documents, attachments, invoices
• Proof of identity, certifications

Configuration

Basic Settings:

Label: "Upload Resume"
Name: "resume"
Accept: ".pdf,.doc,.docx" (allowed file types)
Max Size: 5MB (5 * 1024 * 1024 bytes)

Validation:

• Required: Yes/No
• Allowed File Types: MIME types or extensions
• Max File Size: In bytes (default: 5MB)

Validation Examples

Resume (PDF only, required)

Label: "Resume / CV"
Required: Yes
Accept: ".pdf,application/pdf"
Max Size: 5MB
Error Message: "Please upload your resume as a PDF (max 5MB)"

Profile Photo (images only, optional)

Label: "Profile Photo"
Required: No
Accept: "image/*" or ".jpg,.jpeg,.png,.gif"
Max Size: 2MB
Error Message: "Please upload an image (JPG, PNG, or GIF, max 2MB)"

Documents (multiple types, required)

Label: "Supporting Documents"
Required: Yes
Accept: ".pdf,.doc,.docx,.xls,.xlsx"
Max Size: 10MB
Error Message: "Please upload a document (PDF, Word, or Excel, max 10MB)"

File Type Reference

Images:

• image/* - All image types
• .jpg,.jpeg,.png,.gif,.webp - Specific image formats

Documents:

• .pdf - PDF documents
• .doc,.docx - Word documents
• .xls,.xlsx - Excel spreadsheets
• .ppt,.pptx - PowerPoint presentations

Archives:

• .zip - ZIP archives
• .tar,.tar.gz - TAR archives

Best Practices

• Set appropriate max file size (balance between usability and storage)
• Clearly state accepted file types in label or help text
• Provide file size and type validation errors
• Show upload progress for large files
• Confirm successful upload visually
• Consider image compression for photos

Validation Rules Summary

Common Validation Rules

Custom Error Messages

For every validation rule, you can set a custom error message:

Default:

"This field is required"
"Must be at least 3 characters"

Custom:

"Please enter your first name"
"Name must be at least 3 characters long"

Best Practices:

• Be specific about what's wrong
• Provide guidance on how to fix it
• Use friendly, non-technical language
• Include examples when helpful

Conditional Logic (Coming Soon)

Show/hide fields based on other field values:

Example:

• If "Are you a current customer?" is "No", show "How did you hear about us?"
• If "Company Size" is "500+", show "Enterprise Sales Contact"
• If "Budget" is less than $10k, show different pricing options

What's Next?

• Creating Forms - Build forms with AI or manually
• Webhooks - Integrate with external services
• Submissions - View form data

Pro Tip: Use the most specific field type available. Don't use text fields for emails, phones, or dates. Specific field types provide better validation, UX, and mobile keyboard support!