→ Dino Smith
→ Multi-Step Form with Progress Bar

Multi-Step Form with Progress Bar

A user-friendly multi-step form with a progress bar, perfect for signups, surveys, and checkout processes. Enhances user experience by visualizing form completion.

This Example is contributed by Dino Smith, on 22-Feb-2025. It is responsive. similar terms for this example is Form Component

Form Progress Bar Multi-Step Wizard

Author Dino Smith

Fork Fullscreen

<div class="form-container">
    <div class="progress-bar">
        <div class="progress-bar-fill"></div>
    </div>
    <div class="form-step active" data-step="1">
        <h2>Step 1: Account Information</h2>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <button type="button" class="next-step">Next</button>
    </div>
    <div class="form-step" data-step="2">
        <h2>Step 2: Personal Details</h2>
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" name="firstName">
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" name="lastName">
        <button type="button" class="prev-step">Previous</button>
        <button type="button" class="next-step">Next</button>
    </div>
    <div class="form-step" data-step="3">
        <h2>Step 3: Confirmation</h2>
        <p>Review your information:</p>
        <div id="review"></div>
        <button type="button" class="prev-step">Previous</button>
        <button type="submit" class="submit-form">Submit</button>
    </div>
</div>

Related Examples