·

#forms #pre-launch checklist #website QA #founders #lead generation

How to Test Every Form on Your Website Before You Launch (So You Don't Lose Leads)

Most broken forms don't throw an error — the page looks fine and the button appears to work, but the lead never lands anywhere. Here's the test pass that catches it before customers do.

Your homepage can be pixel-perfect and your site can still be losing every lead that comes through it. Forms are the one part of a website where “looks right” and “works right” are completely different claims, and the gap between them is invisible unless someone actually tests it. A contact form with a broken backend still renders. The button still says “Submit.” The page still shows a thank-you message. Nothing about it looks wrong — until you check whether anything actually arrived.

That’s what makes form bugs the most expensive category of pre-launch bug: they fail silently, and they fail exactly where the money is. Here’s a test pass built to catch that failure mode specifically, not the general “does the page look okay” review most pre-launch checklists run.

Why do broken forms matter more than other launch bugs?

Because a broken form doesn’t just look bad — it silently deletes revenue that never shows up as a support ticket. Baymard Institute’s meta-analysis of 50 cart-abandonment studies puts the average checkout abandonment rate at 70.22%, and estimates $260 billion in orders are lost annually across US and EU ecommerce purely from checkout usability issues — 17% of shoppers specifically cite a “too long or complicated” checkout as the reason they left. Most sites run checkout forms with an average of 23.48 fields against an achievable 12–14, according to the same research — extra friction that’s rarely visible to the person who built the form, because they already know what it’s asking for.

Forms outside of checkout carry the same risk with less visibility into the damage. Leadferno’s audit of 225 small-business contact forms — all ranking in the top 10 local Google results in their categories — found 4.8% were outright broken: displaying errors, or accepting a complete, valid submission and simply failing to deliver it anywhere. Nobody on the business side knew, because a broken form doesn’t page anyone. It just quietly stops working, and every visitor who hits it becomes a lead nobody will ever follow up with.

This is the gap a visual review misses. A screenshot shows you the form field arrangement, the label copy, the button styling — everything about how a form looks. It can’t show you whether the POST request behind that button actually lands anywhere. That’s a functional test, not a visual one, and it has to be run separately.

Which forms on your site actually need this test pass?

Every form that a lead or a transaction depends on, tested individually — not sampled. That usually means: the main contact form, any newsletter or lead-magnet signup, checkout or payment forms, quote/booking request forms, and login or account-creation forms if the site has them. Each one has a different failure mode and a different cost when it breaks. A broken newsletter signup loses you a future subscriber; a broken checkout loses you a sale that was already in your cart.

Treat each form as its own object to test, not a single “forms” line item. Zuko Analytics’ benchmarking data — drawn from tracked form sessions across sectors — found only 45% of people who start a form actually complete it, and completion rates vary by device (47% on desktop, 42% on mobile, 41% on tablet). Those numbers are baseline abandonment from real users making real decisions about whether to keep going. A form with a technical bug on top of that baseline friction compounds the loss — and you won’t be able to tell which is which from analytics alone, which is exactly why the test has to happen before launch, not after.

How do you test form validation so it survives real users, not just your own careful testing?

By deliberately trying to break it the way a distracted, impatient, or confused visitor would — not the way you’d fill it out yourself. When you build or review a form, you already know what it wants. Real visitors don’t. Run each of these on every field:

  • Leave required fields empty and confirm the form blocks submission with a message that says which field is missing, not a generic “error occurred.”
  • Enter malformed data — an email without an @, a phone number with letters in it, a date in the wrong format — and confirm it’s rejected before submission, not after.
  • Paste in special characters and unusually long strings, including emoji and non-Latin characters, since these are common causes of silent backend failures that never surface in a normal QA pass.
  • Test file uploads at the size limit and past it if the form accepts attachments, and confirm the rejection message is visible, not just a spinner that never resolves.
  • Submit the form twice in a row to check for duplicate-submission handling — a common source of double-booked appointments or duplicate CRM records.

None of this requires a QA background. It requires treating the form as something that should be actively attacked before launch, not just glanced at.

Does the data actually arrive somewhere, and how do you check?

Submit the form with real information and go look for it — in the inbox, the CRM, the Slack channel, or wherever the form is supposed to route to, not just on the confirmation screen. A form’s on-screen “Thanks, we got it!” message is generated client-side and proves nothing about what happened server-side. The two can — and regularly do — disagree.

This is where Leadferno’s data gets uncomfortable: in the same 225-form sample, 42.6% of submitted leads never received a single response, average first-reply time across all responders was 17 hours and 49 minutes, and only 3.1% of businesses replied inside the ideal five-minute window. Some share of that is a process problem, not a technical one — but 84% of the forms in the sample also had no automated confirmation email at all, meaning even the businesses that intended to follow up had no fallback if the manual process broke down. Test for both failure modes: does the submission arrive anywhere reliable, and does anything acknowledge it landed?

How do mobile forms fail differently than desktop forms?

They fail in ways a resized browser window can’t reproduce, because the failure modes are about touch and on-device keyboards, not layout. Google’s web.dev guidance on sign-in and account forms recommends type="email" and type="tel" specifically so mobile keyboards switch to the right layout automatically, and inputmode="numeric" for PIN or code fields — get the input type wrong and a mobile visitor is stuck hunting for the @ symbol or a number row on a full alphabetic keyboard. The same guidance stresses testing on real devices, not a browser resized to a phone’s dimensions, since desktop browsers don’t reproduce how a phone’s own keyboard actually obstructs or resizes the visible form.

Tap target size is the other mobile-specific failure. The W3C’s WCAG 2.5.8 criterion sets a minimum of 24×24 CSS pixels for any clickable or tappable target, specifically because smaller targets cause mis-taps for anyone with reduced dexterity, larger fingers, or a shaking hand on a moving train — and Apple’s and Google’s own platform guidelines both recommend going further, at 44×44 and 48×48 respectively. A submit button or checkbox that’s comfortably clickable with a precise mouse cursor can be genuinely hard to hit accurately with a thumb, and you won’t catch that by looking at a screenshot — you have to try tapping it.

Autofill is the third gap. Web.dev’s autofill guidance notes that browsers rely on stable name and id attributes to recognize and fill in fields correctly — if a form’s field names change between page loads or deployments, autofill silently stops working, and a mobile visitor who’d normally fill an address in one tap is suddenly typing it by hand. That’s a bug you’ll only notice if you actually test with autofill turned on, on a real phone, not in a code review.

How do you turn a broken form into a fix your developer can act on fast?

By pinning the exact failure to the exact field, instead of describing it in a paragraph. “The contact form doesn’t work” forces a developer to reproduce your entire test from scratch, guessing at which field, which browser, and which device you meant. A pin placed directly on the broken submit button, with the specific input you used and what happened when you clicked it, removes the guessing entirely.

This is the gap between a screenshot-based review and one that stays anchored to the actual element. Simpl_Markup lets a reviewer click directly on the form field or button in question and pin a comment to that exact spot, with the viewport it was tested on captured alongside it — so “the email field rejects valid addresses on mobile” comes with the exact field, not a guess at which one you meant. Because comments sync into the Slack channels a team already uses, the developer sees the pin and the visual annotation without a context switch, and each one carries a status — open, fixed, approved — so a form bug found in testing doesn’t quietly fall out of a Slack thread before launch.

That status tracking matters more for form bugs than almost any other bug type, precisely because they’re invisible once “fixed.” A layout bug is obviously fixed when you look at the page again. A form bug requires re-submitting and re-checking delivery — which is exactly the kind of re-verification step that gets skipped when the only record of the original bug was a message that scrolled out of view.

A 30-minute pre-launch form-testing pass

Run this on every form the site depends on, not just the main contact form:

  1. Submit real, valid data and confirm it arrives somewhere you can check — inbox, CRM, or Slack.
  2. Leave required fields empty and confirm the rejection message names the field.
  3. Enter malformed data (bad email format, letters in a phone field, oversized text) and confirm it’s caught before submission.
  4. Test a file upload at and past the size limit, if the form accepts one.
  5. Check for a confirmation email or on-screen status beyond the initial thank-you message.
  6. Repeat the whole pass on an actual phone — not a resized browser — checking keyboard type, autofill, and tap target size.
  7. Pin every failure to its exact field with the device and input that triggered it, and track it to fixed before launch, not after.

None of this requires a QA team or a testing budget. It requires treating forms as the part of the site where a launch bug costs the most and shows the least — and testing them like it.