Web Designer Wall

Snippets Animation

Bootstrap 5 Registration Form with Animations

A split-screen registration form with a brand panel, staggered entrance animation, password strength meter and show/hide toggle. Built with Bootstrap 5 floating labels and a small vanilla script.

Bootstrap 5 No jQuery Aug 2019 3.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width:960px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-lg-5 wdw-aurora p-4 p-md-5 d-flex flex-column justify-content-between reg-side">
          <div>
            <span class="wdw-eyebrow text-white opacity-75">Join us</span>
            <h1 class="h2 fw-bold mt-2 mb-3" style="letter-spacing:-.02em">Create your account</h1>
            <p class="opacity-75 mb-0">Set up a free profile in under a minute and pick up right where you left off on any device.</p>
          </div>
          <figure class="d-none d-lg-block mt-5 mb-0 p-3 rounded-4 reg-quote">
            <blockquote class="small mb-3">"I had my workspace set up in a couple of minutes and haven't looked back."</blockquote>
            <figcaption class="d-flex align-items-center gap-3">
              <span class="d-flex"><span class="reg-av" style="background:#818cf8">AK</span><span class="reg-av" style="background:#ec4899">MR</span><span class="reg-av" style="background:#6366f1">JT</span></span>
              <span class="small opacity-75">Joined by 12,000+ people</span>
            </figcaption>
          </figure>
          <ul class="list-unstyled d-none d-lg-grid gap-3 mt-4 mb-0 small">
            <li class="d-flex gap-2 align-items-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>No credit card needed</li>
            <li class="d-flex gap-2 align-items-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Cancel any time</li>
            <li class="d-flex gap-2 align-items-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Your data stays yours</li>
          </ul>
        </aside>
        <div class="col-lg-7 p-4 p-md-5">
          <form class="reg-form" novalidate>
            <h2 class="h4 fw-bold mb-1">Sign up</h2>
            <p class="wdw-muted mb-4">Free forever. No credit card needed.</p>
            <div class="row g-3">
              <div class="col-sm-6 reg-item" style="--i:0"><div class="form-floating"><input class="form-control" id="reg-first" placeholder="First name" autocomplete="given-name" required><label for="reg-first">First name</label></div></div>
              <div class="col-sm-6 reg-item" style="--i:1"><div class="form-floating"><input class="form-control" id="reg-second" placeholder="Second name" autocomplete="family-name" required><label for="reg-second">Second name</label></div></div>
              <div class="col-12 reg-item" style="--i:2"><div class="form-floating"><input type="email" class="form-control" id="reg-email" placeholder="Email" autocomplete="email" required><label for="reg-email">Email</label><div class="invalid-feedback">Enter a valid email address.</div></div></div>
              <div class="col-12 reg-item" style="--i:3"><div class="form-floating"><input class="form-control" id="reg-login" placeholder="Username" autocomplete="username" required><label for="reg-login">Username</label></div></div>
              <div class="col-12 reg-item" style="--i:4">
                <div class="position-relative">
                  <div class="form-floating">
                    <input type="password" class="form-control pe-5 me-4" id="reg-pass" placeholder="Password" autocomplete="new-password" minlength="8" required>
                    <label for="reg-pass">Password</label>
                  </div>
                  <button class="btn btn-link p-0 px-2 small fw-semibold text-decoration-none reg-toggle" type="button" id="reg-toggle" aria-label="Show password" aria-pressed="false">Show</button>
                </div>
                <div class="d-none mt-3" id="reg-strength">
                  <div class="progress" style="height:4px" role="progressbar" aria-label="Password strength" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0"><div class="progress-bar" id="reg-meter" style="width:0"></div></div>
                  <div class="small fw-semibold mt-2" id="reg-label"></div>
                </div>
                <div class="small wdw-muted mt-2 mb-1" id="reg-hint">Use 8+ characters with a mix of letters and numbers.</div>
              </div>
              <div class="col-12 reg-item" style="--i:5"><button class="btn btn-primary rounded-pill w-100" type="submit">Create account</button></div>
              <div class="col-12 reg-item" style="--i:6">
                <div class="d-flex align-items-center gap-3 wdw-muted small my-1"><hr class="flex-grow-1 m-0"><span>or continue with</span><hr class="flex-grow-1 m-0"></div>
              </div>
              <div class="col-6 reg-item" style="--i:7"><button type="button" class="btn btn-outline-secondary rounded-pill w-100">Google</button></div>
              <div class="col-6 reg-item" style="--i:8"><button type="button" class="btn btn-outline-secondary rounded-pill w-100">GitHub</button></div>
              <p class="col-12 text-center small wdw-muted mb-0 reg-item" style="--i:9">By signing up you agree to our terms and privacy policy.<br>Already registered? <a href="#" class="link-primary fw-semibold link-underline-opacity-0">Sign in</a></p>
            </div>
            <div class="alert alert-success d-none mt-3 mb-0" role="status" id="reg-ok">Account created. Welcome aboard!</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.

Related snippets

More animation snippets