Bootstrap Multi-Step Signup Modal — Free Snippet

<div class="bssignup-stage">
  <button class="btn btn-primary btn-lg fw-bold" type="button" data-bs-toggle="modal" data-bs-target="#bssignupModal">Create your account</button>
</div>

<div class="modal fade" id="bssignupModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bssignup-modal">
      <div class="modal-header border-0 pb-0">
        <div class="bssignup-progress w-100">
          <div class="bssignup-progress-bar" id="bssignupBar"></div>
        </div>
        <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body px-4 pb-4 pt-2">

        <div class="bssignup-step" data-step="1">
          <h5 class="fw-bold mb-1">Create your account</h5>
          <p class="text-muted small mb-3">Step 1 of 3 — your details</p>
          <div class="mb-3">
            <label class="form-label small fw-semibold">Full name</label>
            <input type="text" class="form-control" id="bssignupName" placeholder="Ada Lovelace">
          </div>
          <div class="mb-1">
            <label class="form-label small fw-semibold">Work email</label>
            <input type="email" class="form-control" id="bssignupEmail" placeholder="[email protected]">
          </div>
        </div>

        <div class="bssignup-step d-none" data-step="2">
          <h5 class="fw-bold mb-1">Choose a plan</h5>
          <p class="text-muted small mb-3">Step 2 of 3 — pick what fits</p>
          <div class="bssignup-plans" id="bssignupPlans">
            <label class="bssignup-plan">
              <input type="radio" name="bssignupPlan" value="Starter" checked>
              <span><strong>Starter</strong><br><span class="text-muted small">$0/mo</span></span>
            </label>
            <label class="bssignup-plan">
              <input type="radio" name="bssignupPlan" value="Pro">
              <span><strong>Pro</strong><br><span class="text-muted small">$24/mo</span></span>
            </label>
            <label class="bssignup-plan">
              <input type="radio" name="bssignupPlan" value="Team">
              <span><strong>Team</strong><br><span class="text-muted small">$79/mo</span></span>
            </label>
          </div>
        </div>

        <div class="bssignup-step d-none" data-step="3">
          <h5 class="fw-bold mb-1">You're all set</h5>
          <p class="text-muted small mb-3">Step 3 of 3 — confirm and finish</p>
          <div class="bssignup-summary">
            <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-muted small">Name</span><strong class="small" id="bssignupSumName">—</strong></div>
            <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-muted small">Email</span><strong class="small" id="bssignupSumEmail">—</strong></div>
            <div class="d-flex justify-content-between py-2"><span class="text-muted small">Plan</span><strong class="small" id="bssignupSumPlan">—</strong></div>
          </div>
        </div>

        <div class="d-flex justify-content-between mt-4">
          <button type="button" class="btn btn-outline-secondary" id="bssignupBack">Back</button>
          <button type="button" class="btn btn-primary fw-bold" id="bssignupNext">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

.bssignup-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7f9;
}

.bssignup-modal { border: none; border-radius: 16px; overflow: hidden; }

.bssignup-progress {
  height: 5px;
  background: #eceef1;
  border-radius: 20px;
  overflow: hidden;
}
.bssignup-progress-bar {
  height: 100%;
  width: 33.33%;
  background: #6366f1;
  border-radius: 20px;
  transition: width .25s ease;
}

.bssignup-step { animation: bssignupIn .2s ease; }
@keyframes bssignupIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.bssignup-plans { display: flex; flex-direction: column; gap: 10px; }
.bssignup-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bssignup-plan input { margin: 0; }
.bssignup-plan:has(input:checked) { border-color: #6366f1; background: #eef0ff; }

.bssignup-summary { background: #f8fafc; border-radius: 10px; padding: 4px 14px; }

#bssignupBack:disabled { visibility: hidden; }

const bar = document.getElementById('bssignupBar');
const steps = document.querySelectorAll('.bssignup-step');
const backBtn = document.getElementById('bssignupBack');
const nextBtn = document.getElementById('bssignupNext');
const nameInput = document.getElementById('bssignupName');
const emailInput = document.getElementById('bssignupEmail');

let current = 1;
const TOTAL = 3;

function showStep(n) {
  steps.forEach(el => el.classList.toggle('d-none', Number(el.dataset.step) !== n));
  bar.style.width = (n / TOTAL * 100) + '%';
  backBtn.disabled = n === 1;
  nextBtn.textContent = n === TOTAL ? 'Finish' : 'Continue';

  if (n === TOTAL) {
    document.getElementById('bssignupSumName').textContent = nameInput.value || '—';
    document.getElementById('bssignupSumEmail').textContent = emailInput.value || '—';
    const plan = document.querySelector('input[name="bssignupPlan"]:checked');
    document.getElementById('bssignupSumPlan').textContent = plan ? plan.value : '—';
  }
}

nextBtn.addEventListener('click', () => {
  if (current === 1 && (!nameInput.value.trim() || !emailInput.checkValidity())) {
    emailInput.classList.toggle('is-invalid', !emailInput.checkValidity());
    nameInput.classList.toggle('is-invalid', !nameInput.value.trim());
    return;
  }
  if (current === TOTAL) {
    // Final step — close the modal on "Finish". A real app would submit
    // the collected data to an API here before dismissing.
    bootstrap.Modal.getInstance(document.getElementById('bssignupModal'))?.hide();
    return;
  }
  current = Math.min(TOTAL, current + 1);
  showStep(current);
});

backBtn.addEventListener('click', () => {
  current = Math.max(1, current - 1);
  showStep(current);
});

// Reset to step one each time the modal is reopened, so a previous run
// doesn't leave the dialog stuck on step three.
document.getElementById('bssignupModal').addEventListener('hidden.bs.modal', () => {
  current = 1;
  nameInput.value = '';
  emailInput.value = '';
  nameInput.classList.remove('is-invalid');
  emailInput.classList.remove('is-invalid');
  showStep(1);
});

showStep(1);