Multi-Step Form (Wizard) Template

Guide users through complex forms with ease using this intuitive multi-step wizard.

This template breaks down a long form into smaller, digestible steps, complete with a visual progress bar and Next/Previous navigation, significantly improving user experience and completion rates.

Screenshot of a multi-step form showing a progress bar and the first step of the form.

Get Source Code → Preview →

About this Multi-Step Form

Long forms are a primary cause of user drop-off. A multi-step "wizard" mitigates this by presenting the form in chunks, which feels less overwhelming. This template provides the full front-end structure and logic for such a component.

The structure consists of:

A progress bar at the top to visually track the user's location in the sequence.
Several form steps (as div elements), where only one is visible at a time.
Navigation buttons ("Previous" and "Next") to move between steps. The "Next" button cleverly transforms into a "Submit" button on the final step.

All of this is orchestrated by a self-contained JavaScript block that manages the current step, updates the visibility of form sections, and controls the state of the progress bar and buttons.

Features

Reduces User Friction: Makes long forms feel shorter and more manageable.
Visual Progress Indicator: The progress bar encourages completion by showing the user how close they are to the end.
Client-Side Logic: The entire multi-step experience is handled in the browser with JavaScript, requiring no page reloads between steps.
Validation-Ready: The JavaScript includes a function where you can add validation logic to prevent users from proceeding to the next step with invalid data.

Dependencies

None. Uses pure HTML and CSS, with a necessary, self-contained JavaScript block to function.

Code

Here's the full code, including the HTML structure, progress bar CSS, and the JavaScript logic:

<div class="form-step active" data-step="1">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
        </div>

<div class="form-step" data-step="2">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
             <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
        </div>
        
        
        <div class="form-step" data-step="3">
            <div class="form-group">
                <label for="newsletter">Newsletter preference?</label>
                <select id="newsletter" name="newsletter">
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                </select>
            </div>
        </div>

<div class="form-buttons">
            <button type="button" class="btn btn-prev" id="prevBtn" disabled>Previous</button>
            <button type="button" class="btn" id="nextBtn">Next</button>
        </div>
    </form>
</div>

function showStep(stepIndex) {
    // Show the active step, hide others
    formSteps.forEach((step, index) => {
        step.classList.toggle('active', index === stepIndex);
    });

// Update progress bar
    progressSteps.forEach((step, index) => {
        step.classList.toggle('completed', index < stepIndex);
        step.classList.toggle('active', index === stepIndex);
    });

// Update buttons
    prevBtn.disabled = stepIndex === 0;
    nextBtn.textContent = (stepIndex === formSteps.length - 1) ? 'Submit' : 'Next';
}

nextBtn.addEventListener('click', () => {
    if (!validateCurrentStep()) return;

if (currentStep < formSteps.length - 1) {
        currentStep++;
        showStep(currentStep);
    } else {
        // Final step reached, submit form manually
        form.submit();
    }
});

prevBtn.addEventListener('click', () => {
    if (currentStep > 0) {
        currentStep--;
        showStep(currentStep);
    }
});

// Initialize
showStep(currentStep);
</script>

View Output