Web Designer Wall

Snippets Form

Bootstrap 5 Signup Form with Side Image

A split-screen sign-up form with a testimonial photo beside floating-label fields and a clear call to action.

Bootstrap 5 No jQuery Jul 2020 2K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 62rem;">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-md-6 d-none d-md-block wdw-signup-photo position-relative">
          <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=900&q=70" alt="Portrait of a smiling woman" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" width="900" height="1100">
          <div class="wdw-signup-scrim position-absolute bottom-0 start-0 end-0 p-4 p-lg-5 text-white">
            <p class="fs-5 fw-semibold mb-1">“Set up in two minutes and our whole team was on board.”</p>
            <p class="small mb-0 opacity-75">Maya Lindqvist, Product Lead</p>
          </div>
        </div>
        <div class="col-md-6 p-4 p-sm-5">
          <span class="wdw-eyebrow mb-2">Get started</span>
          <h2 class="wdw-heading h3 mb-1">Create your account</h2>
          <p class="wdw-muted mb-4">Free for 14 days. No credit card needed.</p>
          <form novalidate>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="suEmail" placeholder="[email protected]" autocomplete="email" required>
              <label for="suEmail">Email address</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="suPass" placeholder="Password" autocomplete="new-password" minlength="8" required>
              <label for="suPass">Password</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="suPass2" placeholder="Repeat password" autocomplete="new-password" required>
              <label for="suPass2">Repeat password</label>
              <div class="invalid-feedback">Passwords do not match.</div>
            </div>
            <div class="form-check mb-4">
              <input class="form-check-input" type="checkbox" id="suTerms" required>
              <label class="form-check-label small" for="suTerms">I agree to the <a href="#">license terms</a></label>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Create account</button>
          </form>
          <p class="text-center small wdw-muted mt-4 mb-0">Already have an account? <a href="#" class="fw-semibold text-decoration-none">Log 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 Form snippets