- 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>
210 lines
7.9 KiB
Markdown
210 lines
7.9 KiB
Markdown
---
|
||
title: "Form CRO"
|
||
description: "Form CRO - Claude Code skill from the Marketing domain."
|
||
---
|
||
|
||
# Form CRO
|
||
|
||
<div class="page-meta" markdown>
|
||
<span class="meta-badge">:material-bullhorn-outline: Marketing</span>
|
||
<span class="meta-badge">:material-identifier: `form-cro`</span>
|
||
<span class="meta-badge">:material-github: <a href="https://github.com/alirezarezvani/claude-skills/tree/main/marketing-skill/form-cro/SKILL.md">Source</a></span>
|
||
</div>
|
||
|
||
<div class="install-banner" markdown>
|
||
<span class="install-label">Install:</span> <code>claude /plugin install marketing-skills</code>
|
||
</div>
|
||
|
||
|
||
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:
|
||
|
||
1. **Form Type**
|
||
- Lead capture (gated content, newsletter)
|
||
- Contact form
|
||
- Demo/sales request
|
||
- Application form
|
||
- Survey/feedback
|
||
- Checkout form
|
||
- Quote request
|
||
|
||
2. **Current State**
|
||
- How many fields?
|
||
- What's the current completion rate?
|
||
- Mobile vs. desktop split?
|
||
- Where do users abandon?
|
||
|
||
3. **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
|
||
|
||
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?
|
||
|
||
---
|
||
|
||
## 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.md` for 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:
|
||
|
||
1. **"Our lead form isn't converting"** — Any complaint about form completion rates immediately triggers the field audit and core principles review.
|
||
2. **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.
|
||
3. **"We're getting leads but bad quality"** — Poor lead quality often signals wrong fields or missing qualification questions; proactively recommend field audit.
|
||
4. **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.
|
||
5. **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 |
|