Web Designer Wall

Snippets Form

Bootstrap 5 Two-Step Registration Form

A two-step registration form with a numbered progress tracker: account details first, then company details, followed by a confirmation state. Each step validates before continuing, and the form sits beside a brand panel on wide screens.

Bootstrap 5 Bootstrap 6 No jQuery Dec 2020 8.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width:980px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 d-none d-lg-flex wdw-aurora p-5 flex-column justify-content-between">
          <span class="fw-bold fs-5">Company</span>
          <div>
            <h2 class="wdw-heading text-white display-6 mb-3">Start building in minutes.</h2>
            <ul class="list-unstyled d-grid gap-2 mb-0">
              <li class="d-flex gap-2"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>Free for 14 days</li>
              <li class="d-flex gap-2"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>No credit card needed</li>
              <li class="d-flex gap-2"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>Cancel any time</li>
            </ul>
          </div>
        </div>
        <div class="col-lg-7 p-4 p-sm-5">
          <span class="wdw-eyebrow">Create account</span>
          <h1 class="wdw-heading h2 mb-4">Register</h1>

          <ol class="list-unstyled d-flex align-items-center mb-4" id="regSteps" aria-label="Progress">
            <li class="wdw-step is-current" data-step="1" aria-current="step"><span class="wdw-dot">1</span><span class="small fw-semibold">Account</span></li>
            <li class="wdw-bar flex-grow-1" aria-hidden="true"><span id="regBar"></span></li>
            <li class="wdw-step" data-step="2"><span class="wdw-dot">2</span><span class="small fw-semibold">Company</span></li>
          </ol>

          <form id="regForm" novalidate>
            <div data-pane="1">
              <div class="row g-3">
                <div class="col-sm-6">
                  <div class="form-floating"><input type="text" class="form-control" id="rFirst" placeholder="First name" autocomplete="given-name" required><label for="rFirst">First name</label></div>
                </div>
                <div class="col-sm-6">
                  <div class="form-floating"><input type="text" class="form-control" id="rLast" placeholder="Last name" autocomplete="family-name" required><label for="rLast">Last name</label></div>
                </div>
                <div class="col-12">
                  <div class="form-floating"><input type="email" class="form-control" id="rEmail" placeholder="Email" autocomplete="email" required><label for="rEmail">Email address</label></div>
                  <div class="invalid-feedback">Enter a valid email address.</div>
                </div>
                <div class="col-12">
                  <div class="form-floating"><input type="password" class="form-control" id="rPass" placeholder="Password" autocomplete="new-password" minlength="8" required><label for="rPass">Password (8+ characters)</label></div>
                  <div class="invalid-feedback">Use at least 8 characters.</div>
                </div>
              </div>
              <button type="button" class="btn btn-primary rounded-pill w-100 mt-4" id="regNext">Continue
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></button>
            </div>

            <div data-pane="2" hidden>
              <div class="row g-3">
                <div class="col-12">
                  <div class="form-floating"><input type="text" class="form-control" id="rCompany" placeholder="Company" autocomplete="organization" required><label for="rCompany">Company name</label></div>
                </div>
                <div class="col-sm-6">
                  <div class="form-floating">
                    <select class="form-select" id="rSize" required><option value="" selected disabled>Choose</option><option>1-10</option><option>11-50</option><option>51-200</option><option>200+</option></select>
                    <label for="rSize">Team size</label>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-floating"><input type="tel" class="form-control" id="rPhone" placeholder="Phone" autocomplete="tel"><label for="rPhone">Phone (optional)</label></div>
                </div>
                <div class="col-12">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="rTerms" required>
                    <label class="form-check-label small" for="rTerms">I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a></label>
                  </div>
                </div>
              </div>
              <div class="d-flex gap-2 mt-4">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4" id="regBack">Back</button>
                <button type="submit" class="btn btn-primary rounded-pill flex-grow-1">Create account</button>
              </div>
            </div>

            <div data-pane="done" hidden class="text-center py-4">
              <span class="wdw-icon mb-3 rounded-circle" style="width:4rem;height:4rem"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span>
              <h2 class="h4 fw-bold text-body-emphasis">You're all set</h2>
              <p class="wdw-muted mb-0" role="status">Check your inbox to confirm your email.</p>
            </div>
          </form>
          <p class="text-center small wdw-muted mt-4 mb-0" id="regSignin">Already a user? <a href="#" class="fw-semibold">Sign in</a></p>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

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