Form CRO
Production-grade form optimization framework covering field-cost analysis, layout engineering, multi-step form architecture, validation UX patterns, mobile-specific optimization, and structured A/B test design. Applicable to lead capture, contact, demo request, application, survey, and checkout forms. For signup/registration flows, use signup-flow-cro.
Table of Contents
- [Initial Assessment](#initial-assessment)
- [Field-Cost Analysis Framework](#field-cost-analysis-framework)
- [Multi-Step vs Single-Step Decision](#multi-step-vs-single-step-decision)
- [Field Design Patterns](#field-design-patterns)
- [Validation UX](#validation-ux)
- [CTA and Submit Button Optimization](#cta-and-submit-button-optimization)
- [Mobile Form Optimization](#mobile-form-optimization)
- [Trust and Context Elements](#trust-and-context-elements)
- [Form Type Playbooks](#form-type-playbooks)
- [A/B Test Framework](#ab-test-framework)
- [Metrics and Measurement](#metrics-and-measurement)
- [Output Artifacts](#output-artifacts)
- [Related Skills](#related-skills)
Initial Assessment
Required Context
| Question | Why It Matters | |----------|---------------| | What type of form? (lead capture, contact, demo, application, checkout) | Different types have different optimal field counts | | How many fields currently? | Establishes baseline friction level | | What is the current completion rate? | Benchmark for improvement | | Where do users abandon? (if field-level analytics exist) | Identifies the specific friction point | | Mobile vs desktop split? | Mobile forms need separate optimization | | What happens with submitted data? | Determines which fields are truly necessary | | Which fields are actually used in follow-up? | Often reveals 30-50% of fields are never used | | Any compliance requirements? (GDPR, HIPAA) | Constrains what can be removed |
Field-Cost Analysis Framework
Every field has a cost measured in abandonment. The question is not "what data would be nice to have" but "what data is worth the conversion loss."
Field Cost Matrix
| Field Type | Estimated Abandonment Cost | Justification Threshold | |-----------|---------------------------|------------------------| | Email | Baseline (near zero for gated content) | Always justified for lead forms | | First name | +2-3% drop | Justified if personalization drives follow-up | | Last name | +2-3% drop | Rarely justified for first touch | | Phone number | +5-10% drop | Only if sales will call within 24 hours | | Company name | +3-5% drop | Justified for B2B qualification | | Company size | +3-5% drop | Justified only if routing decisions depend on it | | Job title | +3-5% drop | Can often be enriched post-submission | | Industry | +2-3% drop | Can often be enriched post-submission | | Message/textarea | +5-8% drop | Justified for contact forms, not for lead capture | | Budget | +8-12% drop | Only justified for high-intent demo/sales forms | | Custom question | +3-5% per question | Must directly affect lead routing or qualification |
The Enrichment Test
Before including any field, ask: Can this be enriched after submission?
| Field | Enrichable? | Method | Keep in Form? | |-------|------------|--------|---------------| | Company name | Yes (from email domain) | Clearbit, Apollo, manual lookup | Remove | | Company size | Yes (from company name) | Enrichment API | Remove | | Industry | Yes (from company name) | Enrichment API | Remove | | Job title | Partially (from LinkedIn) | Manual enrichment | Remove unless critical for routing | | Phone number | No | Must be provided | Keep only if sales calls immediately | | Budget | No | Must be stated | Keep only for high-intent forms |
Recommended Field Sets by Form Type
| Form Type | Minimum Fields | Optimal Fields | Maximum Fields | |-----------|---------------|----------------|----------------| | Newsletter signup | Email | Email | Email + First name | | Content download | Email | Email + First name | Email + Name + Company | | Contact form | Email + Message | Email + Name + Message | Email + Name + Subject + Message | | Demo request | Email + Company | Email + Name + Company + Role | + Phone + Use case + Team size | | Application form | Varies by requirement | -- | All required fields (justified individually) |
Multi-Step vs Single-Step Decision
Decision Criteria
| Factor | Single-Step | Multi-Step | |--------|------------|------------| | Total fields | < 5 fields | > 5 fields | | Field complexity | Simple text inputs | Mix of dropdowns, checkboxes, conditional fields | | User motivation | Low-commitment (newsletter, content) | High-commitment (demo, application) | | Qualification need | No routing needed | Different paths based on answers | | Mobile proportion | < 30% mobile | > 50% mobile |
Multi-Step Best Practices
Step structure:
- Step 1: Easiest fields (email, name) -- lowest friction to start
- Step 2: Qualifying information (company, role, use case)
- Step 3: Specific details (budget, timeline, message)
Progress indication:
- Show progress bar with step count ("Step 2 of 3")
- Show completion percentage
- Label each step with what it covers ("Your Details", "Company Info", "Project Details")
Psychological commitment:
- Once a user completes Step 1, they are 40-60% more likely to complete the form (sunk cost effect)
- Capture the email in Step 1 so you can follow up even if they abandon later
Back navigation:
- Always allow users to go back to previous steps
- Preserve entered data when navigating between steps
- Never reset the form on back navigation
Field Design Patterns
Field Labels
| Pattern | When to Use | Example | |---------|-------------|---------| | Above-field labels | Default for most forms | Label sits above the input | | Inline labels (floating) | Space-constrained layouts | Label moves from inside to above on focus | | Left-aligned labels | Wide desktop forms | Label to the left of field | | Placeholder-only labels | Never | Disappears on input, accessibility failure |
Field Types
| Data Needed | Best Input Type | Avoid | |------------|-----------------|-------| | Email | type="email" with validation | Plain text input | | Phone | type="tel" with format mask | Plain text input | | Country | Searchable dropdown | Long static dropdown | | Company size | Button group (1-10, 11-50, 51-200, 200+) | Free text input | | Interest/topic | Checkbox group (max 6 options) | Multi-select dropdown | | Message | Textarea (3-4 rows visible) | Single-line text input | | Date | Native date picker | Three separate dropdowns |
Conditional Fields
Show additional fields based on earlier answers. This reduces visible complexity while capturing necessary data.
Example: "What is your primary goal?" dropdown shows "Budget range" only if they select "Ready to buy" or "Evaluating solutions."
Rules:
- Conditional fields appear with smooth animation (not instant jump)
- Only 1-2 conditional fields per trigger
- Conditional fields are never required (the trigger answer may change)
Validation UX
Real-Time vs Submit-Time Validation
| Validation Type | When to Use | |----------------|-------------| | Real-time (on blur) | Email format, phone format, required fields | | On submit | Complex validation, server-side checks | | Inline suggestions | Company name auto-complete, address lookup |
Error Message Design
| Pattern | Good | Bad | |---------|------|-----| | Position | Below the field, in context | Top of form, disconnected | | Tone | "Please enter a valid email address" | "Error: Invalid input" | | Specificity | "Phone must include area code" | "Invalid phone number" | | Color | Red text + red border on field | Red banner at top of page | | Icon | Error icon next to message | No visual indicator |
Success Indicators
- Green checkmark on valid fields (especially email and phone)
- Positive microcopy: "Looks good!" o