Lead Capture

1---
2name: launch-lead-capture
3description: >
4  Build or fix the forms on a small business site so more visitors become leads and no lead
5  is ever lost. Use this skill for contact forms, quote requests, estimate forms, "call me
6  back" forms, newsletter sign-ups and any lead form, and when the user mentions form
7  conversion, form spam, leads not arriving, form notifications, honeypot, CAPTCHA, or
8  marketing consent. Covers fields, copy, validation, spam protection, storage-first delivery,
9  consent and conversion tracking.
10---
11
12# Lead Capture: More Leads, and None Lost
13
14**RULE: Store the lead first, then notify. A form that only sends an email loses the lead
15when the email fails, and nobody finds out.**
16
17Two jobs: get the visitor to submit, and make sure the business receives every submission.
18Most sites fail the second job silently.
19
20## 1. Ask only for what the first reply needs
21
22Every extra field costs submissions. For a first contact you need:
23
24| Field | Why |
25|---|---|
26| Name | To greet them. One field, not first and last. |
27| Email **or** phone | To reply. Let them choose. Require one, not both. |
28| What they need | One free-text field, or one select plus an optional note. |
29
30Ask budget, address and timeline on the call or in the follow-up, not on the form. Add a
31field only when the reply is impossible without it (for example a postcode for a business
32that serves a fixed area).
33
34## 2. Copy and layout
35
36- **Heading states the outcome:** "Get a free quote in 1 business day", not "Contact us".
37- **The button says what they get:** "Get my quote", not "Submit".
38- **Put copy above the button**, never beside it. Stack the reassurance first ("No spam. We
39  reply within 1 business hour."), then the button.
40- Offer a phone link next to the form for people who prefer to call: `<a href="tel:...">`.
41- **Success state** replaces the form and says what happens next, who replies and when, and
42  gives the phone number for urgent jobs.
43
44## 3. Fields that work on phones
45
46```tsx
47<label htmlFor="name">Name</label>
48<input id="name" name="name" autoComplete="name" required />
49
50<label htmlFor="email">Email</label>
51<input id="email" name="email" type="email" autoComplete="email" inputMode="email" />
52
53<label htmlFor="phone">Phone</label>
54<input id="phone" name="phone" type="tel" autoComplete="tel" inputMode="tel" />
55
56{/* Bot traps (section 4). Send both with the other values. */}
57<div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
58  <label htmlFor="website">Website</label>
59  <input id="website" name="website" tabIndex={-1} autoComplete="off" />
60</div>