→ Jorrit
→ Multi-Step Form with Progress Tracke

Multi-Step Form with Progress Tracke

A sleek multi-step form with progress tracking that guides users through a seamless registration process using HTML, CSS, and vanilla JavaScript.

This Example is contributed by Jorrit, on 19-Mar-2025. It is responsive. similar terms for this example is stepper

Steps Progress Indicator Form Wizard MultiStep Form

Author Jorrit

Fork Fullscreen

<div class="form-container">
  <div class="progress-container">
    <div class="progress-bar">
      <div class="progress"></div>
    </div>
    <div class="step-indicators">
      <div class="step active">1</div>
      <div class="step">2</div>
      <div class="step">3</div>
      <div class="step">4</div>
    </div>
  </div>
  
  <form id="multi-step-form">
    <div class="step-content active" data-step="1">
      <h2>Personal Information</h2>
      <div class="form-group">
        <label for="fullname">Full Name</label>
        <input type="text" id="fullname" name="fullname" required>
      </div>
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" required>
      </div>
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" name="phone" required>
      </div>
      <div class="buttons">
        <button type="button" class="btn next-btn">Next Step</button>
      </div>
    </div>
    
    <div class="step-content" data-step="2">
      <h2>Address Details</h2>
      <div class="form-group">
        <label for="street">Street Address</label>
        <input type="text" id="street" name="street" required>
      </div>
      <div class="form-group">
        <label for="city">City</label>
        <input type="text" id="city" name="city" required>
      </div>
      <div class="form-group">
        <label for="zipcode">Zip Code</label>
        <input type="text" id="zipcode" name="zipcode" required>
      </div>
      <div class="buttons">
        <button type="button" class="btn prev-btn">Previous</button>
        <button type="button" class="btn next-btn">Next Step</button>
      </div>
    </div>
    
    <div class="step-content" data-step="3">
      <h2>Account Setup</h2>
      <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 class="form-group">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" required>
      </div>
      <div class="buttons">
        <button type="button" class="btn prev-btn">Previous</button>
        <button type="button" class="btn next-btn">Next Step</button>
      </div>
    </div>
    
    <div class="step-content" data-step="4">
      <h2>Confirmation</h2>
      <div class="form-group">
        <label for="terms">
          <input type="checkbox" id="terms" name="terms" required>
          I agree to the Terms and Conditions
        </label>
      </div>
      <div class="summary">
        <p>Please review your information before submitting.</p>
      </div>
      <div class="buttons">
        <button type="button" class="btn prev-btn">Previous</button>
        <button type="submit" class="btn submit-btn">Submit</button>
      </div>
    </div>
  </form>
  
  <div class="thank-you-message">
    <h2>Thank You!</h2>
    <p>Your information has been submitted successfully.</p>
    <button type="button" class="btn restart-btn">Start Over</button>
  </div>
</div>

Related Examples

Interactive Multi-Step Progress Indicator

Author:
Jordan McKenzie

5 months ago
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.

Author:
Dino Smith

5 months ago
User Onboarding Progress Steps Section

Author:
Anonymous

3 months ago
Visual Step-by-Step Service Guide Card
Interactive step cards that guide users through your service offerings or product features with clear visual hierarchy and engaging design.

Author:
Anonymous

4 months ago
Vertical Stepper Component for Multi-Step Processes
A customizable vertical stepper component that guides users through sequential processes with clear step indicators and content areas.

Author:
Melissa Chen

2 months ago
How It Works Process Stepper with Dark Mode

Author:
Jordan McKenzie

5 months ago
Email Signup Form with Floating Label Animation
Boost your email list with this eye-catching newsletter subscription form featuring social proof and gradient animations

Author:
Emily Thompson

5 months ago
Login Form

Author:
Jorrit

4 months ago
Elegant Newsletter Subscription Form
Boost your email list with our elegant newsletter subscription form, featuring real-time validation and a sleek, modern design.

Author:
Amelia Chen

5 months ago
Animated Progress Bar Component

Author:
Anonymous

4 months ago
Customer Feedback Form CSS Example

Author:
Anonymous

4 months ago
Interactive Feedback Form with Star Rating System
Collect valuable user feedback with this elegant form featuring an interactive star rating system and comment field for detailed insights.

Author:
Alexis Rivera

4 months ago

Didn't find component you were looking for?

Search from 500+ components