→ 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

11 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

11 months ago
User Onboarding Progress Steps Section

Author:
Anonymous

10 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

10 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

8 months ago
How It Works Process Stepper with Dark Mode

Author:
Jordan McKenzie

11 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

11 months ago
Login Form

Author:
Jorrit

10 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

11 months ago
Animated Progress Bar Component

Author:
Anonymous

10 months ago
Customer Feedback Form CSS Example

Author:
Anonymous

10 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

10 months ago

Didn't find component you were looking for?

Search from 500+ components