Home / Forms and Input / Multi-step Form Wizard
Multi-step Form Wizard in JavaScript, Free with Live Demo
Free multi-step form in plain JavaScript. Split a long form into steps, check each step before moving on, show progress, save a draft and review everything before sending.
Runs on: Constraint Validation API. Works in all modern browsers.
What is the Multi-step Form Wizard?
A long sign up form split into four short steps: personal details, address, plan and a final review. You cannot move on until the current step is filled in correctly.
Your answers are saved as you type, so closing the tab or reloading keeps your progress. The last step shows everything before you send it.
Good for
- Sign up and onboarding flows
- Checkout and booking forms
- Job and school applications
- Quote and survey forms
What this project does
- Four steps with a numbered progress bar
- Built in browser validation per step
- Clear error message and focus on the first problem
- Draft saved and restored automatically
- Review step before sending
How it works
- 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.
- Show one step at a timeEvery step is a fieldset. Only the current one is visible, and the progress bar follows the step number.
- Save as you typeFormData turns the form into an object that is saved to localStorage on every change and restored on reload.
The key JavaScript
This is the heart of the project. The full file has the rest, including the screen layout and error handling.
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);
};How to use it
- Click Download HTML file above.
- Open the file in a code editor, like VS Code.
- Run it from a local server with
npx serve .so the camera, microphone and AI features are allowed. - Change the text and colors, then upload it to GitHub Pages, Netlify or your own site. It is one file with no build step.
Questions people ask
Why split a form into steps?
People are more likely to finish a form when each part looks short and they can see how far they have come.
Do I still need server side checks?
Yes. Browser checks help people fill the form in, but always check the data again on your server.
Where is the draft stored?
In localStorage on the visitor's own device. It is removed after the form is sent.
More Forms and Input projects
062. File Upload Dropzone
A drag and drop uploader with previews, size limits and progress bars
063. Date Range Picker
A two month calendar for picking check in and check out dates
064. Autocomplete Search
A search box that suggests results as you type, with keyboard control
065. OTP Code Input
A six box verification code input with paste, auto advance and a resend timer
066. Password Strength Meter
A password box that rates strength, estimates crack time and suggests a strong password