Web Designer Wall

Snippets Forms

Bootstrap 5 Signup Form with Validation

A split-screen sign-up form with floating labels, inline validation, password confirmation and a terms checkbox beside a brand panel.

Bootstrap 5 No jQuery Apr 2019 4.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:960px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 wdw-aurora p-4 p-lg-5 d-flex flex-column justify-content-between signup-brand">
          <div class="d-flex align-items-center gap-2 fw-bold"><span class="signup-mark"></span>Northwind</div>
          <div class="my-5">
            <h2 class="display-6 fw-bold mb-3">Build faster with a free account.</h2>
            <ul class="list-unstyled d-grid gap-2 mb-0 text-white-50">
              <li class="d-flex gap-2"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><path d="m5 12 5 5L20 7"/></svg>Unlimited projects</li>
              <li class="d-flex gap-2"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><path d="m5 12 5 5L20 7"/></svg>No credit card needed</li>
              <li class="d-flex gap-2"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><path d="m5 12 5 5L20 7"/></svg>Cancel anytime</li>
            </ul>
          </div>
          <small class="text-white-50">Trusted by 12,000+ teams</small>
        </div>
        <div class="col-lg-7 p-4 p-lg-5">
          <h1 class="h3 wdw-heading mb-1">Create your account</h1>
          <p class="wdw-muted mb-4">Already registered? <a href="#" class="fw-semibold">Log in</a></p>
          <form id="signupForm" novalidate>
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="suName" placeholder="Username" autocomplete="username" required minlength="3">
              <label for="suName">Username</label>
              <div class="invalid-feedback">Use at least 3 characters.</div>
            </div>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="suEmail" placeholder="Email" autocomplete="email" required>
              <label for="suEmail">Email address</label>
              <div class="invalid-feedback">Enter a valid email.</div>
            </div>
            <div class="row g-3 mb-3">
              <div class="col-sm-6">
                <div class="form-floating">
                  <input type="password" class="form-control" id="suPass" placeholder="Password" autocomplete="new-password" required minlength="8">
                  <label for="suPass">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="suPass2" placeholder="Confirm" autocomplete="new-password" required>
                  <label for="suPass2">Confirm password</label>
                  <div class="invalid-feedback">Passwords must match.</div>
                </div>
              </div>
            </div>
            <div class="form-check mb-4">
              <input class="form-check-input" type="checkbox" id="suTerms" required>
              <label class="form-check-label" for="suTerms">I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a></label>
              <div class="invalid-feedback">Please accept to continue.</div>
            </div>
            <button class="btn btn-primary rounded-pill w-100" type="submit">Sign up</button>
            <div class="alert alert-success d-none mt-3 mb-0" id="suOk" role="status">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 forms snippets