Web Designer Wall

Snippets Animation

Bootstrap 5 Registration Form with Animated Background

A sign-up card floating over a softly animated gradient background, with live password strength, confirmation matching and terms consent.

Bootstrap 5 No jQuery Nov 2020 2.9K 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 wdw-aurora rg-aurora p-4 p-lg-5 d-flex flex-column justify-content-between gap-4">
          <div>
            <span class="wdw-eyebrow text-white opacity-75">Free for 14 days</span>
            <h2 class="wdw-heading text-white h2 mt-2 mb-3">Build faster with a workspace your whole team loves.</h2>
            <p class="opacity-75 mb-0">Start a free trial in under a minute. No card needed, cancel any time.</p>
          </div>
          <div class="d-flex align-items-center gap-3">
            <div class="d-flex"><img src="https://i.pravatar.cc/80?img=12" width="32" height="32" alt="" class="rounded-circle border border-2 border-white rg-av"><img src="https://i.pravatar.cc/80?img=32" width="32" height="32" alt="" class="rounded-circle border border-2 border-white rg-av"><img src="https://i.pravatar.cc/80?img=47" width="32" height="32" alt="" class="rounded-circle border border-2 border-white rg-av"><img src="https://i.pravatar.cc/80?img=5" width="32" height="32" alt="" class="rounded-circle border border-2 border-white rg-av"></div>
            <p class="small mb-0 opacity-75">Joined by 12,000+ teams this year</p>
          </div>
        </div>
        <div class="col-lg-7 p-4 p-lg-5">
          <h3 class="wdw-heading h3 mb-1">Create your account</h3>
          <p class="wdw-muted mb-4">Free for 14 days. No card needed.</p>
          <form id="regForm" novalidate>
        <div class="row g-3 mb-3">
          <div class="col-sm-6 form-floating">
            <input type="text" class="form-control" id="rgFirst" placeholder="First name" autocomplete="given-name" required>
            <label for="rgFirst" class="ms-2">First name</label>
          </div>
          <div class="col-sm-6 form-floating">
            <input type="text" class="form-control" id="rgLast" placeholder="Last name" autocomplete="family-name" required>
            <label for="rgLast" class="ms-2">Last name</label>
          </div>
        </div>
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="rgEmail" placeholder="Email" autocomplete="email" aria-describedby="rgEmailErr" required>
          <label for="rgEmail">Email address</label>
          <div class="invalid-feedback" id="rgEmailErr">Enter a valid email address.</div>
        </div>
        <div class="row g-3 mb-2">
          <div class="col-sm-6 form-floating">
            <input type="password" class="form-control" id="rgPass" placeholder="Password" autocomplete="new-password" minlength="8" aria-describedby="rgHint" required>
            <label for="rgPass" class="ms-2">Password</label>
          </div>
          <div class="col-sm-6 form-floating">
            <input type="password" class="form-control" id="rgConfirm" placeholder="Confirm" autocomplete="new-password" aria-describedby="rgConfErr" required>
            <label for="rgConfirm" class="ms-2">Confirm password</label>
            <div class="invalid-feedback" id="rgConfErr">Passwords do not match.</div>
          </div>
        </div>
        <div class="progress mb-1" style="height:6px" role="progressbar" aria-label="Password strength" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0" id="rgMeter"><div class="progress-bar" id="rgBar" style="width:0"></div></div>
        <p class="small wdw-muted mb-3" id="rgHint">Use 8+ characters, mixing cases, digits and symbols.</p>
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="rgTerms" required>
          <label class="form-check-label small" for="rgTerms">I agree to the <a href="#" class="link-primary fw-semibold text-decoration-none">Terms</a> and <a href="#" class="link-primary fw-semibold text-decoration-none">Privacy Policy</a></label>
        </div>
        <button type="submit" class="btn btn-primary rounded-pill w-100">Create account</button>
        <div class="alert alert-success rounded-4 mt-3 mb-0 d-none" id="rgOk" role="status">Account created. Welcome aboard!</div>
      </form>
          <p class="text-center small wdw-muted mt-3 mb-0">Already registered? <a href="#" class="link-primary fw-semibold text-decoration-none">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 animation snippets