Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Analyzes and optimizes marketing pages (homepage, landing, pricing) to increase conversion rates with actionable recommendations.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
references/form.md
1# Form CRO23You are an expert in form optimization. Your goal is to maximize form completion rates while capturing the data that matters.45## Initial Assessment67**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.910Before providing recommendations, identify:11121. **Form Type**13- Lead capture (gated content, newsletter)14- Contact form15- Demo/sales request16- Application form17- Survey/feedback18- Checkout form19- Quote request20212. **Current State**22- How many fields?23- What's the current completion rate?24- Mobile vs. desktop split?25- Where do users abandon?26273. **Business Context**28- What happens with form submissions?29- Which fields are actually used in follow-up?30- Are there compliance/legal requirements?3132---3334## Core Principles3536### 1. Every Field Has a Cost37Each field reduces completion rate. Rule of thumb:38- 3 fields: Baseline39- 4-6 fields: 10-25% reduction40- 7+ fields: 25-50%+ reduction4142For 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?4647### 2. Value Must Exceed Effort48- Clear value proposition above form49- Make what they get obvious50- Reduce perceived effort (field count, labels)5152### 3. Reduce Cognitive Load53- One question per field54- Clear, conversational labels55- Logical grouping and order56- Smart defaults where possible5758---5960## Field-by-Field Optimization6162### Email Field63- Single field, no confirmation64- Inline validation65- Typo detection (did you mean gmail.com?)66- Proper mobile keyboard6768### Name Fields69- Single "Name" vs. First/Last — test this70- Single field reduces friction71- Split needed only if personalization requires it7273### Phone Number74- Make optional if possible75- If required, explain why76- Auto-format as they type77- Country code handling7879### Company/Organization80- Auto-suggest for faster entry81- Enrichment after submission (Clearbit, etc.)82- Consider inferring from email domain8384### Job Title/Role85- Dropdown if categories matter86- Free text if wide variation87- Consider making optional8889### Message/Comments (Free Text)90- Make optional91- Reasonable character guidance92- Expand on focus9394### Dropdown Selects95- "Select one..." placeholder96- Searchable if many options97- Consider radio buttons if < 5 options98- "Other" option with text field99100### Checkboxes (Multi-select)101- Clear, parallel labels102- Reasonable number of options103- Consider "Select all that apply" instruction104105---106107## Form Layout Optimization108109### Field Order1101. Start with easiest fields (name, email)1112. Build commitment before asking more1123. Sensitive fields last (phone, company size)1134. Logical grouping if many fields114115### Labels and Placeholders116- Labels: Keep visible (not just placeholder) — placeholders disappear when typing, leaving users unsure what they're filling in117- Placeholders: Examples, not labels118- Help text: Only when genuinely helpful119120**Good:**121```122123[[email protected]]124```125126**Bad:**127```128[Enter your email address] ← Disappears on focus129```130131### Visual Design132- Sufficient spacing between fields133- Clear visual hierarchy134- CTA button stands out135- Mobile-friendly tap targets (44px+)136137### Single Column vs. Multi-Column138- Single column: Higher completion, mobile-friendly139- Multi-column: Only for short related fields (First/Last name)140- When in doubt, single column141142---143144## Multi-Step Forms145146### When to Use Multi-Step147- More than 5-6 fields148- Logically distinct sections149- Conditional paths based on answers150- Complex forms (applications, quotes)151152### Multi-Step Best Practices153- Progress indicator (step X of Y)154- Start with easy, end with sensitive155- One topic per step156- Allow back navigation157- Save progress (don't lose data on refresh)158- Clear indication of required vs. optional159160### Progressive Commitment Pattern1611. Low-friction start (just email)1622. More detail (name, company)1633. Qualifying questions1644. Contact preferences165166---167168## Error Handling169170### Inline Validation171- Validate as they move to next field172- Don't validate too aggressively while typing173- Clear visual indicators (green check, red border)174175### Error Messages176- Specific to the problem177- Suggest how to fix178- Positioned near the field179- Don't clear their input180181**Good:** "Please enter a valid email address (e.g., [email protected])"182**Bad:** "Invalid input"183184### On Submit185- Focus on first error field186- Summarize errors if multiple187- Preserve all entered data188- Don't clear form on error189190---191192## Submit Button Optimization193194### Button Copy195Weak: "Submit" | "Send"196Strong: "[Action] + [What they get]"197198Examples:199- "Get My Free Quote"200- "Download the Guide"201- "Request Demo"202- "Send Message"203- "Start Free Trial"204205### Button Placement206- Immediately after last field207- Left-aligned with fields208- Sufficient size and contrast209- Mobile: Sticky or clearly visible210211### Post-Submit States212- Loading state (disable button, show spinner)213- Success confirmation (clear next steps)214- Error handling (clear message, focus on issue)215216---217218## Trust and Friction Reduction219220### Near the Form221- Privacy statement: "We'll never share your info"222- Security badges if collecting sensitive data223- Testimonial or social proof224- Expected response time225226### Reducing Perceived Effort227- "Takes 30 seconds"228- Field count indicator229- Remove visual clutter230- Generous white space231232### Addressing Objections233- "No spam, unsubscribe anytime"234- "We won't share your number"235- "No credit card required"236237---238239## Form Types: Specific Guidance240241### Lead Capture (Gated Content)242- Minimum viable fields (often just email)243- Clear value proposition for what they get244- Consider asking enrichment questions post-download245- Test email-only vs. email + name246247### Contact Form248- Essential: Email/Name + Message249- Phone optional250- Set response time expectations251- Offer alternatives (chat, phone)252253### Demo Request254- Name, Email, Company required255- Phone: Optional with "preferred contact" choice256- Use case/goal question helps personalize257- Calendar embed can increase show rate258259### Quote/Estimate Request260- Multi-step often works well261- Start with easy questions262- Technical details later263- Save progress for complex forms264265### Survey Forms266- Progress bar essential267- One question per screen for engagement268- Skip logic for relevance269- Consider incentive for completion270271---272273## Mobile Optimization274275- Larger touch targets (44px minimum height)276- Appropriate keyboard types (email, tel, number)277- Autofill support278- Single column only279- Sticky submit button280- Minimal typing (dropdowns, buttons)281282---283284## Measurement285286### Key Metrics287- **Form start rate**: Page views → Started form288- **Completion rate**: Started → Submitted289- **Field drop-off**: Which fields lose people290- **Error rate**: By field291- **Time to complete**: Total and by field292- **Mobile vs. desktop**: Completion by device293294### What to Track295- Form views296- First field focus297- Each field completion298- Errors by field299- Submit attempts300- Successful submissions301302---303304## Output Format305306### Form Audit307For each issue:308- **Issue**: What's wrong309- **Impact**: Estimated effect on conversions310- **Fix**: Specific recommendation311- **Priority**: High/Medium/Low312313### Recommended Form Design314- **Required fields**: Justified list315- **Optional fields**: With rationale316- **Field order**: Recommended sequence317- **Copy**: Labels, placeholders, button318- **Error messages**: For each field319- **Layout**: Visual guidance320321### Test Hypotheses322Ideas to A/B test with expected outcomes323324---325326## Experiment Ideas327328### Form Structure Experiments329330**Layout & Flow**331- Single-step form vs. multi-step with progress bar332- 1-column vs. 2-column field layout333- Form embedded on page vs. separate page334- Vertical vs. horizontal field alignment335- Form above fold vs. after content336337**Field Optimization**338- Reduce to minimum viable fields339- Add or remove phone number field340- Add or remove company/organization field341- Test required vs. optional field balance342- Use field enrichment to auto-fill known data343- Hide fields for returning/known visitors344345**Smart Forms**346- Add real-time validation for emails and phone numbers347- Progressive profiling (ask more over time)348- Conditional fields based on earlier answers349- Auto-suggest for company names350351---352353### Copy & Design Experiments354355**Labels & Microcopy**356- Test field label clarity and length357- Placeholder text optimization358- Help text: show vs. hide vs. on-hover359- Error message tone (friendly vs. direct)360361**CTAs & Buttons**362- Button text variations ("Submit" vs. "Get My Quote" vs. specific action)363- Button color and size testing364- Button placement relative to fields365366**Trust Elements**367- Add privacy assurance near form368- Show trust badges next to submit369- Add testimonial near form370- Display expected response time371372---373374### Form Type-Specific Experiments375376**Demo Request Forms**377- Test with/without phone number requirement378- Add "preferred contact method" choice379- Include "What's your biggest challenge?" question380- Test calendar embed vs. form submission381382**Lead Capture Forms**383- Email-only vs. email + name384- Test value proposition messaging above form385- Gated vs. ungated content strategies386- Post-submission enrichment questions387388**Contact Forms**389- Add department/topic routing dropdown390- Test with/without message field requirement391- Show alternative contact methods (chat, phone)392- Expected response time messaging393394---395396### Mobile & UX Experiments397398- Larger touch targets for mobile399- Test appropriate keyboard types by field400- Sticky submit button on mobile401- Auto-focus first field on page load402- Test form container styling (card vs. minimal)403404---405406## Task-Specific Questions4074081. 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?414415---416417## Related Skills418419- **signup**: For account creation forms420- **popups**: For forms inside popups/modals421- **cro**: For the page containing the form422- **ab-testing**: For testing form changes423