Web Designer Wall

Snippets Form

Bootstrap 5 Registration Form with Reset Button

A compact registration card with floating-label fields, a show/hide password toggle with strength meter, and Submit and Reset buttons.

Bootstrap 5 No jQuery Nov 2020 3.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:920px">
    <div class="wdw-card overflow-hidden"><div class="row g-0">
    <aside class="col-lg-5 d-none d-lg-flex wdw-aurora p-5 flex-column justify-content-center">
      <span class="wdw-eyebrow text-white-50">Get started</span>
      <h2 class="h3 fw-bold mt-2 mb-3">Join in under a minute</h2>
      <p class="mb-4 text-white-50">One account for every project, with nothing to install and no card needed.</p>
      <ul class="list-unstyled d-grid gap-3 mb-0">
        <li class="d-flex gap-2 align-items-center"><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="M20 6 9 17l-5-5"/></svg>Free forever for personal use</li>
        <li class="d-flex gap-2 align-items-center"><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="M20 6 9 17l-5-5"/></svg>Sync across all your devices</li>
        <li class="d-flex gap-2 align-items-center"><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="M20 6 9 17l-5-5"/></svg>Cancel or delete any time</li>
      </ul>
    </aside>
    <div class="col-lg-7">
    <form class="p-4 p-md-5" id="regForm" novalidate>
      <div class="d-flex align-items-center gap-3 mb-4">
        <span class="wdw-icon" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg>
        </span>
        <div>
          <h1 class="wdw-heading h4 mb-0">Registration form</h1>
          <p class="wdw-muted small mb-0">Create your account in a few seconds.</p>
        </div>
      </div>

      <div class="row g-3">
        <div class="col-sm-6">
          <div class="form-floating">
            <input type="text" class="form-control" id="rgFirst" placeholder="Forename" autocomplete="given-name" required>
            <label for="rgFirst">Forename</label>
            <div class="invalid-feedback">Please enter your forename.</div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-floating">
            <input type="text" class="form-control" id="rgLast" placeholder="Surname" autocomplete="family-name" required>
            <label for="rgLast">Surname</label>
            <div class="invalid-feedback">Please enter your surname.</div>
          </div>
        </div>
        <div class="col-12">
          <div class="form-floating">
            <input type="text" class="form-control" id="rgUser" placeholder="Username" autocomplete="username" minlength="3" required>
            <label for="rgUser">Username</label>
            <div class="invalid-feedback">Please choose a username (3+ characters).</div>
          </div>
        </div>
        <div class="col-12">
          <div class="form-floating">
            <input type="email" class="form-control" id="rgEmail" placeholder="Email address" autocomplete="email" required>
            <label for="rgEmail">Email address</label>
            <div class="invalid-feedback">Please enter a valid email address.</div>
          </div>
        </div>
        <div class="col-12">
          <div class="position-relative rg-pass">
            <div class="form-floating">
              <input type="password" class="form-control" id="rgPass" placeholder="Password" autocomplete="new-password" minlength="8" aria-describedby="rgStrength" required>
              <label for="rgPass">Password</label>
              <div class="invalid-feedback">Use at least 8 characters.</div>
            </div>
            <button class="btn btn-link rg-toggle text-body-secondary" type="button" id="rgToggle" aria-label="Show password" aria-pressed="false">
              <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="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
          </div>
          <div class="progress-stacked mt-2 gap-1 rg-meter" id="rgMeter" role="progressbar" aria-label="Password strength" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0">
            <span class="rg-seg"></span><span class="rg-seg"></span><span class="rg-seg"></span><span class="rg-seg"></span>
          </div>
          <p class="small wdw-muted mt-1 mb-2" id="rgStrength">Password strength</p>
          <div class="d-flex flex-wrap gap-2" id="rgRules">
            <span class="rg-pill" data-rule="len">8+ characters</span>
            <span class="rg-pill" data-rule="num">A number</span>
            <span class="rg-pill" data-rule="sym">A symbol</span>
          </div>
        </div>
      </div>

      <div class="d-flex flex-column flex-sm-row gap-2 mt-4">
        <button type="submit" class="btn btn-primary rounded-pill flex-grow-1">Submit</button>
        <button type="reset" class="btn btn-outline-secondary rounded-pill px-4">Reset</button>
      </div>
      <p class="small text-center mt-3 mb-0" id="rgMsg" role="status"></p>
    </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