Why this works

Breaking forms into smaller steps improves user engagement and reduces abandonment, while a visible progress indicator keeps users informed of their position in the process.

Source Code

<div class="multi-step-form" id="multiStepForm">
  <div class="progress-indicator">
    <div class="step active">1</div>
    <div class="step">2</div>
    <div class="step">3</div>
  </div>
  <form>
    <div class="form-step">
      <input type="text" class="form-control mb-3" placeholder="Name" required>
      <button type="button" class="btn btn-primary w-100" onclick="nextStep()">Next</button>
    </div>
    <div class="form-step d-none">
      <input type="email" class="form-control mb-3" placeholder="Email" required>
      <button type="button" class="btn btn-primary w-100" onclick="nextStep()">Next</button>
    </div>
    <div class="form-step d-none">
      <input type="password" class="form-control mb-3" placeholder="Password" required>
      <button type="submit" class="btn btn-success w-100">Submit</button>
    </div>
  </form>
</div>

<style>
/* (Mismo CSS que arriba) */
</style>

<script>
function nextStep() {
  const form = document.getElementById('multiStepForm');
  const steps = form.querySelectorAll('.form-step');
  const indicators = form.querySelectorAll('.step');
  let current = Array.from(steps).findIndex(step => !step.classList.contains('d-none'));
  if (current < steps.length - 1) {
    steps[current].classList.add('d-none');
    steps[current + 1].classList.remove('d-none');
    indicators[current].classList.remove('active');
    indicators[current + 1].classList.add('active');
  }
}
<\/script>