{"id":"form-cro","name":"form-cro","summary":"リード獲得、連絡、デモ依頼、申請、チェックアウトフォームのフォーム最適化。現場コスト分析、多段階フォーム設計、検証UX、モバイル最適化、A/Bテストフレームワークをカバーしています。","body":"# Form CRO\n\nProduction-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.\n\n---\n\n## Table of Contents\n\n- [Initial Assessment](#initial-assessment)\n- [Field-Cost Analysis Framework](#field-cost-analysis-framework)\n- [Multi-Step vs Single-Step Decision](#multi-step-vs-single-step-decision)\n- [Field Design Patterns](#field-design-patterns)\n- [Validation UX](#validation-ux)\n- [CTA and Submit Button Optimization](#cta-and-submit-button-optimization)\n- [Mobile Form Optimization](#mobile-form-optimization)\n- [Trust and Context Elements](#trust-and-context-elements)\n- [Form Type Playbooks](#form-type-playbooks)\n- [A/B Test Framework](#ab-test-framework)\n- [Metrics and Measurement](#metrics-and-measurement)\n- [Output Artifacts](#output-artifacts)\n- [Related Skills](#related-skills)\n\n---\n\n## Clarify First\n\nBefore optimizing the form, confirm these inputs. If any is unknown or vague, ASK — do not assume:\n\n- [ ] **Form type** — lead capture, contact, demo, application, or checkout (sets the optimal field count and playbook)\n- [ ] **Current fields + which are used in follow-up** — reveals which fields to cut or enrich (the core of field-cost analysis)\n- [ ] **Current completion rate + where users abandon** — baseline and the specific friction point to target\n- [ ] **Compliance requirements** — GDPR/HIPAA fields that cannot be removed (constrains the field reduction)\n\nStop rule: ask only the 2-3 that most change the output. If the user says \"just draft it,\" proceed and list your assumptions at the top of the audit.\n\n## Initial Assessment\n\n### Required Context\n\n| Question | Why It Matters |\n|----------|---------------|\n| What type of form? (lead capture, contact, demo, application, checkout) | Different types have different optimal field counts |\n| How many fields currently? | Establishes baseline friction level |\n| What is the current completion rate? | Benchmark for improvement |\n| Where do users abandon? (if field-level analytics exist) | Identifies the specific friction point |\n| Mobile vs desktop split? | Mobile forms need separate optimization |\n| What happens with submitted data? | Determines which fields are truly necessary |\n| Which fields are actually used in follow-up? | Often reveals 30-50% of fields are never used |\n| Any compliance requirements? (GDPR, HIPAA) | Constrains what can be removed |\n\n---\n\n## Field-Cost Analysis Framework\n\nEvery 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.\"\n\n### Field Cost Matrix\n\n| Field Type | Estimated Abandonment Cost | Justification Threshold |\n|-----------|---------------------------|------------------------|\n| Email | Baseline (near zero for gated content) | Always justified for lead forms |\n| First name | +2-3% drop | Justified if personalization drives follow-up |\n| Last name | +2-3% drop | Rarely justified for first touch |\n| Phone number | +5-10% drop | Only if sales will call within 24 hours |\n| Company name | +3-5% drop | Justified for B2B qualification |\n| Company size | +3-5% drop | Justified only if routing decisions depend on it |\n| Job title | +3-5% drop | Can often be enriched post-submission |\n| Industry | +2-3% drop | Can often be enriched post-submission |\n| Message/textarea | +5-8% drop | Justified for contact forms, not for lead capture |\n| Budget | +8-12% drop | Only justified for high-intent demo/sales forms |\n| Custom question | +3-5% per question | Must directly affect lead routing or qualification |\n\n### The Enrichment Test\n\nBefore including any field, ask: **Can this be enriched after submission?**\n\n| Field | Enrichable? | Method | Keep in Form? |\n|-------|------------|--------|---------------|\n| Company name | Yes (from email domain) | Clearbit, Apollo, manual lookup | Remove |\n| Company size | Yes (from company name) | Enrichment API | Remove |\n| Industry | Yes (from company name) | Enrichment API | Remove |\n| Job title | Partially (from LinkedIn) | Manual enrichment | Remove unless critical for routing |\n| Phone number | No | Must be provided | Keep only if sales calls immediately |\n| Budget | No | Must be stated | Keep only for high-intent forms |\n\n### Recommended Field Sets by Form Type\n\n| Form Type | Minimum Fields | Optimal Fields | Maximum Fields |\n|-----------|---------------|----------------|----------------|\n| Newsletter signup | Email | Email | Email + First name |\n| Content download | Email | Email + First name | Email + Name + Company |\n| Contact form | Email + Message | Email + Name + Message | Email + Name + Subject + Message |\n| Demo request | Email + Company | Email + Name + Company + Role | + Phone + Use case + Team size |\n| Application form | Varies by requirement | -- | All required fields (justified individually) |\n\n---\n\n## Multi-Step vs Single-Step Decision\n\n### Decision Criteria\n\n| Factor | Single-Step | Multi-Step |\n|--------|------------|------------|\n| Total fields | < 5 fields | > 5 fields |\n| Field complexity | Simple text inputs | Mix of dropdowns, checkboxes, conditional fields |\n| User motivation | Low-commitment (newsletter, content) | High-commitment (demo, application) |\n| Qualification need | No routing needed | Different paths based on answers |\n| Mobile proportion | < 30% mobile | > 50% mobile |\n\n### Multi-Step Best Practices\n\n**Step structure:**\n- Step 1: Easiest fields (email, name) -- lowest friction to start\n- Step 2: Qualifying information (company, role, use case)\n- Step 3: Specific details (budget, timeline, message)\n\n**Progress indication:**\n- Show progress bar with step count (\"Step 2 of 3\")\n- Show completion percentage\n- Label each step with what it covers (\"Your Details\", \"Company Info\", \"Project Details\")\n\n**Psychological commitment:**\n- Once a user completes Step 1, they are 40-60% more likely to complete the form (sunk cost effect)\n- Capture the email in Step 1 so you can follow up even if they abandon later\n\n**Back navigation:**\n- Always allow users to go back to previous steps\n- Preserve entered data when navigating between steps\n- Never reset the form on back navigation\n\n---\n\n## Field Design Patterns\n\n### Field Labels\n\n| Pattern | When to Use | Example |\n|---------|-------------|---------|\n| Above-field labels | Default for most forms | Label sits above the input |\n| Inline labels (floating) | Space-constrained layouts | Label moves from inside to above on focus |\n| Left-aligned labels | Wide desktop forms | Label to the left of field |\n| Placeholder-only labels | Never | Disappears on input, accessibility failure |\n\n### Field Types\n\n| Data Needed | Best Input Type | Avoid |\n|------------|-----------------|-------|\n| Email | `type=\"email\"` with validation | Plain text input |\n| Phone | `type=\"tel\"` with format mask | Plain text input |\n| Country | Searchable dropdown | Long static dropdown |\n| Company size | Button group (1-10, 11-50, 51-200, 200+) | Free text input |\n| Interest/topic | Checkbox group (max 6 options) | Multi-select dropdown |\n| Message | Textarea (3-4 rows visible) | Single-line text input |\n| Date | Native date picker | Three separate dropdowns |\n\n### Conditional Fields\n\nShow additional fields based on earlier answers. This reduces visible complexity while capturing necessary data.\n\n**Example:** \"What is your primary goal?\" dropdown shows \"Budget range\" only if they select \"Ready to buy\" or \"Evaluating solutions.\"\n\n**Rules:**\n- Conditional fields appear with smooth animation (not instant jump)\n- Only 1-2 conditional fields per trigger\n- Conditional fields are never required (the trigger answer may change)\n\n---\n\n## Validation UX\n\n### Real-Time vs Submit-Time Validation\n\n| Validation Type | When to Use |\n|----------------|-------------|\n| Real-time (on blur) | Email format, phone format, required fields |\n| On submit | Complex validation, server-side checks |\n| Inline suggestions | Company name auto-complete, address lookup |\n\n### Error Message Design\n\n| Pattern | Good | Bad |\n|---------|------|-----|\n| Position | Below the field, in context | Top of form, disconnected |\n| Tone | \"Please enter a valid email address\" | \"Error: Invalid input\" |\n| Specificity | \"Phone must include area code\" | \"Invalid phone number\" |\n| Color | Red text + red border on field | Red banner at top of page |\n| Icon | Error icon next to message | No visual indicator |\n\n### Success Indicators\n\n- Green checkmark on valid fields (especially email and phone)\n- Positive microcopy: \"Looks good!\" on valid email\n- Do NOT flash green/red on every keystroke -- validate on blur (when user leaves the field)\n\n---\n\n## CTA and Submit Button Optimization\n\n### Button Copy Framework\n\n| Form Type | Weak Copy | Strong Copy | Strongest Copy |\n|-----------|-----------|-------------|----------------|\n| Content download | Submit | Download Guide | Get My Free Guide |\n| Demo request | Submit | Request Demo | Schedule My Demo |\n| Contact form | Send | Send Message | Get in Touch |\n| Newsletter | Subscribe | Join Newsletter | Get Weekly Tips |\n| Free trial | Sign Up | Start Free Trial | Start Building Free |\n\n**Rules:**\n- Use first person (\"Get My...\" not \"Get Your...\")\n- Specify what they get, not what they do\n- Include \"Free\" when applicable\n- Keep under 5 words\n\n### Button Design\n\n| Element | Best Practice |\n|---------|---------------|\n| Color | High contrast against form background, consistent with brand CTA color |\n| Size | Full-width on mobile, min 44px height for touch targets |\n| Position | Immediately below last field, no gap |\n| Loading state | Show spinner + \"Sending...\" to prevent double-submit |\n| Disabled state | Disabled until required fields are valid (with clear visual distinction) |\n\n---\n\n## Mobile Form Optimization\n\n### Mobile-Specific Rules\n\n| Rule | Implementation |\n|------|---------------|\n| Touch targets | Minimum 44x44px for all interactive elements |\n| Keyboard types | `type=\"email\"` for email, `type=\"tel\"` for phone, `type=\"number\"` for numeric |\n| Auto-focus | Focus first field on page load (with keyboard open) |\n| Sticky submit | Pin submit button to bottom of viewport on long forms |\n| Input spacing | Minimum 8px between fields to prevent mis-taps |\n| Dropdown alternatives | Use button groups or radio buttons instead of dropdowns on mobile |\n| Auto-fill | Support browser auto-fill for standard fields (name, email, phone, address) |\n\n### Mobile vs Desktop Form Differences\n\n| Aspect | Desktop | Mobile |\n|--------|---------|--------|\n| Layout | 1 or 2 columns | Always 1 column |\n| Field count | Up to 8 | Max 5 per step |\n| Dropdown | Standard dropdown | Bottom sheet or full-screen picker |\n| Help text | Hover tooltips | Always-visible inline text |\n| Validation | On blur | On blur + on submit summary |\n\n---\n\n## Trust and Context Elements\n\n### Trust Signals Near Forms\n\n| Signal | Placement | Impact |\n|--------|-----------|--------|\n| Privacy assurance | Below submit button | \"We'll never share your email\" |\n| Security badges | Next to form container | SSL, SOC2, GDPR compliance |\n| Testimonial | Adjacent to form | Social proof reduces hesitation |\n| Response time | Below submit button | \"We respond within 2 hours\" |\n| Subscriber/user count | Above or within form | \"Join 10,000+ subscribers\" |\n\n### Context Reinforcement\n\n| Element | Purpose | Example |\n|---------|---------|---------|\n| Form header | Remind what they get | \"Get your free SEO audit report\" |\n| Bullet list above form | Reinforce value | \"You'll get: Full site analysis, Priority fix list, 30-min review call\" |\n| Expected next step | Set expectations | \"After submitting, we'll email your report within 24 hours\" |\n\n---\n\n## Form Type Playbooks\n\n### Lead Capture (Gated Content)\n\n**Goal:** Maximize completions while capturing qualified leads.\n- Fields: Email only (or Email + First name maximum)\n- CTA: Value-specific (\"Get My Report\", \"Download Checklist\")\n- Trust: \"No spam, unsubscribe anytime\"\n- Post-submit: Immediate download + thank you page + follow-up email\n\n### Demo Request\n\n**Goal:** Capture qualified prospects ready for sales conversation.\n- Fields: Email + Name + Company (+ Phone and Team size optional)\n- CTA: \"Schedule My Demo\"\n- Trust: \"30-minute call, no commitment\"\n- Post-submit: Calendar booking page or confirmation with scheduling link\n- Consider: Embedded calendar (Calendly/Cal.com) instead of form\n\n### Contact Form\n\n**Goal:** Enable communication while routing to correct team.\n- Fields: Email + Name + Subject dropdown + Message\n- CTA: \"Send Message\"\n- Trust: \"We respond within [X] hours\"\n- Post-submit: Confirmation with expected response time\n- Consider: Adding department/topic routing dropdown\n\n### Quote Request\n\n**Goal:** Capture enough detail for accurate quoting.\n- Fields: Multi-step form with project details\n- CTA: \"Get My Quote\"\n- Trust: \"Free quote, no obligation\"\n- Post-submit: Quote delivery timeline + human follow-up\n\n---\n\n## A/B Test Framework\n\n### High-Impact Tests (Run First)\n\n| Test | Hypothesis | Success Metric |\n|------|-----------|----------------|\n| Remove phone field | Removing phone increases completion by 5-10% | Completion rate |\n| Single-step to multi-step | Multi-step increases completion for 6+ field forms | Completion rate + submission quality |\n| CTA copy change | Value-specific copy increases clicks by 10-20% | Click-through rate |\n| Add social proof | Testimonial near form increases trust | Completion rate |\n\n### Medium-Impact Tests\n\n| Test | Hypothesis | Success Metric |\n|------|-----------|----------------|\n| Field order change | Easiest fields first increases step-1 completion | Step completion rates |\n| Inline validation | Real-time feedback reduces form errors | Error rate + completion rate |\n| Add progress bar | Visual progress on multi-step increases completion | Completion rate |\n| Embedded calendar vs form | Calendar reduces friction for demo requests | Booking rate |\n\n### Measurement Rules\n\n- Run each test for minimum 2 weeks or 200 conversions per variant (whichever is longer)\n- Track both quantity (completion rate) and quality (lead score, SQL rate)\n- A test that increases completions but decreases lead quality is not a win\n\n---\n\n## Metrics and Measurement\n\n### Key Metrics\n\n| Metric | Formula | Benchmark |\n|--------|---------|-----------|\n| Form completion rate | Submissions / Form views | 20-40% for lead forms, 5-15% for long forms |\n| Field-level drop-off | Abandonment per field | Identify the highest-drop field |\n| Time to complete | Avg seconds from first interaction to submit | < 60s for simple forms, < 3min for complex |\n| Error rate | Users who see error / total users | < 10% |\n| Mobile completion rate | Mobile submissions / Mobile form views | Should be within 20% of desktop rate |\n\n### Instrumentation Requirements\n\nTrack these events in your analytics:\n- Form view (impression)\n- Form interaction (first field focus)\n- Per-field completion (on blur, per field)\n- Form submission attempt\n- Form submission success\n- Form validation error (per field)\n\n---\n\n## Output Artifacts\n\n| Artifact | Format | Description |\n|----------|--------|-------------|\n| Form Audit Report | Issue/Impact/Fix/Priority table | Per-field analysis with estimated abandonment cost |\n| Recommended Field Set | Justified list | Required vs optional vs enrichable fields with rationale |\n| Field Layout Specification | Annotated outline | Order, grouping, label style, validation rules, mobile adaptations |\n| CTA Copy Options | 3-option table | Button text variants with reasoning and expected impact |\n| A/B Test Plan | Prioritized table | Top 5 tests with hypothesis, variant, metric, and priority |\n| Mobile Optimization Checklist | Checkbox list | Mobile-specific fixes with implementation notes |\n\n---\n\n## Related Skills\n\n- **signup-flow-cro** -- Use when the form is an account creation or trial registration flow. Form-cro is for lead capture, contact, and demo forms.\n- **popup-cro** -- Use when the form lives inside a modal or popup. Form-cro handles the form itself; popup-cro handles the trigger, timing, and container.\n- **page-cro** -- Use when the page surrounding the form needs optimization (headline, value prop, layout).\n- **onboarding-cro** -- Use when post-form-submission activation is the bottleneck, not the form itself.\n\n---\n\n## Tool Reference\n\n### 1. form_scorer.py\n\n**Purpose:** Score a form against CRO best practices across field count, field types, CTA quality, mobile readiness, and trust signals.\n\n```bash\npython scripts/form_scorer.py form_config.json\npython scripts/form_scorer.py form_config.json --json\n```\n\n| Flag | Required | Description |\n|------|----------|-------------|\n| `form_config.json` | Yes | JSON file with form fields, CTA, and context metadata |\n| `--json` | No | Output results as JSON |\n\n### 2. field_cost_analyzer.py\n\n**Purpose:** Calculate the estimated abandonment cost of each form field and recommend fields to remove, keep, or make enrichable.\n\n```bash\npython scripts/field_cost_analyzer.py form_fields.json\npython scripts/field_cost_analyzer.py form_fields.json --json\n```\n\n| Flag | Required | Description |\n|------|----------|-------------|\n| `form_fields.json` | Yes | JSON file with form fields and their types |\n| `--json` | No | Output results as JSON |\n| `--monthly-visitors` | No | Monthly form visitors for dollar impact estimate (default: 1000) |\n| `--current-rate` | No | Current form completion rate as percentage (default: 25) |\n| `--value-per-lead` | No | Dollar value per lead for ROI calculation (default: 50) |\n\n### 3. ab_test_calculator.py\n\n**Purpose:** Calculate A/B test sample size, duration, and statistical significance for form optimization experiments.\n\n```bash\npython scripts/ab_test_calculator.py --baseline 25 --lift 10 --traffic 500\npython scripts/ab_test_calculator.py --baseline 25 --lift 10 --traffic 500 --json\n```\n\n| Flag | Required | Description |\n|------|----------|-------------|\n| `--baseline` | Yes | Current conversion rate as percentage (e.g., 25 for 25%) |\n| `--lift` | Yes | Minimum detectable lift as percentage (e.g., 10 for 10% relative lift) |\n| `--traffic` | Yes | Daily traffic (visitors per day to the form) |\n| `--confidence` | No | Confidence level as percentage (default: 95) |\n| `--json` | No | Output results as JSON |\n\n---\n\n## Troubleshooting\n\n| Problem | Likely Cause | Solution |\n|---------|-------------|----------|\n| Form completion rate below 15% | Too many fields or high-friction fields present | Run field_cost_analyzer.py to identify and remove high-cost fields; target email-only for first-touch lead forms |\n| Mobile completion rate 50%+ lower than desktop | Form not optimized for touch input | Ensure 44px touch targets, single-column layout, native keyboard types; replace dropdowns with button groups on mobile |\n| Users start but do not finish the form | Friction in middle fields (phone, budget, message) | Move high-friction fields to later steps in a multi-step form; capture email in step 1 |\n| High error rate on email or phone fields | Validation too aggressive or unclear error messages | Validate on blur (not keystroke); use specific error copy (\"Please include @ in email\") not generic (\"Invalid input\") |\n| A/B test results are inconclusive after 4 weeks | Insufficient sample size or too small a lift target | Use ab_test_calculator.py to confirm required sample size; consider testing bigger changes (field removal vs copy tweak) |\n| CTA clicks are low despite good page traffic | CTA copy is generic or button is not prominent enough | Replace \"Submit\" with value-specific copy (\"Get My Report\"); ensure CTA is full-width on mobile, high-contrast color |\n\n---\n\n## Success Criteria\n\n- Form completion rate above 25% for lead capture forms (above 35% is excellent)\n- Mobile completion rate within 20% of desktop rate\n- Error rate below 10% of form interactions\n- Field-level drop-off identifies specific friction points with clear remediation\n- Each form field has documented justification (business need or enrichable post-submission)\n- A/B tests run for minimum 200 conversions per variant before declaring winner\n- Post-form-submission follow-up occurs within 24 hours for demo and contact forms\n\n---\n\n## Scope & Limitations\n\n- **In scope:** Form field optimization, CTA copy, validation UX, mobile optimization, trust signal placement, A/B test design, field cost analysis\n- **Out of scope:** Page-level CRO (use page-cro), popup trigger optimization (use popup-cro), signup/registration flows (use signup-flow-cro), post-submission nurture sequences\n- **Data dependency:** Field-level analytics (per-field drop-off) provide the most actionable data but require analytics instrumentation\n- **Compliance constraint:** GDPR/HIPAA may require specific fields that cannot be removed; document compliance requirements before optimizing\n- **Statistical validity:** A/B test recommendations require sufficient traffic volume; low-traffic forms may need longer test durations or alternative evaluation methods\n\n---\n\n## Integration Points\n\n- **page-cro** -- When the form converts well but the surrounding page does not drive form interactions, optimize the page-level elements first\n- **popup-cro** -- When the form is inside a popup or modal, trigger timing and container design are handled by popup-cro\n- **signup-flow-cro** -- For account creation and registration forms (not lead capture), use signup-flow-cro which handles multi-step auth flows\n- **onboarding-cro** -- When post-form-submission activation is the bottleneck, not the form completion rate itself\n- **free-tool-strategy** -- Free tools often include lead capture forms; use form-cro to optimize the capture form within the tool","author":"@borghei","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/borghei/Claude-Skills/tree/main/business-growth/form-cro","license":"MIT","category":"testing","lang":"en","tokens":4883,"stars":0,"calls30d":0,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"scripts/ab_test_calculator.py","size":8991,"sha256":"b146e70ccc557ed5bf30e786a8813e0864a60c553ef533947bb5b0f990e3ceaa"},{"path":"scripts/field_cost_analyzer.py","size":9411,"sha256":"0d8453c32da4e2ef2461c3f21bad153d5735fc9b4763fe63da42f0b3e20e14a1"},{"path":"scripts/form_scorer.py","size":10012,"sha256":"fe9a1be840f9c9b0b2111c1d01a10073d235ad1adaa393d14aeb914f2ba27624"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":true,"networkEndpoints":[]}}