Web Designer Wall

Snippets Form

Bootstrap 5 Vertical Registration Form with Steps

A vertical four-step registration form with a progress rail, floating-label fields, per-step validation and a final review screen.

Bootstrap 5 No jQuery Aug 2020 2.6K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 880px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-md-4 wdw-aurora p-4 p-lg-5 vs-aside">
          <span class="wdw-eyebrow text-white-50">Create account</span>
          <h2 class="h4 fw-bold mt-1 mb-4">Get started in four steps</h2>
          <ol class="vs-steps list-unstyled mb-0" id="vsSteps">
            <li class="vs-step is-active"><span class="vs-dot">1</span><span><strong>Account</strong><small>Email and password</small></span></li>
            <li class="vs-step"><span class="vs-dot">2</span><span><strong>Profile</strong><small>About you</small></span></li>
            <li class="vs-step"><span class="vs-dot">3</span><span><strong>Preferences</strong><small>How we reach you</small></span></li>
            <li class="vs-step"><span class="vs-dot">4</span><span><strong>Confirm</strong><small>Review and finish</small></span></li>
          </ol>
        </aside>
        <div class="col-md-8 p-4 p-lg-5">
          <form id="vsForm" novalidate>
            <div class="progress mb-4" style="height:6px" role="progressbar" aria-label="Registration progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" id="vsProgress">
              <div class="progress-bar" style="width:25%"></div>
            </div>
            <fieldset class="vs-pane" data-pane="0">
              <legend class="h4 wdw-heading mb-1">Basic information</legend>
              <p class="wdw-muted mb-4">Choose how you will sign in.</p>
              <div class="form-floating mb-3"><input type="email" class="form-control" id="vsEmail" placeholder="Email" required><label for="vsEmail">Email</label><div class="invalid-feedback">Enter a valid email address.</div></div>
              <div class="form-floating mb-3"><input type="text" class="form-control" id="vsUser" placeholder="Username" required minlength="3"><label for="vsUser">Username</label><div class="invalid-feedback">At least 3 characters.</div></div>
              <div class="row g-3">
                <div class="col-sm-6"><div class="form-floating"><input type="password" class="form-control" id="vsPass" placeholder="Password" required minlength="6"><label for="vsPass">Password</label><div class="invalid-feedback">At least 6 characters.</div></div></div>
                <div class="col-sm-6"><div class="form-floating"><input type="password" class="form-control" id="vsPass2" placeholder="Repeat password" required><label for="vsPass2">Repeat password</label><div class="invalid-feedback">Passwords must match.</div></div></div>
              </div>
            </fieldset>
            <fieldset class="vs-pane" data-pane="1" hidden>
              <legend class="h4 wdw-heading mb-1">Your profile</legend>
              <p class="wdw-muted mb-4">Tell us a little about yourself.</p>
              <div class="row g-3 mb-3">
                <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="vsFirst" placeholder="First name" required><label for="vsFirst">First name</label><div class="invalid-feedback">Required.</div></div></div>
                <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="vsLast" placeholder="Last name" required><label for="vsLast">Last name</label><div class="invalid-feedback">Required.</div></div></div>
              </div>
              <div class="form-floating"><select class="form-select" id="vsRole" required><option value="" selected disabled>Choose…</option><option>Designer</option><option>Developer</option><option>Product manager</option><option>Other</option></select><label for="vsRole">Your role</label><div class="invalid-feedback">Pick a role.</div></div>
            </fieldset>
            <fieldset class="vs-pane" data-pane="2" hidden>
              <legend class="h4 wdw-heading mb-1">Preferences</legend>
              <p class="wdw-muted mb-4">You can change these any time.</p>
              <div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" role="switch" id="vsNews" checked><label class="form-check-label" for="vsNews">Product updates and tips</label></div>
              <div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" role="switch" id="vsDigest"><label class="form-check-label" for="vsDigest">Weekly digest</label></div>
              <div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="vsSec" checked><label class="form-check-label" for="vsSec">Security alerts</label></div>
            </fieldset>
            <fieldset class="vs-pane" data-pane="3" hidden>
              <legend class="h4 wdw-heading mb-1">Confirm</legend>
              <p class="wdw-muted mb-4">Check your details, then create the account.</p>
              <dl class="vs-review mb-0" id="vsReview"></dl>
              <div class="alert alert-success d-none mt-4 mb-0" id="vsDone" role="status">Account created. Welcome aboard!</div>
            </fieldset>
            <div class="d-flex justify-content-between gap-2 mt-4 pt-2">
              <button type="button" class="btn btn-outline-secondary rounded-pill px-4" id="vsBack" disabled>Back</button>
              <button type="button" class="btn btn-primary rounded-pill px-4" id="vsNext">Next</button>
            </div>
          </form>
        </div>
      </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