Skill260 estrellas del repoactualizado 16d ago
form-cro
form-cro is a production-grade framework for optimizing conversion-focused forms including lead capture, contact, demo request, application, survey, and checkout types. Use it to conduct field-cost analysis, architect single or multi-step layouts, design validation patterns, optimize mobile experiences, and structure A/B tests with measurement strategies. For signup and registration flows, use signup-flow-cro instead.
Instalar en Claude Code
Copiargit clone --depth 1 https://github.com/borghei/Claude-Skills /tmp/form-cro && cp -r /tmp/form-cro/business-growth/form-cro ~/.claude/skills/form-croDespués abre una sesión nueva de Claude Code; el skill carga automáticamente.
Definición
SKILL.md
# 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 theDel mismo repositorio
changelog-managerSubagent
>-
code-reviewerSubagent
>-
doc-generatorSubagent
>-
git-workflowSubagent
>-
qa-engineerSubagent
>-
security-auditorSubagent
>-
a11y-auditSlash Command
Run an accessibility audit on the current project for WCAG compliance.
code-to-prdSlash Command
Reverse-engineer a Product Requirements Document from existing code.