Web Designer Wall

Snippets Form

Bootstrap 5 Multi-Step Form with Vertical Progress Steps

A three-step registration card with a vertical progress tracker that updates as each step is completed, plus a bonus banner.

Bootstrap 5 No jQuery Jun 2020 7.2K views 

<section class="wdw-stage ms-stage">
  <div class="container" style="max-width:860px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-md-5 wdw-aurora p-4 p-md-5">
          <span class="wdw-eyebrow ms-eyebrow">Get started</span>
          <h2 class="wdw-heading ms-title h3 mb-4">Create your account</h2>
          <ol class="ms-steps list-unstyled mb-0" aria-label="Registration progress">
              <li class="ms-step is-current" data-step="0" aria-current="step"><span class="ms-dot"><span class="ms-num">1</span><svg class="ms-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><span><span class="d-block fw-semibold">Enter your email<span class="visually-hidden ms-state"></span></span><span class="d-block small ms-sub">Where we send updates</span></span></li>
              <li class="ms-step" data-step="1"><span class="ms-dot"><span class="ms-num">2</span><svg class="ms-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><span><span class="d-block fw-semibold">Set a password<span class="visually-hidden ms-state"></span></span><span class="d-block small ms-sub">At least 8 characters</span></span></li>
              <li class="ms-step" data-step="2"><span class="ms-dot"><span class="ms-num">3</span><svg class="ms-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><span><span class="d-block fw-semibold">Select your country<span class="visually-hidden ms-state"></span></span><span class="d-block small ms-sub">For local offers</span></span></li>
            </ol>
        </div>
        <div class="col-md-7 p-4 p-md-5 d-flex flex-column justify-content-center">
          <form id="ms-form" novalidate>
              <p class="small fw-bold text-primary mb-3" id="ms-count" aria-live="polite">Step 1 of 3</p>
              <div class="ms-pane" data-pane="0">
                <div class="form-floating mb-3"><input type="email" class="form-control" id="ms-email" placeholder="Email" autocomplete="email" required><label for="ms-email">Email address</label><div class="invalid-feedback">Enter a valid email address.</div></div>
                <div class="form-check"><input class="form-check-input" type="checkbox" id="ms-promo" checked><label class="form-check-label" for="ms-promo">I want to receive promo emails</label></div>
              </div>
              <div class="ms-pane d-none" data-pane="1">
                <div class="form-floating mb-3"><input type="password" class="form-control" id="ms-pass" placeholder="Password" autocomplete="new-password" minlength="8" required><label for="ms-pass">Password</label><div class="invalid-feedback">Use at least 8 characters.</div></div>
                <div class="form-floating"><input type="password" class="form-control" id="ms-pass2" placeholder="Confirm" autocomplete="new-password" required><label for="ms-pass2">Confirm password</label><div class="invalid-feedback">Passwords do not match.</div></div>
              </div>
              <div class="ms-pane d-none" data-pane="2">
                <div class="form-floating"><select class="form-select" id="ms-country" required><option value="" selected disabled>Choose…</option><option>United States</option><option>United Kingdom</option><option>Germany</option><option>India</option><option>Japan</option></select><label for="ms-country">Country</label><div class="invalid-feedback">Select a country.</div></div>
              </div>
              <div class="d-flex justify-content-between gap-2 mt-4">
                <button type="button" class="btn btn-link text-decoration-none px-3 invisible" id="ms-back" disabled>Back</button>
                <button type="button" class="btn btn-primary rounded-pill px-4" id="ms-next">Continue</button>
              </div>
              <div class="alert alert-success d-none mt-4 mb-0" id="ms-done" role="status">You're in. Your bonus has been added.</div>
            </form>
        </div>
      </div>
      <div class="ms-bonus bg-primary-subtle px-4 px-md-5 py-4 d-flex align-items-center gap-3 border-top">
        <span class="ms-gift"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13M5 12v8a1 1 0 001 1h12a1 1 0 001-1v-8M7.5 8a2.5 2.5 0 010-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 010 5"/></svg></span>
        <p class="mb-0 fs-5 fw-semibold text-primary-emphasis">Finish sign-up and get <span class="fw-bolder">666 bonus cookies</span> <span aria-hidden="true">🍪</span></p>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More Form snippets