Forms That People Actually Finish
Forms are where business happens on the web. Signups, checkouts, bookings, contact requests, insurance claims — the form is the conversion event. And yet most forms are designed as an afterthought: slap some input fields on a page, add a submit button, move on. The result is predictable. Industry average form abandonment sits between 60-80% depending on the sector. That is not a technology problem. That is a design problem. We have built dozens of multi-step forms for clients across insurance, SaaS, and professional services. These are not theory-based recommendations. They are patterns we have tested, measured, and iterated on with real user data. Single Column Always Wins Multi-column form layouts look efficient on paper. In practice, they create a zigzag reading pattern that slows users down and increases error rates. Baymard Institute research shows that single-column layouts complete 15% faster than multi-column equivalents. Every form we build uses a single column. On wider screens, the form gets a max-width and centers on the page. The surrounding whitespace is not wasted — it focuses attention on the input the user is currently filling in. Inline Validation, Not Summary Validation Showing errors after submission is hostile UX. The user fills in 12 fields, clicks submit, and gets a red box at the top listing everything they did wrong. Now they need to find each field, remember what they entered, and fix it. Inline validation — validating each field as the user completes it — catches errors immediately and in context. The critical detail: validate on blur, not on change. Validating while the user is still typing creates a maddening experience where the field screams "invalid email" before they have finished typing the email. Wait for them to leave the field, then validate. We use React Hook Form with Zod schemas for this, and the combination handles inline validation elegantly. Progress Indicators on Multi-Step Forms For forms longer than five fields, break them into steps. A progress indicator — a simple step counter or progress bar — reduces perceived complexity and gives the user a sense of forward momentum. We have A/B tested forms with and without progress indicators on insurance claim submissions. The version with a progress bar had a 23% higher completion rate. That is not subtle. The progress bar does not change the form — it changes the psychology. "Step 2 of 4" tells the user the end is near. A wall of 20 fields tells the user nothing. Smart Defaults and Conditional Fields Every field you can pre-fill or eliminate is a reduction in friction. If the user selected "Residential" as their property type, do not show them commercial-only fields. If they entered an Australian postcode, default the country to Australia. If their browser supports the Geolocation API and the form needs a location, offer to auto-detect it. Every unnecessary field you show is a decision the user has to make, and every decision is an opportunity for them to abandon the form. Label Placement Matters More Than You Think Labels above the input field — not inside it as placeholder text. Placeholders disappear when the user starts typing, which means they lose the context of what the field is asking for the moment they begin answering. This is especially problematic for users who tab away and return, or for anyone reviewing their entries before submitting. Floating labels — where the placeholder animates up to become a label when the field is focused — are a reasonable compromise that preserves visual cleanliness while maintaining context. The Submit Button Is Not Just a Button The submit button should use specific, action-oriented language. Not "Submit." Not "Send." Instead: "Book My Appointment," "Get My Quote," "Create Account." This reinforces what the user is getting, not what they are doing. Disable the button during submission and show a loading spinner to prevent double submissions. After successful submission, redirect to a confirmation page or show an inline success message — do not just clear the form and leave the user wondering what happened. Mobile First Is Not Optional Over 60% of form submissions on the sites we manage come from mobile devices. Touch targets need to be at least 44x44 pixels. Input fields need appropriate input modes — inputmode="numeric" for phone numbers, type="email" for email addresses, autocomplete attributes for everything the browser can auto-fill. These are not progressive enhancements. They are baseline requirements. A form that works beautifully on desktop and is unusable on mobile is a form that loses most of its potential submissions. Error Messages Should Be Human "Invalid input" tells the user nothing. "Please enter a valid Australian phone number (e.g. 04XX XXX XXX)" tells them exactly what to fix. Error messages should be specific, actionable, and positioned directly below the field they relate to. Red text is fine. A small icon is fine. But the message content is what matters. Tell the user what went wrong and how to fix it, in one sentence. Forms are not sexy work. Nobody puts a beautiful contact form in their portfolio. But the difference between a well-designed form and a poorly-designed one is the difference between a business that converts and a business that leaks leads. Get the form right, and everything upstream — the marketing, the copywriting, the ad spend — actually pays off.