Web Designer Wall

Snippets Form

Bootstrap 5 Registration Form with Password Strength

A compact sign-up card with floating-label fields, a show/hide password button with a live strength meter, and inline validation.

Bootstrap 5 No jQuery Nov 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 980px">
    <div class="wdw-card overflow-hidden">
     <div class="row g-0">
      <aside class="col-lg-5 wdw-aurora d-none d-lg-flex flex-column justify-content-between p-5">
        <span class="fw-bold fs-5">Northwind</span>
        <div>
          <span class="wdw-eyebrow text-white mb-2">Free for 14 days</span>
          <h2 class="fw-bold mb-3" style="letter-spacing:-.02em">Ship your next project in half the time.</h2>
          <ul class="list-unstyled d-flex flex-column gap-2 mb-4 small">
            <li class="d-flex gap-2"><span aria-hidden="true">✓</span>Unlimited projects and collaborators</li>
            <li class="d-flex gap-2"><span aria-hidden="true">✓</span>Cancel any time, no card needed</li>
            <li class="d-flex gap-2"><span aria-hidden="true">✓</span>Priority support from real people</li>
          </ul>
          <figure class="mb-0 p-3 rounded-4 wdw-quote small">
            <blockquote class="mb-2">“We moved our whole team over in an afternoon.”</blockquote>
            <figcaption class="fw-semibold">Mara Ellis, Product Lead</figcaption>
          </figure>
        </div>
      </aside>
      <div class="col-lg-7 p-4 p-sm-5">
      <div class="text-center mb-4">
        <span class="wdw-icon mb-3" style="width:3.25rem;height:3.25rem"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span>
        <h1 class="wdw-heading h3 mb-1">Create your account</h1>
        <p class="wdw-muted mb-0">Start your free trial. No credit card needed.</p>
      </div>
      <form id="signupForm" novalidate>
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="suEmail" placeholder="Email" required autocomplete="email">
          <label for="suEmail">Email address</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="suName" placeholder="Name" required autocomplete="name">
          <label for="suName">Full name</label>
          <div class="invalid-feedback">Please enter your name.</div>
        </div>
        <div class="mb-3">
          <div class="input-group wdw-pw">
            <div class="form-floating flex-grow-1">
              <input type="password" class="form-control" id="suPass" placeholder="Password" required minlength="8" autocomplete="new-password" aria-describedby="suHint">
              <label for="suPass">Password</label>
            </div>
            <button class="btn btn-outline-secondary" type="button" id="suToggle" aria-label="Show password" aria-pressed="false">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" id="suEyeOn"><path d="M2 12s3.500-7 10-7 10 7 10 7-3.500 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="d-none" id="suEyeOff"><path d="M3 3l18 18M10.6 5.1A10 10 0 0 1 12 5c6.500 0 10 7 10 7a17 17 0 0 1-3.200 4.100M6.600 6.600A17 17 0 0 0 2 12s3.500 7 10 7a9.700 9.700 0 0 0 4.200-1M9.900 9.900a3 3 0 0 0 4.200 4.200"/></svg>
            </button>
          </div>
          <div class="d-flex align-items-center gap-2 mt-2">
            <div class="wdw-seg flex-grow-1" id="suMeter" role="img" aria-label="Password strength">
              <span></span><span></span><span></span><span></span>
            </div>
            <span class="small fw-semibold wdw-strength-label" id="suLabel" aria-live="polite">Enter a password</span>
          </div>
          <ul class="list-unstyled small mt-2 mb-0 d-grid gap-1 wdw-reqs" id="suHint">
            <li data-req="len">8 or more characters</li>
            <li data-req="case">Upper and lower case letters</li>
            <li data-req="num">A number</li>
            <li data-req="sym">A symbol, such as ! or #</li>
          </ul>
          <div class="small text-danger mt-1 d-none" id="suError">Password must be at least 8 characters.</div>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" type="checkbox" id="suTerms" required>
          <label class="form-check-label small" for="suTerms">I agree to the <a href="#">terms</a> and <a href="#">privacy policy</a></label>
        </div>
        <button type="submit" class="btn btn-primary rounded-pill w-100" id="suSubmit">Create account</button>
        <div id="suStatus" class="alert alert-success d-none mt-3 mb-0" role="status"></div>
      </form>
      <p class="text-center small wdw-muted mt-4 mb-0">Already registered? <a href="#" class="fw-semibold">Sign in</a></p>
      </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.

Related snippets

More Form snippets