Multi-step forms people actually finish
The form is where a visitor becomes a customer or leaves. Progressive disclosure, the right question order, kind error messages and spam protection that doesn't punish real users make a form that feels effortless.
Every product has one decisive form: sign-up, order, consultation request. Everything you did to attract a visitor either pays off in those few fields or is wasted.
A good form isn't short. It is easy. Those are different things.
Why multi-step
Twelve fields on one page look tiring before you begin. The same twelve across three steps look doable. The content is identical; the feeling isn't.
This is progressive disclosure: at any moment, show only what is needed now.
Two effects help as well:
- An easy start. When the first step is simple, people begin.
- The pull to finish. Someone who has done two steps is less likely to abandon the third.
Question order
This is the most important design decision in a form, and it is often made backwards.
Start easy and interesting. The first question should be something the user wants to talk about: "What do you want to build?" Not "name and phone number".
Put personal details last. Once the user has invested two steps and feels the form is useful, they give a phone number more readily.
The contact form on this site has three steps on that logic: project type first, then details, and contact information at the end.
Rules for each step
- Choose instead of type. Offer options wherever you can. Selecting is easier than writing, especially on mobile.
- A "not sure" option. If you ask about budget, "not decided yet" must be a valid choice. Forcing a guess drives people away.
- Show progress. "Step 2 of 3" tells the user how much is left.
- Going back loses nothing. The "previous" button must not clear anything.
- Mark optional fields. And keep them to a minimum.
Kind errors
The moment of an error is when a user is most likely to leave.
- Next to the field. Not a generic message at the top.
- Say what to do, not what went wrong. "The number should start with 09" beats "invalid input".
- Don't complain early. Don't turn a field red before the user has finished typing.
- Accept the input and tidy it yourself. If a user types a number with spaces or in another digit system, the system should cope. Forcing a format hands our job to the user.
Mobile first
A large share of forms are filled in on phones:
- Open the right keyboard for each field: numeric for numbers, email for email.
- Make touch targets large enough.
- Let browser autofill work.
- Don't let the continue button hide under the keyboard.
Spam protection without punishing users
Image captchas that ask you to find traffic lights push the cost of fighting bots onto real people. Lower-friction options:
- A hidden field. People don't see it; bots fill it in.
- Minimum fill time. A form submitted in one second wasn't a person.
- Proof of work. The browser quietly performs a small computation; the user sees nothing.
- Rate limiting. Limit submissions from one origin.
This site combines those layers, with no third-party service and no cookies.
Accessibility
A form that can't be used with a keyboard or a screen reader excludes some of your users:
- Every field has a real label, not just placeholder text.
- Errors are announced to screen readers.
- Keyboard order is logical.
- Colour is never the only sign of an error.
After submission
The moment after submitting is part of the form too:
- A clear confirmation. The user must be sure the request arrived.
- A reference code. Something they can quote later.
- The next step. When and how they will hear back.
Silence after submitting feels like the request fell into a well.
The takeaway
A good form respects the user: it asks little, in the right order, makes mistakes easy to fix and doesn't leave them wondering.
Related: designing for trust in e-commerce.