Forms are the friction points of ecommerce. Every checkout, every account creation, every newsletter signup, and every contact enquiry requires your visitor to fill in a form. Each form field is a micro-decision point where the visitor weighs the effort of completing the field against the value of continuing. Add too many fields, make errors confusing, or break the mobile experience, and visitors abandon the form — and your store — entirely.
The Baymard Institute’s checkout usability research found that 18% of shoppers have abandoned a purchase specifically because the checkout process was too long or complicated. That is not 18% abandoning because of price, shipping costs, or product doubts. That is 18% who wanted to buy but could not be bothered to fill in your form. This is preventable revenue loss, and fixing it does not require a redesign — it requires systematic form optimisation.
This guide covers every type of ecommerce form, from checkout to account creation to contact forms, and shows you how to reduce fields, improve validation, optimise for mobile, and measure the revenue impact. For the broader picture of how checkout optimisation fits into your conversion strategy, see our Shopify checkout optimisation guide.
Why form optimisation is a conversion priority
Forms sit at the narrowest part of your conversion funnel. By the time a visitor reaches your checkout form, they have found a product, added it to cart, and decided to buy. They have done the hard part. The form is the last step — and it is where you lose a significant percentage of otherwise committed buyers.
The cost of every additional field
Each additional form field adds cognitive load, completion time, and a potential error point. Research shows that reducing checkout fields from 15 to 8 can increase completion rates by 25-30%. This is not because visitors are lazy — it is because each field introduces a decision (what do they want here?), a task (type the information), and a risk (did I get it right?). Multiply those micro-frictions by 15 fields and the cumulative effect is significant.
Form abandonment versus cart abandonment
Cart abandonment gets most of the attention, but form abandonment within the checkout is a distinct and addressable problem. Cart abandonment happens for many reasons — comparison shopping, price sensitivity, browsing without intent to buy. Form abandonment happens for one reason: the form experience is not good enough. This makes it both more frustrating (you were so close to the sale) and more fixable (the solutions are well-understood).
Understanding where your conversion rate sits relative to benchmarks helps you assess how much form friction is costing your store specifically.
Step 1: Audit your current forms
Start by cataloguing every form on your ecommerce store: checkout, account creation, login, newsletter signup, contact form, returns request, and any others. For each form, document the number of fields, the field types, the validation approach, and the mobile experience.
Count every field, including hidden ones
Count form fields that are visible by default, fields that appear conditionally (billing address when different from shipping), and optional fields that are still displayed. Include dropdown selects, checkboxes, and radio buttons in your count. The total number of interactions required to complete the form is your baseline. For checkout specifically, the industry average is 14.88 fields. The top-performing checkouts use seven to eight.
Identify friction points with session recordings
Watch 20-30 session recordings of visitors who reached your checkout but did not complete their purchase. Pay attention to where they hesitate (hovering over a field without typing), where they make errors (fields that flash red or trigger error messages), and where they abandon (the last field they interacted with before leaving). These friction points tell you exactly which fields to optimise or remove.
Measure field-level abandonment
If your form analytics tool supports it, track which specific fields have the highest abandonment rates. Some tools (Hotjar, Zuko, Formisimo) provide form analytics that show completion rates for each individual field. A field with a 15% abandonment rate is a clear target for removal or redesign. Common high-abandonment fields include phone number (visitors question why you need it), company name (irrelevant for B2C), and address line 2 (often empty and confusing).
Step 2: Reduce form fields to the minimum
The most impactful form optimisation is removing fields. Every field you remove reduces completion time, error rates, and abandonment. The question for each field is: do you absolutely need this information to fulfil the order?
Fields you can almost always remove
- Title/salutation: Mr, Mrs, Ms adds no value to order fulfilment and feels outdated. Remove it
- Company name: Unless you sell B2B, remove it. If some orders are for businesses, make it optional and collapsed by default
- Address line 2: Combine this into address line 1 or make it an optional expandable field. Most UK addresses do not need a second line
- County: The postcode is sufficient for UK delivery. Royal Mail does not require county for delivery
- Fax number: Still present on more checkout forms than you would expect. Remove it immediately
- Confirm email: If someone mistyped their email, a confirmation field will not catch it because they will type the same mistake twice. Remove it
Combine fields where possible
Combine first name and last name into a single “Full name” field. Combine address fields using an address autocomplete service that populates all fields from a single postcode or address search. Each field combination reduces the perceived form length and the number of tab stops the visitor must navigate.
Use progressive disclosure
Show only the essential fields initially. Reveal additional fields only when needed. If the billing address is usually the same as the shipping address, default to a “Same as shipping” checkbox and only show billing address fields when the visitor unchecks it. If a promotional code field is rarely used, hide it behind a “Have a promo code?” link rather than displaying an empty field that makes visitors who do not have a code feel like they are missing a discount.
For more on implementing these checkout improvements on Shopify, see our web design and development services.
Step 3: Implement inline validation
Validation is how your form communicates errors to visitors. Done badly, it is one of the biggest sources of form frustration. Done well, it guides visitors through the form smoothly and catches mistakes before they cause problems.
Validate as visitors type, not on submit
Inline validation provides immediate feedback as visitors complete each field. When they finish typing an email address and tab to the next field, a green checkmark confirms the format is valid, or a specific error message explains what is wrong. This is fundamentally better than submit-time validation, which makes visitors fill in the entire form, click submit, and then scroll back through the form to find and fix errors marked in red.
Write helpful error messages
Error messages should tell visitors exactly what is wrong and how to fix it. “Invalid field” is useless. “Please enter a valid UK postcode (e.g. SW1A 1AA)” tells the visitor what format you expect. “Please enter your email address” is better than “This field is required.” Every error message should answer the question: “What do I need to do to fix this?”
Position errors near the field, not at the top of the form
Display error messages directly below or adjacent to the field they relate to. A list of errors at the top of the form forces visitors to map each error to its corresponding field, which is cognitively expensive and frustrating, particularly on mobile where the error list and the fields may not be visible simultaneously.
Do not validate too aggressively
Overly strict validation causes more problems than it solves. Phone number fields that reject valid formats (numbers with spaces, numbers with country codes, numbers starting with +44), name fields that reject apostrophes and hyphens (O’Brien, Smith-Jones), and address fields that enforce formats your visitors do not use all create unnecessary friction. Validate the minimum: is the email format valid, is the postcode real, is the card number the right length.
Step 4: Optimise address capture
Address entry is the most time-consuming part of any checkout form. A UK address requires at least four fields (line 1, city, county, postcode), and most visitors have to type each one manually. Address autocomplete can reduce this to a single field interaction.
Implement postcode lookup
A postcode lookup field lets visitors type their postcode, select their address from a dropdown of matching addresses, and have all address fields populated automatically. This reduces address entry from five fields and 30 seconds to one field and five seconds. Services like Loqate, Ideal Postcodes, and Google Places provide this functionality. The investment (typically fifteen to fifty pounds per month for most ecommerce volumes) pays for itself many times over through reduced abandonment.
Default the country field
If 95% of your orders ship to the UK, pre-select United Kingdom as the default country. Do not make visitors scroll through 200 countries to find the UK. If you sell internationally, use the visitor’s IP address or browser locale to set a sensible default that can be changed.
Handle international addresses gracefully
Address formats vary by country. UK addresses have postcodes; US addresses have ZIP codes and states; many European addresses have different field orders. If you sell internationally, your address form should adapt its field labels, validation rules, and required fields based on the selected country. A single rigid form that forces all addresses into a UK format creates errors and frustration for international customers.
Our checkout optimisation guide covers address handling in the context of the full checkout flow.
Step 5: Design forms for mobile
More than half of ecommerce checkouts happen on mobile, where form completion is significantly harder than on desktop. Smaller screens, virtual keyboards, and imprecise touch input all compound form friction. Mobile form optimisation is not optional — it is where the majority of your form abandonment occurs.
Use the right input types
HTML input types control which keyboard appears on mobile. Use type="email" for email fields (shows the @ key), type="tel" for phone numbers (shows the number pad), inputmode="numeric" for postcode and card number fields, and type="text" with appropriate autocomplete attributes for name and address fields. The wrong keyboard type forces visitors to switch keyboards manually, adding taps and frustration.
Size fields for mobile interaction
Form fields should be at least 44 pixels tall on mobile with clear spacing between them. Fields that are too small or too close together cause mis-taps, where visitors tap the wrong field and have to re-tap. Labels should be positioned above the field (not beside it or inside it as placeholder text) so they remain visible when the field is focused and the keyboard is open.
Use a single-column layout
Multi-column form layouts do not work on mobile. Two fields side by side on a 375-pixel-wide screen creates fields that are too narrow to read and too small to tap accurately. Use a single-column layout where each field takes the full width of the screen. The exception is short paired fields (like expiry month and year for card details) that can sit side by side because each requires only a few characters.
Keep the submit button visible
On mobile, the submit button often scrolls off-screen when the keyboard opens. Use a sticky button that remains visible at the bottom of the viewport, or ensure the form is short enough that the button is always visible. Visitors who cannot see the submit button do not know how far they are from completing the form, which increases uncertainty and abandonment.
Step 6: Optimise checkout-specific forms
The checkout form has the highest revenue impact of any form on your store. Improvements here translate directly into completed orders and revenue. These checkout-specific optimisations go beyond general form best practices.
Offer guest checkout as the default
Forced account creation is the second most common reason for checkout abandonment (24% of abandoning shoppers cite it). Offer guest checkout as the default path. Capture the email address for order communications and marketing. If you want to encourage accounts, offer optional account creation after the purchase is complete, when the visitor has already committed and the marginal effort is low.
Show a progress indicator
Multi-step checkouts should display a clear progress indicator showing the current step, total steps, and step labels (Information, Shipping, Payment). Progress indicators reduce uncertainty about how much effort remains and have been shown to increase checkout completion by 5-10%. Even single-page checkouts benefit from showing how many fields remain.
Pre-fill returning customer data
If a visitor has purchased before, pre-fill their name, address, and contact details. Shopify’s Shop Pay accelerates checkout by storing and pre-filling customer data. Ensuring your checkout supports browser autofill through proper autocomplete attributes (autocomplete=”given-name”, autocomplete=”postal-code”, etc.) allows browsers and password managers to pre-fill fields even for first-time visitors.
Handle payment form fields with care
Payment fields (card number, expiry, CVV) are the most sensitive part of the checkout and the point where visitors are most likely to hesitate. Display trust signals (padlock icon, security badges, encryption messaging) near the payment fields. Format the card number with spaces as the visitor types (1234 5678 9012 3456) so they can verify it matches their physical card. Auto-detect the card type from the first few digits and display the corresponding card logo.
Understanding how to build CRO into an ongoing process ensures that form improvements are tested systematically rather than implemented on instinct.
Step 7: Test and measure form performance
Form optimisation should be data-driven. Measure the current performance, implement changes, and measure again. The metrics that matter are specific to forms and different from your general conversion metrics.
Form-specific metrics to track
- Form completion rate: The percentage of visitors who start filling in a form and complete it. This is your primary metric for form performance
- Field-level drop-off: Which specific fields cause the most abandonment. Tools like Zuko and Formisimo track this
- Time to complete: How long it takes the average visitor to complete the form. Reductions in completion time correlate with increased completion rates
- Error rate: The percentage of form submissions that trigger validation errors. High error rates indicate confusing fields or overly strict validation
- Correction rate: How often visitors have to re-enter data in a field. Fields with high correction rates need clearer labels or better input formatting
A/B test form changes
Test significant form changes before implementing them permanently. Test removing a specific field, test inline validation against submit-time validation, test single-page checkout against multi-step checkout, and test different field orders. Each test should run for at least two weeks with enough traffic to reach 95% statistical significance on your primary metric (form completion rate).
Regular form reviews
Schedule quarterly form reviews where you complete every form on your store on both desktop and mobile, time yourself, note friction points, and compare your experience against industry best practices. Having someone outside your team complete the forms is even more valuable, as they lack the familiarity that makes you blind to friction points. Our guide on UK ecommerce conversion rate benchmarks can help you set targets for form completion rates.
Your checkout form is the last thing standing between a willing buyer and a completed order. Every field you add, every error message you botch, and every mobile interaction you neglect is money walking out the door. The most effective ecommerce improvements are often the most boring: better forms, fewer fields, clearer errors.
Andrew Simpson, Founder
Bringing it together
Form optimisation follows a clear process: audit every form on your store, reduce fields to the absolute minimum, implement inline validation with helpful error messages, optimise address capture with autocomplete, design specifically for mobile input, apply checkout-specific best practices, and measure field-level performance continuously.
The highest-impact quick wins are almost always the same: remove unnecessary fields (company name, title, county, confirm email), implement address autocomplete, switch to inline validation, and offer guest checkout as the default. These four changes alone typically improve checkout completion rates by 15-25% without any visual redesign or development complexity.
Start with your form audit. Count every field, watch session recordings of visitors who abandon your checkout, and calculate the revenue impact of your current form abandonment rate. The numbers will make the case for investing time in form optimisation. Then work through each step, testing changes where possible and measuring the impact.
If you need help optimising the forms on your ecommerce store, get in touch. We audit form performance, implement best-practice improvements, and test changes systematically to ensure every form on your store is converting as well as it can.
