Web Designer Wall

Snippets Form

Bootstrap 5 Registration Form with Floating Labels

A two-part registration form with floating-label fields for personal details and account credentials, built-in validation and a terms checkbox under a branded header.

Bootstrap 5 No jQuery Nov 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:620px">
    <form class="wdw-card reg-card overflow-hidden" novalidate>
      <header class="wdw-aurora p-4 p-md-5 text-center">
        <span class="badge rounded-pill text-bg-light mb-3">Free 14-day trial</span>
        <h1 class="h2 wdw-heading text-white mb-1">Create your account</h1>
        <p class="mb-0 opacity-75">Takes less than a minute. No credit card needed.</p>
      </header>
      <div class="p-4 p-md-5">
        <p class="wdw-eyebrow mb-3">Your details</p>
        <div class="row g-3 mb-4">
          <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="regFirst" placeholder="First name" required autocomplete="given-name"><label for="regFirst">First name</label></div></div>
          <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="regLast" placeholder="Last name" required autocomplete="family-name"><label for="regLast">Last name</label></div></div>
          <div class="col-12"><div class="form-floating"><input type="tel" class="form-control" id="regPhone" placeholder="Phone number" autocomplete="tel"><label for="regPhone">Phone number</label></div></div>
        </div>
        <p class="wdw-eyebrow mb-3">Account</p>
        <div class="row g-3 mb-4">
          <div class="col-12"><div class="form-floating"><input type="email" class="form-control" id="regEmail" placeholder="Email" required autocomplete="email"><label for="regEmail">Email address</label><div class="invalid-feedback">Enter a valid email address.</div></div></div>
          <div class="col-sm-6"><div class="form-floating"><input type="password" class="form-control" id="regPass" placeholder="Password" required minlength="8" autocomplete="new-password"><label for="regPass">Password</label><div class="invalid-feedback">At least 8 characters.</div></div></div>
          <div class="col-sm-6"><div class="form-floating"><input type="password" class="form-control" id="regPass2" placeholder="Repeat" required autocomplete="new-password"><label for="regPass2">Repeat password</label><div class="invalid-feedback">Passwords do not match.</div></div></div>
          <div class="col-12"><div class="form-floating"><textarea class="form-control reg-msg" id="regMsg" placeholder="Message"></textarea><label for="regMsg">Anything we should know? (optional)</label></div></div>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" type="checkbox" id="regTerms" required>
          <label class="form-check-label small text-body-secondary" for="regTerms">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 btn-lg">Create account</button>
        <p class="text-center small text-body-secondary mt-3 mb-0">Already registered? <a href="#" class="fw-semibold">Sign in</a></p>
        <div class="alert alert-success d-none mt-3 mb-0" id="regOk" role="status">Account created. Check your inbox to confirm.</div>
      </div>
    </form>
  </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