The Average Checkout Has 14.88 Fields and Needs 7 to 8: Four Form Layouts and What They Really Cost in Conversion, Accessibility and INP

Why Forms Deserve Another Look Now

A form is the one place on a website where the user has to do work for you, and the place least often redesigned. Baymard Institute has tracked cart abandonment for fourteen years; the global average currently sits at 70.19%, and 17% of US online shoppers cite a checkout that was too long or complicated. The same body of research finds that the average US checkout displays 23.48 form elements by default, 14.88 of them actual input fields, while most orders need only 7 to 8. As AI assistants start comparing and filling on users' behalf, form layout shifts from an aesthetic question to a data-legibility one.

Four Patterns, Four Real Examples

Single-column long form (Stripe Checkout): every field stacked vertically on one page, with inline validation beneath each field. The design choice is no pagination and no redirect; the effort goes into detecting card type and localising address formats automatically. Suits few fields and high trust.
Stepped with progress (GOV.UK forms): the UK government splits complex applications into one question per page with a single clear action and a progress indicator. This is codified in the GOV.UK Design System question pages pattern, chosen to reduce cognitive load and error rates rather than for appearance.
Accordion checkout (default Shopify storefronts): contact, delivery and payment collapse in sequence, each completed section folding into an editable summary line. It delivers a sense of progress and reversibility inside a single page.
Conversational form (Typeform): one question at a time, emphasising rhythm. Converts well on short surveys, but total interaction count becomes a burden as field count rises.

The Logic Behind the Patterns

All four differ on one underlying variable: decisions per unit of screen time. In cognitive terms, the more options presented at once, the longer a decision takes (the Hick–Hyman law), and every input field is a decision, not merely a typing task. GOV.UK chose one question per page because its users often fill forms under stress where errors are costly. Stripe chose one column on one page because payment users have already decided to buy, and at that moment interruption is more dangerous than length. The shared principle: field order should match the order the information sits in the user's head — name, address, payment. Break that order and completion drops.

Technical Cost and Limits

Single-column: cheapest to build, roughly 3–5 working days. The risk is excessive page length on mobile, and a wall of errors the user must scroll to find.
Stepped: add 4–8 working days for state persistence, back navigation, refresh survival and per-step validation. If every step is a fresh page load, mobile users pay a round trip each time.
Accordion: add 3–6 days, mostly for summary collapse and edit-state synchronisation. Variable-height summaries without reserved space generate CLS directly.
Conversational: add 5–10 days, and heavy animation plus per-question rendering easily degrades INP, most visibly on mid- and low-end phones.
SEO: checkout pages are usually noindexed, so the impact is not ranking but the site-wide field data in Core Web Vitals, where a poor checkout score still counts toward the origin.

Industries It Suits, and Industries It Does Not

Pattern	Suits	Does not suit
Single-column	Checkout or subscription payment with 10 fields or fewer	Insurance or lending applications with branching
Stepped with progress	Insurance, account opening, government and medical applications, B2B quote requests	Low-value impulse purchases
Accordion	General retail with multiple delivery options	Single-item checkout with very few fields
Conversational	Surveys, event registration, first-contact enquiry forms	Checkout, or long forms needing cross-referencing

How to Apply It to Your Site

Step one: count the fields. Write down how many are shown by default and compare against the 7–8 benchmark. Every field beyond it needs a reason to be asked now.
Step two: classify necessity. Sort fields into ask-now, ask-later and derive-automatically. Tax IDs, invoice titles and birthdays usually belong in the second pile.
Step three: pick the pattern by branching complexity. No conditional branches, single column; three or more branches, stepped with a progress indicator.
Step four: fix validation timing. Validate on blur rather than on every keystroke, place the message beneath the field and bind it with aria-describedby.
Step five: cover accessibility basics. Every field needs a real <label> (a placeholder does not count), correct autocomplete attributes, full keyboard operation, and errors announced by screen readers — check against the WCAG 2.2 quick reference.
Step six: measure before deciding again. After launch, track per-field abandonment, error rate and median completion time. Without those three numbers, a redesign is only a restyle.

Common Mistakes and How to Avoid Them

Using placeholders instead of labels. The field name disappears the moment typing starts, and screen reader support is inconsistent. Fix: keep the label, float it if needed.
Progress indicators whose step count changes. Nothing annoys users more than two extra steps appearing near the end. Fix: fix the total and expand conditional questions within a step.
Error summaries only at the top. On mobile, finding the offending field takes a long scroll. Fix: make the summary items anchor links and repeat the message beside each field.
Wrong mobile keyboard type. A text keyboard for a phone number raises error rates immediately. Fix: set inputmode and type correctly.
Summary blocks that push the page around. Fix: reserve a minimum height for variable-height regions to avoid layout shift.

Further Resources

GOV.UK Design System — Question pages: the most complete public treatment of one-question-per-page, including error handling and accessibility.
WCAG 2.2 Quick Reference: a line-by-line checklist for accepting form accessibility.
Baymard Institute checkout usability research: the quantitative source for field counts, abandonment reasons and pattern comparisons.
web.dev — INP: the official metric definition for judging whether animation and per-question rendering are slowing interaction.

FAQ

Are stepped forms always better than single-page?

No. The advantage comes from fewer decisions per step and clear progress, not from pagination itself. Splitting eight fields across four steps just trades scrolling for clicking. What decides it is whether conditional branching exists and whether users need to leave and return.

Should we A/B test the checkout page?

Only with enough traffic. Below roughly 1,000 checkout starts a month, a test takes long enough that market conditions change underneath it. At that scale, fix the obvious defects first — remove unnecessary fields, fix labels, fix keyboard types — then talk about testing.

What counts as a passing grade on form accessibility?

Three things at minimum: every field has a visible, correctly associated label; the whole form can be completed by keyboard alone; error messages are announced by screen readers and point back to the field. Doing those three already puts you ahead of most commercial sites.

Does autocomplete actually make a difference?

Yes, and it is one of the few near-zero-cost improvements. Marking autocomplete="tel", "postal-code" and similar lets browsers and password managers fill fields, cutting typing and errors directly. Implementation is usually under half a day.

Next Step

If your checkout or enquiry form shows more than twelve fields by default, that is usually the highest-return redesign available, because it does not require rebuilding the site. ScriptWalker's Form and Checkout Flow Audit starts at NT$38,000 and delivers a field necessity analysis, a pattern recommendation, an accessibility checklist and a build-ready specification. A 30-minute consultation is free.