How to Build a Multi-Step Form in HTML (No Library Needed)

A multi-step form is one ordinary HTML form whose fields are shown a group at a time. You do not need a wizard library or a request per step: wrap each group in a container, hide all but the current one, validate the visible fields when the visitor clicks Next, and reveal Submit on the last step. That is about 30 lines of JavaScript, and everything still arrives as a single submission. If you would rather not write it, our free multi-step form generator produces the same code for HTML, React, Vue, Svelte, and Astro.

Full disclosure: the generator is ours, and so is the form backend the examples post to. The technique itself is plain HTML and JavaScript and works with any backend, or your own server.

When a multi-step form is worth it

Steps help when a form is long enough to look like work. A quote request with twelve fields reads as a chore on one page; the same fields as "About you", "Your project", "Details" open with two easy questions. Steps also give you natural places for headings and help text.

They hurt when the form is short. A three-field contact form split into steps just adds clicks. There is no universal conversion number here, whatever a landing page tells you: results depend on the form and the audience, so treat it as something to test. A reasonable rule of thumb is to consider steps from about seven fields up, or whenever the fields fall into obviously different topics.

The markup: still one form

Each step is a container inside the same <form>. The navigation buttons are ordinary type="button" elements, and there is exactly one real submit button.

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST" id="contact-form">
  <p data-smf-progress aria-live="polite" hidden>Step 1 of 2</p>

  <div data-smf-step>
    <h3>About you</h3>
    <label>
      <span>Name *</span>
      <input type="text" name="name" required />
    </label>
    <label>
      <span>Email *</span>
      <input type="email" name="email" required />
    </label>
  </div>

  <div data-smf-step>
    <h3>Your message</h3>
    <label>
      <span>Message *</span>
      <textarea name="message" required></textarea>
    </label>
  </div>

  <div>
    <button type="button" data-smf-back hidden>Back</button>
    <button type="button" data-smf-next hidden>Next</button>
    <button type="submit" data-smf-submit>Send message</button>
  </div>
</form>

Notice what is hidden in the markup: Back, Next, and the progress line. The steps themselves and the Submit button are visible. That ordering is the no-JavaScript fallback, covered below.

The script

(() => {
  const form = document.getElementById("contact-form");
  const steps = [...form.querySelectorAll("[data-smf-step]")];
  const back = form.querySelector("[data-smf-back]");
  const next = form.querySelector("[data-smf-next]");
  const submit = form.querySelector("[data-smf-submit]");
  const progress = form.querySelector("[data-smf-progress]");
  const last = steps.length - 1;
  let current = 0;

  function show(i) {
    current = i;
    steps.forEach((el, n) => (el.hidden = n !== i));
    back.hidden = i === 0;
    next.hidden = i === last;
    submit.hidden = i !== last;
    progress.hidden = false;
    progress.textContent = "Step " + (i + 1) + " of " + steps.length;
  }

  form.noValidate = true;

  function valid() {
    return [...steps[current].querySelectorAll("input, select, textarea")].every(
      (el) => el.reportValidity(),
    );
  }

  next.addEventListener("click", () => valid() && show(current + 1));
  back.addEventListener("click", () => show(current - 1));
  form.addEventListener("submit", (e) => {
    if (current === last && valid()) return;
    e.preventDefault();
    e.stopImmediatePropagation();
    if (current < last && valid()) show(current + 1);
  });

  show(0);
})();

reportValidity() does the heavy lifting: it runs the browser's own checks (required, type="email", pattern, min, max) on one field and shows the native error bubble. every stops at the first failure, so the visitor sees one problem at a time, on the step they are looking at.

The Enter-key trap most tutorials ship

Here is the bug we hit while building the generator, and that a lot of copy-paste wizard code still has. Fill in step one, press Enter, and nothing happens. No error, no navigation, nothing in the console worth reading.

The cause: pressing Enter triggers the form's implicit submission, and before the browser fires the submit event it validates the entire form. The required message field on step two is empty, so validation fails. The browser then tries to focus the invalid field to show its error, cannot, because the field is hidden, and gives up. Your submit handler never runs.

Two lines fix it, and both are in the script above:

1. form.noValidate = true turns off whole-form validation, so the submit event always reaches your handler.
2. The handler validates the visible step itself. On an early step it moves forward instead of submitting; on the last step it lets the real submit through only if that step is valid.

Set noValidate from the script, not as an attribute in the HTML. That way visitors without JavaScript keep the browser's normal validation.

What happens without JavaScript

Because Back, Next, and the progress line start hidden and the steps start visible, a visitor with scripts blocked sees one long form with a single Submit button and native validation. It is not pretty, and it works. The script then upgrades the page by hiding steps two onward. This is cheaper than it sounds: it is only a question of which elements carry hidden in the HTML.

The same idea in React, Vue, and Svelte

In a component framework you do not need the data attributes or the query selectors. One state variable holds the current step and each wrapper is hidden unless it matches. The validation and Enter-key logic is identical. The React version:

const [step, setStep] = useState(0);
const stepEls = useRef([]);

function validStep() {
  return [...stepEls.current[step].querySelectorAll("input, select, textarea")].every(
    (el) => el.reportValidity(),
  );
}

function next() {
  if (validStep()) setStep((s) => s + 1);
}

function onSubmit(e) {
  if (step < LAST || !validStep()) {
    e.preventDefault();
    if (step < LAST) next();
  }
}

// <form noValidate onSubmit={onSubmit}>
//   <div hidden={step !== 0} ref={(el) => { stepEls.current[0] = el; }}>…</div>

Keep every step mounted and toggle hidden rather than rendering only the current step. Unmounting a step throws away what the visitor typed, and its fields drop out of the FormData you submit. Vue does the same with v-show (not v-if), Svelte with hidden={step !== 0}.

Three ways to get there

Libraries earn their place when you need animated transitions, conditional branching between steps, or saved drafts. For a linear form, they are a dependency wrapped around the 30 lines above.

Using the generator

1. Open the multi-step form generator.
2. Click Add step where you want a break, and give each step a title if you want headings. Drag fields between steps.
3. Page through the steps with the arrows above the live preview. The preview is sandboxed and runs no scripts, so the arrows stand in for Back and Next.
4. Pick plain CSS, Tailwind, or unstyled output, choose your framework tab, and copy the code.
5. Put a form endpoint in the action. With ShipMyForm, that is a free form ID: submissions are stored, spam-filtered, and emailed to you, 100 a month with no card.

Have a long Google Form already? The Google Forms to HTML converter imports its sections as steps.

Accessibility notes

• The progress line uses aria-live="polite", so screen readers announce "Step 2 of 3" when it changes.
• Hidden steps are removed from the accessibility tree and the tab order by the hidden attribute, which is what you want.
• Give steps real headings, and keep labels attached to their inputs. Native validation bubbles are read out by assistive technology; custom error markup needs aria-describedby wiring that the native route gives you free.
• Nothing here moves focus on step change. If your steps are tall, consider focusing the new step's heading so keyboard users land in the right place.

Next steps

• Add server-side rules on top of the browser checks: form validation.
• Building a long lead form? See the request-a-quote form guide.
• Submitting without a page reload: submit a form with fetch.
• Start free: 100 submissions a month, no credit card.