Multi-Step Checkout — Free HTML CSS JS Form Snippet

Long forms scare buyers away. Splitting checkout into a few focused steps — contact, shipping, payment — lowers the perceived effort, lets you validate each part before moving on, and gives a clear sense of progress. This component is a complete multi-step checkout: a numbered progress stepper across the top, three sliding panels, per-step validation that blocks advancement until the current fields are valid, back and continue navigation, and a success screen when the order is placed. It is built in semantic HTML, CSS, and vanilla JavaScript with no form library.

The progress stepper

The three steps are an ordered list with a connecting track drawn by a ::before pseudo-element line behind the numbered circles. Each step has three visual states managed by classes: upcoming (grey circle), active (filled indigo circle, dark label), and done (green circle). As the user advances, the render() function recomputes every step's state from the current index — active for the current step, done for any step before it — so the stepper always reflects exactly where the user is. The colour transitions are CSS, so each state change animates smoothly.

One panel visible at a time

All three panels exist in the DOM at once; only the one matching the current index has the .active class and display: block, the rest are display: none. When the active panel changes, a short mscFade keyframe slides it in from the right with a fade, giving a sense of forward motion through the flow. Keeping every panel mounted means field values persist when the user steps back and forward — nothing is lost because nothing is destroyed.

Per-step validation that gates advancement

The heart of a good multi-step form is that you cannot skip ahead with invalid data. Clicking Continue calls validateStep(), which collects the current panel's input[required] elements and checks each with value.trim() !== '' plus the browser's native checkValidity() (so the email field enforces a valid email format for free). Invalid fields get an .invalid class — a red border and ring — and focus jumps to the first one. Only if every required field passes does the index advance. This validates one step at a time rather than dumping every error at the end.

Forgiving error clearing

Errors should not linger after the user fixes them. A single delegated input listener on the form removes the .invalid class from any field the moment the user starts typing in it. This is the forgiving pattern — strict on submit, lenient as the user corrects — which feels far better than leaving a red border until the next Continue click.

Adaptive navigation and the success screen

The Back button is disabled on the first step (you cannot go back from contact), and the primary button relabels itself: it reads "Continue" on steps one and two and "Place order" on the final step, computed in render() from whether the current index is the last panel. Placing the order adds a .complete class that hides the stepper and panels and reveals a success screen with an animated green checkmark and confirmation text. Because the state is index-driven, the whole flow is just three functions — render(), validateStep(), and the click handlers — with no tangled conditionals.

Customisation

Add or remove steps by editing the stepper <li> items and the matching .msc-panel blocks — the script reads them dynamically with querySelectorAll, so the counts stay in sync automatically. Mark which fields are required with the required attribute, swap the #6366f1 accent and #22c55e done/success green for your brand, and replace the hard-coded order total with a real value. To submit to a backend, replace the success block in the final-step branch with a fetch POST of the collected field values.