→ Jordan McKenzie
→ Interactive Multi-Step Progress Indicato...

Interactive Multi-Step Progress Indicator

This Example is contributed by Jordan McKenzie, on 27-Feb-2025. It is responsive.

Step Indicator Progress Indicator Form Wizard Step Navigation Multi-stage Form

<div class="step-container">
  <div class="steps">
    <div class="step active" data-step="1">
      <span class="step-number">1</span>
      <span class="step-title">Account</span>
    </div>
    <div class="step" data-step="2">
      <span class="step-number">2</span>
      <span class="step-title">Personal</span>
    </div>
    <div class="step" data-step="3">
      <span class="step-number">3</span>
      <span class="step-title">Review</span>
    </div>
    <div class="step" data-step="4">
      <span class="step-number">4</span>
      <span class="step-title">Complete</span>
    </div>
    <div class="progress-bar">
      <div class="progress"></div>
    </div>
  </div>
  
  <div class="step-content">
    <div class="step-form" id="step-1">
      <h2>Account Information</h2>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
      </div>
    </div>
    
    <div class="step-form" id="step-2" style="display: none;">
      <h2>Personal Details</h2>
      <div class="form-group">
        <label for="name">Full Name</label>
        <input type="text" id="name" name="name">
      </div>
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" name="phone">
      </div>
    </div>
    
    <div class="step-form" id="step-3" style="display: none;">
      <h2>Review Information</h2>
      <div class="review-data">
        <p>Please review your information before submitting.</p>
        <ul>
          <li><strong>Email:</strong> <span id="review-email"></span></li>
          <li><strong>Name:</strong> <span id="review-name"></span></li>
          <li><strong>Phone:</strong> <span id="review-phone"></span></li>
        </ul>
      </div>
    </div>
    
    <div class="step-form" id="step-4" style="display: none;">
      <h2>Registration Complete!</h2>
      <div class="success-message">
        <svg viewBox="0 0 24 24" width="64" height="64">
          <path fill="#4CAF50" d="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41-1.41L9,16.17z"/>
        </svg>
        <p>Thank you for completing all steps.</p>
      </div>
    </div>
    
    <div class="navigation-buttons">
      <button class="btn back" disabled>Back</button>
      <button class="btn next">Next</button>
    </div>
  </div>
</div>

Related Examples