· Updated · 6 min read
The 17-point checklist from the 73%→54% teardown. Same format, new numbers.
No spam, unsubscribe anytime. I only email teardowns.
Lead forms leak at one field, not from length. A hidden phone-format rule drove 23% of drop-offs. Mask + inline validation + intent labels lifted submissions 124% in 28 days — with more fields, not fewer.
The marketing ask was the sane one: more traffic. The team wanted a bigger top of funnel. The data said we'd been paying for traffic and then spilling a big slice of it on the walk to the callback — a form with a 23% leak at one field is a bigger lever than any ad-budget increase. But I had to prove the leak existed before I could ask for the fix.
Our lead-capture form converted at 2.14%. Nobody argued it was good. The problem was that the number was the only thing anybody could see — one completion rate, and a whole roster of theories about what to do with it.
The theories were the enemy.
Every one of those was a snipe at the aggregate. A real diagnosis needs to know: at which exact field does the flow die?
Same play as the checkout, two levels down. Where the checkout got an event per step, this got an event per field:
The funnel is the entire product. Without it you can't even name the leak — with it you can walk up to a designer and point at a phone input on a Monday afternoon.
One pattern appeared in every single session. Users reached the phone field, typed, got nothing — and left.
The culprit was a phone number format check expecting +1 (555) 000-0000, on a desktop keyboard, failing if the input didn't match exactly. No hint. No formatting. No inline feedback. Type a digit the parser didn't like and the field stayed red — if it gave any signal at all. Then the tab closes.
23% of all abandonment, from one restriction — more than double the next-worst field. The team had spent weeks guessing "too long." The sessions said "the phone field."
| Fix | What we did | Why it worked |
|---|---|---|
| Format hint | Visible masked input + placeholder before the first touch | Users learned the expected format without an error |
| Inline validation | Accept the moment the input becomes valid | Errors never wait for a submit failure |
| Contextual microcopy | Case-specific labels ("Work phone" vs "Any phone") | Users understood intent instead of bouncing |
But the deeper fix wasn't a field fix. The form shipped to every visitor with one shape, and shape was part of the leak too. We rebuilt it into category-specific modules (Material 3 components + the latency cuts) so a Custom Furniture visitor got the exact fields a custom-quote visitor needs. Same form, different face, zero extra load.
| Metric | Before | After |
|---|---|---|
| Lead submissions | baseline | +124% |
| Mobile completion time | baseline | −41% |
| Rage clicks | baseline | −68% |
The hard part of this project was that every instinct pointed the wrong way. "Shorten the form" is the classic advice, and it's usually wrong — here's why we know:
That last point is the one worth stealing. Good form design is mostly removing the moment of rejection. Every field that can be validated inline should be — web.dev's form best practices cover the mechanics. Every format that can be shown ahead of typing should be. If you never show a user a red field, you never give them a reason to walk away.
Desktop was the easy half. On mobile it was stark:
The module rework bundled mobile-specific copy and the Material 3 components. The −41% mobile completion-time metric you see in the table came largely from the field logic, not the CSS.
The move that made this easy to defend: field-level funnels make the fix ownable. When a designer asked "prove the phone field was it," the answer wasn't a theory — it was a row in a table and 30 seconds of shared Clarity playback. Every form project should be presented that way: as a ladder with one rung shown red, and the fix mapped to the exact rung.
The full field-by-field detail lives at the lead form case study.
Full spec and code-adjacent details: the lead form case study. And if you've read the checkout teardown — the same measure-before-you-fix play at a different scale — this is the field-level version: checkout abandonment.