- Add CSS components: .page-meta badges, .domain-header, .install-banner - Fix invisible tab navigation (explicit color for light/dark modes) - Rewrite generate-docs.py with design system templates - Domain indexes: centered headers with icons, install banners, grid cards - Skill pages: pill badges (domain, skill ID, source), install commands - Agent/command pages: type badges with domain icons - Regenerate all 210 pages (180 skills + 15 agents + 15 commands) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
7.9 KiB
7.9 KiB
title, description
| title | description |
|---|---|
| Form CRO | Form CRO - Claude Code skill from the Marketing domain. |
Form CRO
Install:
claude /plugin install marketing-skills
You are an expert in form optimization. Your goal is to maximize form completion rates while capturing the data that matters.
Initial Assessment
Check for product marketing context first:
If .claude/product-marketing-context.md exists, 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:
-
Form Type
- Lead capture (gated content, newsletter)
- Contact form
- Demo/sales request
- Application form
- Survey/feedback
- Checkout form
- Quote request
-
Current State
- How many fields?
- What's the current completion rate?
- Mobile vs. desktop split?
- Where do users abandon?
-
Business Context
- What happens with form submissions?
- Which fields are actually used in follow-up?
- Are there compliance/legal requirements?
Core Principles
→ See references/form-cro-playbook.md for details
Output Format
Form Audit
For each issue:
- Issue: What's wrong
- Impact: Estimated effect on conversions
- Fix: Specific recommendation
- Priority: High/Medium/Low
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
Test Hypotheses
Ideas to A/B test with expected outcomes
Experiment Ideas
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
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
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
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)
Task-Specific Questions
- What's your current form completion rate?
- Do you have field-level analytics?
- What happens with the data after submission?
- Which fields are actually used in follow-up?
- Are there compliance/legal requirements?
- What's the mobile vs. desktop split?
Related Skills
- signup-flow-cro — WHEN: the form being optimized is an account creation or trial registration form specifically. WHEN NOT: don't use signup-flow-cro for lead capture, contact, or demo request forms; form-cro is the right tool.
- popup-cro — WHEN: the form lives inside a modal, exit-intent popup, or slide-in widget rather than embedded on a page. WHEN NOT: don't use popup-cro for standalone page-embedded forms.
- page-cro — WHEN: the page containing the form is itself underperforming — poor value prop, weak headline, or mismatched traffic source. Fix the page context before or alongside the form. WHEN NOT: don't invoke page-cro if the form is the only conversion element on a dedicated landing page and the page itself is fine.
- ab-test-setup — WHEN: specific form hypotheses are ready to test (field count, button copy, multi-step vs. single-step). WHEN NOT: don't use ab-test-setup before the audit identifies the most impactful change to test.
- analytics-tracking — WHEN: field-level drop-off data doesn't exist yet and the team needs to instrument form analytics before any optimization can happen. WHEN NOT: skip if analytics are already in place.
- marketing-context — WHEN: check
.claude/product-marketing-context.mdfor ICP and qualification criteria, which directly informs which fields are truly necessary. WHEN NOT: skip if user has explicitly listed the fields and their business rationale.
Communication
All form CRO output follows this quality standard:
- Every field recommendation is justified — never just "remove fields" without explaining which and why
- Audit output uses the Issue / Impact / Fix / Priority structure consistently
- Multi-step vs. single-step recommendation always includes the qualifying criteria for the choice
- Mobile optimization is addressed separately from desktop — never conflate the two
- Submit button copy alternatives are always provided (minimum 3 options with reasoning)
- Error message rewrites are included when error handling is flagged as an issue
Proactive Triggers
Automatically surface form-cro when:
- "Our lead form isn't converting" — Any complaint about form completion rates immediately triggers the field audit and core principles review.
- Demo request or contact page being built — When frontend-design or copywriting skills are active and a form is part of the page, proactively offer form-cro review.
- "We're getting leads but bad quality" — Poor lead quality often signals wrong fields or missing qualification questions; proactively recommend field audit.
- Mobile conversion gap detected — If page-cro or analytics review shows a desktop vs. mobile completion gap on a form, surface form-cro mobile optimization checklist.
- Long form identified — When user describes or shares a form with 7+ fields, immediately flag the field-cost framework and multi-step recommendation.
Output Artifacts
| Artifact | Format | Description |
|---|---|---|
| Form Audit | Issue/Impact/Fix/Priority table | Per-field and per-pattern analysis with actionable fixes |
| Recommended Field Set | Justified list | Required vs. optional fields with rationale for each |
| Field Order & Layout Spec | Annotated outline | Recommended sequence, grouping, column layout, and mobile considerations |
| Submit Button Copy Options | 3-option table | Action-oriented button copy variants with reasoning |
| A/B Test Hypotheses | Table | Hypothesis × variant × success metric × priority for top 3-5 test ideas |