Multi-step wizard

A long form split into numbered Next and Back steps, with each chunk checked before the person moves on.

break this huge form into stepsnext back formone question at a timestep by step setuppage 2 of 5 formdon't show all the fields at oncemulti step formform wizzard

See it

Live demo coming soon

What it is

A multi-step wizard breaks one long task into a fixed sequence of smaller screens, validating each chunk before the person moves on. The pattern is familiar from desktop setup assistants: choose a goal, configure it, review the result, then finish. Microsoft popularized the name in early 1990s Windows software, and TurboTax is the proof that it scales: a branching, hundred-question tax return walked one plain screen at a time. A visible step count gives the task a shape that one giant form does not.

Reach for it when later questions depend on earlier answers, the task has clear phases, or a single screen would be genuinely overwhelming. Group fields by the person's decisions, not by the database tables behind them. Keep Back harmless, preserve every answer, and put a review step before an expensive or irreversible submission.

The gotcha is turning a short form into a click marathon. A wizard hides what is coming, makes comparison across steps harder, and punishes people when Back loses data. Use steps because the task has stages, not because the page looks long, and never make someone re-enter a valid answer.

Ask AI for it

Turn this long form into a 4-step wizard inside one HTML form. Group each step in a fieldset with a descriptive legend, show 'Step 2 of 4' plus named steps, and validate only the current step with the HTML Constraint Validation API before Next advances. Keep Back available on every step after the first and preserve all entered values when moving either direction. Mark optional steps explicitly and let people skip them. On step change, move focus to the new heading using tabindex='-1'; save the draft to sessionStorage; and place a read-only review of every answer before the final Submit. Submit only once from the last step, disable the button while pending, and never clear the draft after a failed request.

You might have meant

progressive disclosureonboarding flowinline validationstate persistencesmart defaults