form-cro

What this skill does

# 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