Skill Tracer
Skills › Marketing Skills › cro › form.md

form.md

422 lines · skills/cro/references/form.md at 88c79f6

Open on GitHub
1# Form CRO
2
3You are an expert in form optimization. Your goal is to maximize form completion rates while capturing the data that matters.
4

Form CRO

You are an expert in form optimization. Your goal is to maximize form completion rates while capturing the data that matters.

Raw lines 1 to 4
5## Initial Assessment
6
7**Check for product marketing context first:**
8If `.agents/product-marketing.md` exists (or `.claude/product-marketing.md` in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.
9
10Before providing recommendations, identify:
121. **Form Type**
13 - Lead capture (gated content, newsletter)
14 - Contact form
15 - Demo/sales request
16 - Application form
17 - Survey/feedback
18 - Checkout form
19 - Quote request
212. **Current State**
22 - How many fields?
23 - What's the current completion rate?
24 - Mobile vs. desktop split?
25 - Where do users abandon?
273. **Business Context**
28 - What happens with form submissions?
29 - Which fields are actually used in follow-up?
30 - Are there compliance/legal requirements?
32---

Initial Assessment

Check for product marketing context first: If .agents/product-marketing.md exists (or .claude/product-marketing.md in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.

Before providing recommendations, identify:

  1. Form Type
  2. Lead capture (gated content, newsletter)
  3. Contact form
  4. Demo/sales request
  5. Application form
  6. Survey/feedback
  7. Checkout form
  8. Quote request
  1. Current State
  2. How many fields?
  3. What's the current completion rate?
  4. Mobile vs. desktop split?
  5. Where do users abandon?
  1. Business Context
  2. What happens with form submissions?
  3. Which fields are actually used in follow-up?
  4. Are there compliance/legal requirements?

Raw lines 5 to 33
34## Core Principles

Core Principles

Raw lines 34 to 35
36### 1. Every Field Has a Cost
37Each field reduces completion rate. Rule of thumb:
38- 3 fields: Baseline
39- 4-6 fields: 10-25% reduction
40- 7+ fields: 25-50%+ reduction
42For each field, ask:
43- Is this absolutely necessary before we can help them?
44- Can we get this information another way?
45- Can we ask this later?

1. Every Field Has a Cost

Each field reduces completion rate. Rule of thumb:

  • 3 fields: Baseline
  • 4-6 fields: 10-25% reduction
  • 7+ fields: 25-50%+ reduction

For each field, ask:

  • Is this absolutely necessary before we can help them?
  • Can we get this information another way?
  • Can we ask this later?
Raw lines 36 to 46
47### 2. Value Must Exceed Effort
48- Clear value proposition above form
49- Make what they get obvious
50- Reduce perceived effort (field count, labels)

2. Value Must Exceed Effort

  • Clear value proposition above form
  • Make what they get obvious
  • Reduce perceived effort (field count, labels)
Raw lines 47 to 51
52### 3. Reduce Cognitive Load
53- One question per field
54- Clear, conversational labels
55- Logical grouping and order
56- Smart defaults where possible
58---

3. Reduce Cognitive Load

  • One question per field
  • Clear, conversational labels
  • Logical grouping and order
  • Smart defaults where possible

Raw lines 52 to 59
60## Field-by-Field Optimization

Field-by-Field Optimization

Raw lines 60 to 61
62### Email Field
63- Single field, no confirmation
64- Inline validation
65- Typo detection (did you mean gmail.com?)
66- Proper mobile keyboard

Email Field

  • Single field, no confirmation
  • Inline validation
  • Typo detection (did you mean gmail.com?)
  • Proper mobile keyboard
Raw lines 62 to 67
68### Name Fields
69- Single "Name" vs. First/Last — test this
70- Single field reduces friction
71- Split needed only if personalization requires it

Name Fields

  • Single "Name" vs. First/Last — test this
  • Single field reduces friction
  • Split needed only if personalization requires it
Raw lines 68 to 72
73### Phone Number
74- Make optional if possible
75- If required, explain why
76- Auto-format as they type
77- Country code handling

Phone Number

  • Make optional if possible
  • If required, explain why
  • Auto-format as they type
  • Country code handling
Raw lines 73 to 78
79### Company/Organization
80- Auto-suggest for faster entry
81- Enrichment after submission (HubSpot Breeze, Clay, Apollo, etc.)
82- Consider inferring from email domain

Company/Organization

  • Auto-suggest for faster entry
  • Enrichment after submission (HubSpot Breeze, Clay, Apollo, etc.)
  • Consider inferring from email domain
Raw lines 79 to 83
84### Job Title/Role
85- Dropdown if categories matter
86- Free text if wide variation
87- Consider making optional

Job Title/Role

  • Dropdown if categories matter
  • Free text if wide variation
  • Consider making optional
Raw lines 84 to 88
89### Message/Comments (Free Text)
90- Make optional
91- Reasonable character guidance
92- Expand on focus

Message/Comments (Free Text)

  • Make optional
  • Reasonable character guidance
  • Expand on focus
Raw lines 89 to 93
94### Dropdown Selects
95- "Select one..." placeholder
96- Searchable if many options
97- Consider radio buttons if < 5 options
98- "Other" option with text field

Dropdown Selects

  • "Select one..." placeholder
  • Searchable if many options
  • Consider radio buttons if < 5 options
  • "Other" option with text field
Raw lines 94 to 99
100### Checkboxes (Multi-select)
101- Clear, parallel labels
102- Reasonable number of options
103- Consider "Select all that apply" instruction
105---

Checkboxes (Multi-select)

  • Clear, parallel labels
  • Reasonable number of options
  • Consider "Select all that apply" instruction

Raw lines 100 to 106
107## Form Layout Optimization

Form Layout Optimization

Raw lines 107 to 108
109### Field Order
1101. Start with easiest fields (name, email)
1112. Build commitment before asking more
1123. Sensitive fields last (phone, company size)
1134. Logical grouping if many fields

Field Order

  1. Start with easiest fields (name, email)
  2. Build commitment before asking more
  3. Sensitive fields last (phone, company size)
  4. Logical grouping if many fields
Raw lines 109 to 114
115### Labels and Placeholders
116- Labels: Keep visible (not just placeholder) — placeholders disappear when typing, leaving users unsure what they're filling in
117- Placeholders: Examples, not labels
118- Help text: Only when genuinely helpful
120**Good:**
121```
122Email
123[name@company.com]
124```
126**Bad:**
127```
128[Enter your email address] ← Disappears on focus
129```

Labels and Placeholders

  • Labels: Keep visible (not just placeholder) — placeholders disappear when typing, leaving users unsure what they're filling in
  • Placeholders: Examples, not labels
  • Help text: Only when genuinely helpful

Good:

Email
[name@company.com]

Bad:

[Enter your email address]  ← Disappears on focus
Raw lines 115 to 130
131### Visual Design
132- Sufficient spacing between fields
133- Clear visual hierarchy
134- CTA button stands out
135- Mobile-friendly tap targets (44px+)

Visual Design

  • Sufficient spacing between fields
  • Clear visual hierarchy
  • CTA button stands out
  • Mobile-friendly tap targets (44px+)
Raw lines 131 to 136
137### Single Column vs. Multi-Column
138- Single column: Higher completion, mobile-friendly
139- Multi-column: Only for short related fields (First/Last name)
140- When in doubt, single column
142---

Single Column vs. Multi-Column

  • Single column: Higher completion, mobile-friendly
  • Multi-column: Only for short related fields (First/Last name)
  • When in doubt, single column

Raw lines 137 to 143
144## Multi-Step Forms

Multi-Step Forms

Raw lines 144 to 145
146### When to Use Multi-Step
147- More than 5-6 fields
148- Logically distinct sections
149- Conditional paths based on answers
150- Complex forms (applications, quotes)

When to Use Multi-Step

  • More than 5-6 fields
  • Logically distinct sections
  • Conditional paths based on answers
  • Complex forms (applications, quotes)
Raw lines 146 to 151
152### Multi-Step Best Practices
153- Progress indicator (step X of Y)
154- Start with easy, end with sensitive
155- One topic per step
156- Allow back navigation
157- Save progress (don't lose data on refresh)
158- Clear indication of required vs. optional

Multi-Step Best Practices

  • Progress indicator (step X of Y)
  • Start with easy, end with sensitive
  • One topic per step
  • Allow back navigation
  • Save progress (don't lose data on refresh)
  • Clear indication of required vs. optional
Raw lines 152 to 159
160### Progressive Commitment Pattern
1611. Low-friction start (just email)
1622. More detail (name, company)
1633. Qualifying questions
1644. Contact preferences
166---

Progressive Commitment Pattern

  1. Low-friction start (just email)
  2. More detail (name, company)
  3. Qualifying questions
  4. Contact preferences

Raw lines 160 to 167
168## Error Handling

Error Handling

Raw lines 168 to 169
170### Inline Validation
171- Validate as they move to next field
172- Don't validate too aggressively while typing
173- Clear visual indicators (green check, red border)

Inline Validation

  • Validate as they move to next field
  • Don't validate too aggressively while typing
  • Clear visual indicators (green check, red border)
Raw lines 170 to 174
175### Error Messages
176- Specific to the problem
177- Suggest how to fix
178- Positioned near the field
179- Don't clear their input
181**Good:** "Please enter a valid email address (e.g., name@company.com)"
182**Bad:** "Invalid input"

Error Messages

  • Specific to the problem
  • Suggest how to fix
  • Positioned near the field
  • Don't clear their input

Good: "Please enter a valid email address (e.g., name@company.com)" Bad: "Invalid input"

Raw lines 175 to 183
184### On Submit
185- Focus on first error field
186- Summarize errors if multiple
187- Preserve all entered data
188- Don't clear form on error
190---

On Submit

  • Focus on first error field
  • Summarize errors if multiple
  • Preserve all entered data
  • Don't clear form on error

Raw lines 184 to 191
192## Submit Button Optimization

Submit Button Optimization

Raw lines 192 to 193
194### Button Copy
195Weak: "Submit" | "Send"
196Strong: "[Action] + [What they get]"
198Examples:
199- "Get My Free Quote"
200- "Download the Guide"
201- "Request Demo"
202- "Send Message"
203- "Start Free Trial"

Button Copy

Weak: "Submit" | "Send" Strong: "[Action] + [What they get]"

Examples:

  • "Get My Free Quote"
  • "Download the Guide"
  • "Request Demo"
  • "Send Message"
  • "Start Free Trial"
Raw lines 194 to 204
205### Button Placement
206- Immediately after last field
207- Left-aligned with fields
208- Sufficient size and contrast
209- Mobile: Sticky or clearly visible

Button Placement

  • Immediately after last field
  • Left-aligned with fields
  • Sufficient size and contrast
  • Mobile: Sticky or clearly visible
Raw lines 205 to 210
211### Post-Submit States
212- Loading state (disable button, show spinner)
213- Success confirmation (clear next steps)
214- Error handling (clear message, focus on issue)
216---

Post-Submit States

  • Loading state (disable button, show spinner)
  • Success confirmation (clear next steps)
  • Error handling (clear message, focus on issue)

Raw lines 211 to 217
218## Trust and Friction Reduction

Trust and Friction Reduction

Raw lines 218 to 219
220### Near the Form
221- Privacy statement: "We'll never share your info"
222- Security badges if collecting sensitive data
223- Testimonial or social proof
224- Expected response time

Near the Form

  • Privacy statement: "We'll never share your info"
  • Security badges if collecting sensitive data
  • Testimonial or social proof
  • Expected response time
Raw lines 220 to 225
226### Reducing Perceived Effort
227- "Takes 30 seconds"
228- Field count indicator
229- Remove visual clutter
230- Generous white space

Reducing Perceived Effort

  • "Takes 30 seconds"
  • Field count indicator
  • Remove visual clutter
  • Generous white space
Raw lines 226 to 231
232### Addressing Objections
233- "No spam, unsubscribe anytime"
234- "We won't share your number"
235- "No credit card required"
237---

Addressing Objections

  • "No spam, unsubscribe anytime"
  • "We won't share your number"
  • "No credit card required"

Raw lines 232 to 238
239## Form Types: Specific Guidance

Form Types: Specific Guidance

Raw lines 239 to 240
241### Lead Capture (Gated Content)
242- Minimum viable fields (often just email)
243- Clear value proposition for what they get
244- Consider asking enrichment questions post-download
245- Test email-only vs. email + name

Lead Capture (Gated Content)

  • Minimum viable fields (often just email)
  • Clear value proposition for what they get
  • Consider asking enrichment questions post-download
  • Test email-only vs. email + name
Raw lines 241 to 246
247### Contact Form
248- Essential: Email/Name + Message
249- Phone optional
250- Set response time expectations
251- Offer alternatives (chat, phone)

Contact Form

  • Essential: Email/Name + Message
  • Phone optional
  • Set response time expectations
  • Offer alternatives (chat, phone)
Raw lines 247 to 252
253### Demo Request
254- Name, Email, Company required
255- Phone: Optional with "preferred contact" choice
256- Use case/goal question helps personalize
257- Calendar embed can increase show rate

Demo Request

  • Name, Email, Company required
  • Phone: Optional with "preferred contact" choice
  • Use case/goal question helps personalize
  • Calendar embed can increase show rate
Raw lines 253 to 258
259### Quote/Estimate Request
260- Multi-step often works well
261- Start with easy questions
262- Technical details later
263- Save progress for complex forms

Quote/Estimate Request

  • Multi-step often works well
  • Start with easy questions
  • Technical details later
  • Save progress for complex forms
Raw lines 259 to 264
265### Survey Forms
266- Progress bar essential
267- One question per screen for engagement
268- Skip logic for relevance
269- Consider incentive for completion
271---

Survey Forms

  • Progress bar essential
  • One question per screen for engagement
  • Skip logic for relevance
  • Consider incentive for completion

Raw lines 265 to 272
273## Mobile Optimization
275- Larger touch targets (44px minimum height)
276- Appropriate keyboard types (email, tel, number)
277- Autofill support
278- Single column only
279- Sticky submit button
280- Minimal typing (dropdowns, buttons)
282---

Mobile Optimization

  • Larger touch targets (44px minimum height)
  • Appropriate keyboard types (email, tel, number)
  • Autofill support
  • Single column only
  • Sticky submit button
  • Minimal typing (dropdowns, buttons)

Raw lines 273 to 283
284## Measurement
286### Key Metrics
287- **Form start rate**: Page views → Started form
288- **Completion rate**: Started → Submitted
289- **Field drop-off**: Which fields lose people
290- **Error rate**: By field
291- **Time to complete**: Total and by field
292- **Mobile vs. desktop**: Completion by device

Key Metrics

  • Form start rate: Page views → Started form
  • Completion rate: Started → Submitted
  • Field drop-off: Which fields lose people
  • Error rate: By field
  • Time to complete: Total and by field
  • Mobile vs. desktop: Completion by device
Raw lines 286 to 293
294### What to Track
295- Form views
296- First field focus
297- Each field completion
298- Errors by field
299- Submit attempts
300- Successful submissions
302---

What to Track

  • Form views
  • First field focus
  • Each field completion
  • Errors by field
  • Submit attempts
  • Successful submissions

Raw lines 294 to 303
304## Output Format
306### Form Audit
307For each issue:
308- **Issue**: What's wrong
309- **Impact**: Estimated effect on conversions
310- **Fix**: Specific recommendation
311- **Priority**: High/Medium/Low

Form Audit

For each issue:

  • Issue: What's wrong
  • Impact: Estimated effect on conversions
  • Fix: Specific recommendation
  • Priority: High/Medium/Low
Raw lines 306 to 312
313### Recommended Form Design
314- **Required fields**: Justified list
315- **Optional fields**: With rationale
316- **Field order**: Recommended sequence
317- **Copy**: Labels, placeholders, button
318- **Error messages**: For each field
319- **Layout**: Visual guidance

Recommended Form Design

  • Required fields: Justified list
  • Optional fields: With rationale
  • Field order: Recommended sequence
  • Copy: Labels, placeholders, button
  • Error messages: For each field
  • Layout: Visual guidance
Raw lines 313 to 320
321### Test Hypotheses
322Ideas to A/B test with expected outcomes
324---

Test Hypotheses

Ideas to A/B test with expected outcomes


Raw lines 321 to 325
326## Experiment Ideas

Experiment Ideas

Raw lines 326 to 327
328### Form Structure Experiments
330**Layout & Flow**
331- Single-step form vs. multi-step with progress bar
332- 1-column vs. 2-column field layout
333- Form embedded on page vs. separate page
334- Vertical vs. horizontal field alignment
335- Form above fold vs. after content
337**Field Optimization**
338- Reduce to minimum viable fields
339- Add or remove phone number field
340- Add or remove company/organization field
341- Test required vs. optional field balance
342- Use field enrichment to auto-fill known data
343- Hide fields for returning/known visitors
345**Smart Forms**
346- Add real-time validation for emails and phone numbers
347- Progressive profiling (ask more over time)
348- Conditional fields based on earlier answers
349- Auto-suggest for company names
351---

Form Structure Experiments

Layout & Flow

  • Single-step form vs. multi-step with progress bar
  • 1-column vs. 2-column field layout
  • Form embedded on page vs. separate page
  • Vertical vs. horizontal field alignment
  • Form above fold vs. after content

Field Optimization

  • Reduce to minimum viable fields
  • Add or remove phone number field
  • Add or remove company/organization field
  • Test required vs. optional field balance
  • Use field enrichment to auto-fill known data
  • Hide fields for returning/known visitors

Smart Forms

  • Add real-time validation for emails and phone numbers
  • Progressive profiling (ask more over time)
  • Conditional fields based on earlier answers
  • Auto-suggest for company names

Raw lines 328 to 352
353### Copy & Design Experiments
355**Labels & Microcopy**
356- Test field label clarity and length
357- Placeholder text optimization
358- Help text: show vs. hide vs. on-hover
359- Error message tone (friendly vs. direct)
361**CTAs & Buttons**
362- Button text variations ("Submit" vs. "Get My Quote" vs. specific action)
363- Button color and size testing
364- Button placement relative to fields
366**Trust Elements**
367- Add privacy assurance near form
368- Show trust badges next to submit
369- Add testimonial near form
370- Display expected response time
372---

Copy & Design Experiments

Labels & Microcopy

  • Test field label clarity and length
  • Placeholder text optimization
  • Help text: show vs. hide vs. on-hover
  • Error message tone (friendly vs. direct)

CTAs & Buttons

  • Button text variations ("Submit" vs. "Get My Quote" vs. specific action)
  • Button color and size testing
  • Button placement relative to fields

Trust Elements

  • Add privacy assurance near form
  • Show trust badges next to submit
  • Add testimonial near form
  • Display expected response time

Raw lines 353 to 373
374### Form Type-Specific Experiments
376**Demo Request Forms**
377- Test with/without phone number requirement
378- Add "preferred contact method" choice
379- Include "What's your biggest challenge?" question
380- Test calendar embed vs. form submission
382**Lead Capture Forms**
383- Email-only vs. email + name
384- Test value proposition messaging above form
385- Gated vs. ungated content strategies
386- Post-submission enrichment questions
388**Contact Forms**
389- Add department/topic routing dropdown
390- Test with/without message field requirement
391- Show alternative contact methods (chat, phone)
392- Expected response time messaging
394---

Form Type-Specific Experiments

Demo Request Forms

  • Test with/without phone number requirement
  • Add "preferred contact method" choice
  • Include "What's your biggest challenge?" question
  • Test calendar embed vs. form submission

Lead Capture Forms

  • Email-only vs. email + name
  • Test value proposition messaging above form
  • Gated vs. ungated content strategies
  • Post-submission enrichment questions

Contact Forms

  • Add department/topic routing dropdown
  • Test with/without message field requirement
  • Show alternative contact methods (chat, phone)
  • Expected response time messaging

Raw lines 374 to 395
396### Mobile & UX Experiments
398- Larger touch targets for mobile
399- Test appropriate keyboard types by field
400- Sticky submit button on mobile
401- Auto-focus first field on page load
402- Test form container styling (card vs. minimal)
404---

Mobile & UX Experiments

  • Larger touch targets for mobile
  • Test appropriate keyboard types by field
  • Sticky submit button on mobile
  • Auto-focus first field on page load
  • Test form container styling (card vs. minimal)

Raw lines 396 to 405
406## Task-Specific Questions
4081. What's your current form completion rate?
4092. Do you have field-level analytics?
4103. What happens with the data after submission?
4114. Which fields are actually used in follow-up?
4125. Are there compliance/legal requirements?
4136. What's the mobile vs. desktop split?
415---

Task-Specific Questions

  1. What's your current form completion rate?
  2. Do you have field-level analytics?
  3. What happens with the data after submission?
  4. Which fields are actually used in follow-up?
  5. Are there compliance/legal requirements?
  6. What's the mobile vs. desktop split?

Raw lines 406 to 416
417## Related Skills
419- **signup**: For account creation forms
420- **popups**: For forms inside popups/modals
421- **cro**: For the page containing the form
422- **ab-testing**: For testing form changes

Related Skills

  • signup: For account creation forms
  • popups: For forms inside popups/modals
  • cro: For the page containing the form
  • ab-testing: For testing form changes
Raw lines 417 to 422