Web Designer Wall

Snippets Form

Bootstrap 5 Sign Up Form with Social Login and Password Strength

A split-screen sign-up page with a brand panel, social sign-in buttons, floating-label fields, a show/hide password toggle with a live strength meter, and a terms checkbox.

Bootstrap 5 No jQuery Dec 2020 13.4K views 

<section class="wdw-stage">
  <div class="container su-wrap">
    <div class="card wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-lg-5 su-brand wdw-aurora text-white p-4 p-md-5 d-flex flex-column justify-content-between">
          <div class="d-flex align-items-center gap-2 fw-semibold">
            <span class="su-logo" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18 10 6l4 8 2-4 4 8"/></svg></span> Orbit
          </div>
          <div class="my-5 my-lg-0 position-relative">
            <h2 class="display-6 fw-bold mb-4" style="letter-spacing:-.02em">Start building in minutes.</h2>
            <div class="row g-2 su-stats text-start">
              <div class="col-6"><div class="su-stat"><strong>14 days</strong><span>free trial, no card</span></div></div>
              <div class="col-6"><div class="su-stat"><strong>12k+</strong><span>teams onboarded</span></div></div>
              <div class="col-12"><div class="su-stat d-flex align-items-center gap-3"><strong>99.9%</strong><span>uptime over the last 12 months</span></div></div>
            </div>
          </div>
          <figure class="mb-0 position-relative small opacity-75">
            <blockquote class="mb-1">“We shipped our redesign in half the time.”</blockquote>
            <figcaption>Elena Moretti, Head of Product</figcaption>
          </figure>
        </aside>
        <div class="col-lg-7 bg-body">
          <form class="p-4 p-md-5 su-form" novalidate>
            <h1 class="h3 wdw-heading mb-1">Create your account</h1>
            <p class="text-body-secondary mb-4">Already registered? <a href="#" class="fw-semibold link-underline-opacity-0">Log in</a></p>

            <div class="row g-2 mb-3">
              <div class="col-sm-6"><button type="button" class="btn btn-outline-secondary text-body rounded-pill w-100 d-flex align-items-center justify-content-center gap-2">
                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23 12.3c0-.8-.1-1.500-.2-2.200H12v4.200h6.200a5.300 5.300 0 0 1-2.300 3.500v2.900h3.700c2.200-2 3.400-5 3.400-8.400z"/><path fill="#34A853" d="M12 24c3.100 0 5.700-1 7.600-2.800l-3.700-2.900c-1 .7-2.300 1.100-3.900 1.100-3 0-5.500-2-6.400-4.700H1.800v3A12 12 0 0 0 12 24z"/><path fill="#FBBC05" d="M5.600 14.700a7.200 7.200 0 0 1 0-4.600v-3H1.800a12 12 0 0 0 0 10.600z"/><path fill="#EA4335" d="M12 4.800c1.700 0 3.200.6 4.400 1.700l3.300-3.300A12 12 0 0 0 1.800 7.100l3.800 3C6.500 6.800 9 4.800 12 4.800z"/></svg>Google</button></div>
              <div class="col-sm-6"><button type="button" class="btn btn-outline-secondary text-body rounded-pill w-100 d-flex align-items-center justify-content-center gap-2">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.500 11.500 0 0 0-3.600 22.400c.6.100.8-.2.8-.6v-2c-3.200.7-3.900-1.500-3.900-1.500-.5-1.300-1.300-1.700-1.300-1.700-1-.7.1-.7.1-.7 1.200.1 1.800 1.200 1.800 1.200 1 1.800 2.700 1.300 3.400 1 .1-.8.4-1.300.7-1.600-2.600-.3-5.300-1.300-5.300-5.700 0-1.300.5-2.300 1.200-3.100-.1-.3-.5-1.500.1-3.100 0 0 1-.3 3.200 1.200a11 11 0 0 1 5.800 0c2.200-1.500 3.200-1.200 3.200-1.200.6 1.600.2 2.800.1 3.100.8.800 1.200 1.800 1.200 3.100 0 4.400-2.700 5.400-5.300 5.700.4.400.8 1.100.8 2.200v3.200c0 .4.200.7.800.6A11.500 11.500 0 0 0 12 .5z"/></svg>GitHub</button></div>
            </div>
            <div class="d-flex align-items-center gap-3 text-body-secondary small my-3"><hr class="flex-grow-1 m-0"><span>or sign up with email</span><hr class="flex-grow-1 m-0"></div>

            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="su-name" placeholder="Full name" autocomplete="name" required>
              <label for="su-name">Full name</label>
            </div>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="su-email" placeholder="Email" autocomplete="email" required>
              <label for="su-email">Work email</label>
            </div>
            <div class="mb-3">
              <div class="position-relative">
                <div class="form-floating">
                  <input type="password" class="form-control su-pass-input" id="su-pass" placeholder="Password" autocomplete="new-password" minlength="8" required>
                  <label for="su-pass">Password</label>
                </div>
                <button class="su-eye" type="button" id="su-toggle" aria-label="Show password" aria-controls="su-pass">
                  <svg class="su-eye-on" 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="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
                  <svg class="su-eye-off d-none" 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="M17.9 17.9A10.1 10.1 0 0 1 12 19c-6.500 0-10-7-10-7a17.700 17.700 0 0 1 4.100-5M9.900 4.200A9.500 9.500 0 0 1 12 4c6.500 0 10 7 10 7a17.800 17.800 0 0 1-2.200 3.200M1 1l22 22"/></svg>
                </button>
              </div>
              <div class="progress su-progress mt-2" hidden id="su-bar" role="progressbar" aria-label="Password strength" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0"><div class="progress-bar" id="su-meter" style="width:0"></div></div>
              <div class="form-text" id="su-hint" role="status" aria-live="polite">Use 8+ characters with a mix of letters, numbers and symbols.</div>
            </div>
            <div class="form-check mb-4">
              <input class="form-check-input" type="checkbox" id="su-terms" required>
              <label class="form-check-label small" for="su-terms">I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a></label>
            </div>
            <button type="submit" class="btn btn-primary w-100 rounded-pill">Create account</button>
            <p class="text-success small fw-semibold text-center mt-3 mb-0" id="su-ok" hidden>Account created. Check your inbox to confirm.</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