Vanilla JavaScript Projects

Project 61, Forms and input

Multi-step Form Wizard

Long forms feel shorter in small steps. Each step is checked before you move on, and nothing is lost if you close the tab.

123
Main API
Constraint Validation
Draft
localStorage
Dependencies
None
Your browser
Checking

Book a free trial

Fill in each step. Try leaving a field empty. Reload the page halfway: your answers are still there.

  1. You
  2. Address
  3. Plan
  4. Review
About you

How it works

  1. Use the browser checksrequired, type="email" and pattern do the checking. checkValidity() on each field of the current step decides if you can move on.
  2. Show one step at a timeEvery step is a fieldset. Only the current one is visible, and the progress bar follows the step number.
  3. Save as you typeFormData turns the form into an object that is saved to localStorage on every change and restored on reload.
next.onclick = () => {
  const fields = [...steps[current].querySelectorAll("input, select")];
  const bad = fields.find((f) => !f.checkValidity());
  if (bad) { error.textContent = bad.validationMessage; bad.focus(); return; }
  current++;
  localStorage.setItem("draft", JSON.stringify(Object.fromEntries(new FormData(form))));
  show(current);
};