A long form and a multi-step form can ask exactly the same questions and complete at very different rates. The difference is not the number of questions. It is how many of them a person can see at once, and how much work each screen asks for.
Here is what actually moves the number.
One question per screen, at least at the start
A screen with a single question reads as a small ask. A screen with six reads as a form. Same total effort, different perceived cost, and the perception is what determines whether someone starts.
The first screen matters most. Ask one easy, low-commitment question — a choice, not a text field. Once someone has answered anything at all, completion rates for the remainder rise sharply. People finish what they have started.
Save the effortful fields for later. Phone number and email should be near the end, after the person has invested several taps and after they understand what they are getting. Asking for a phone number on screen one is asking a stranger for their number before saying hello.
Make the whole option tappable
The default HTML radio button is a 16-pixel circle. On a phone, next to a line of text, it is a small target with a large miss rate — and every miss is a moment of friction on a screen where friction is the only thing standing between you and a completed lead.
Card-style options make the entire panel the hit target. The tap area goes from a fraction of the row to the whole row, the selected state is visible at a glance rather than as a filled dot, and the form starts to feel like something designed for a thumb.
Two details worth getting right:
Draw the tick yourself. Native form controls ignore your accent colour on several browsers, so a design that looks correct in testing renders grey somewhere else. Drawing the indicator means the selected state looks the same everywhere.
Keep list style for long lists. Fifty states as fifty cards is worse than fifty states as a list, and keyboard users generally prefer the list. Card style is the right default for two to six choices, not for everything.
Auto-advance, with a beat
When a step has one single-choice question, advancing automatically on selection removes an entire tap. On a six-step funnel that is six fewer taps, which is a meaningful fraction of the total work.
Two rules make it work rather than infuriate.
Only when it is unambiguous. One input field, single choice. Two questions on a screen and you advance before the second is answered. A multi-select and you advance on the first tick of three. Content blocks and hidden fields should not count against this — a single question with an explanatory paragraph above it is still a single question.
Leave a short delay. Advancing on the same tick as the tap makes the tap feel unacknowledged, and an unacknowledged tap is a tap people repeat. A few hundred milliseconds is enough for the chosen card to render as chosen. The delay is not politeness, it is feedback.
Cancel any pending advance if the person changes their mind, or a fast double-choice fires two navigations.
Disqualify early and honestly
If someone will not qualify, find out on screen two rather than screen seven.
This feels like turning away business and it is the opposite. A disqualified visitor who spent twenty seconds costs you nothing. A disqualified visitor who spent three minutes filling in a form and then gets rejected has had a bad experience with your brand, and — if you failed to disqualify them at all — has become a lead you will pay to have declined by every buyer in your waterfall.
Put the hard qualifiers first: the state check, the amount threshold, the ownership question. Whatever your buyers reject on, ask about it before you ask for contact details.
And write a real message. "You do not qualify" is worse than a sentence explaining what would have qualified and, where you have one, an alternative worth their time.
Show progress against the branch, not the form
A form with conditional logic has a different length for different people. Someone who answered "yes" might see nine screens; someone who answered "no" might see four.
A progress bar computed over every step in the form will therefore lie to almost everyone, and it lies in the demoralising direction — showing 30 percent to someone who is actually two screens from done.
Compute progress over the path this person is actually on. It is more work and it is the difference between a progress bar that encourages and one that discourages.
Let back mean back
If someone jumped from step two to step seven because of an answer, pressing back should return them to step two — not step six, which they have never seen.
That means tracking the actual navigation history rather than decrementing an index. It is a small implementation detail with an outsized effect, because the alternative drops people into a screen with no context and a question that no longer makes sense.
Do not make the form fight the page
An embedded form inherits whatever CSS the host page has. A theme with an aggressive input { } rule can wreck a form that looks perfect in preview, and your form's own styles can just as easily break the page around it.
Rendering inside a shadow root ends this category of problem entirely. Nothing leaks in, nothing leaks out, and the form looks the same on a bare HTML template and on a WordPress theme with four plugins fighting over the stylesheet.
The order of operations
If you are starting from a long single-page form and want the fastest improvement:
- Split it into steps, one question each for the first three.
- Move phone and email to the end.
- Switch the choice questions to card style.
- Add auto-advance to the single-choice steps.
- Move your hard qualifier to step two and disqualify properly.
Then measure. Not the completion rate on its own — completion multiplied by the rate at which those leads get accepted by buyers. A form change that raises completion by lowering qualification is not a win, and completion rate alone will tell you it was.