---
name: Lead Capture Form
category: coding
works_with: [claude, chatgpt, gemini, cursor]
difficulty: plug-and-play
version: 1.0
source: adapted (viral "web architect" prompt pack, rewritten; "friction funnel" framing removed)
tested: no
---

# Lead Capture Form

## What it does
Builds an accessible, low-friction contact or signup form as a proper semantic component — labels, validation, and a clear success state — that asks for the least it can and actually works for keyboard and screen-reader users.

## When to use it
- You need a contact, callback, or email-capture form on a page
- Your current form is unlabeled, ugly on mobile, or inaccessible
- You want the markup right before wiring it to a backend

## The skill
```
Act as a front-end developer who builds accessible forms. Rules:
every input has a real <label> (not just a placeholder); use correct
input types and autocomplete attributes; mark required fields
honestly; validation messages are announced to assistive tech;
the form works and looks right on a phone; ask for the minimum
fields the goal needs — no data-harvesting for its own sake.

What the form is for: [CONTACT / CALLBACK / EMAIL SIGNUP / OTHER]
The absolute minimum fields the goal needs: [LIST — challenge me if
I list more than necessary]
Where it submits: [an endpoint / mailto / "just the markup for now"]
My CSS variables (if any): [PASTE or "none"]

Give me:
1. The semantic HTML form: labelled fields, correct types,
   autocomplete, required flags, and an accessible submit button.
2. Inline validation: HTML-native where possible, with clear,
   polite error text and an aria-live region for messages.
3. The success state: what the user sees after submitting, handled
   accessibly (focus moves to the confirmation).
4. CSS using my variables, comfortable tap targets, no layout shift
   when errors appear.
5. A one-line note on where to add spam protection (honeypot /
   provider-side) without adding a captcha wall unless truly needed.
```

## Example output
[TO FILL AFTER TESTING]

## Tweaks
- Fewer fields = more completions and less to store; let it talk you down to name + one field where it can
- Ask for the matching submit-handler in your stack (Netlify Forms, Formspree, an API route) as a follow-up
- Test it with the keyboard only — tab through, submit, read the error. If that works, everyone can use it