Web Designer Wall

Snippets Form

Bootstrap 5 Sign Up Form with Floating Labels

A split-screen sign-up card with floating-label fields, a pill button, a Google sign-up option and a testimonial panel that moves above the form on small screens.

Bootstrap 5 No jQuery Apr 2020 2.2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-6 p-4 p-md-5 d-flex flex-column">
          <div class="d-flex align-items-center gap-2 fw-bold mb-4 mb-lg-5">
            <span class="wdw-icon" style="width:2.25rem;height:2.25rem;border-radius:.7rem" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18 10 9l4 5 6-9"/></svg>
            </span>
            Pulseboard
          </div>
          <span class="wdw-eyebrow mb-2">15-day free trial</span>
          <h1 class="wdw-heading h2 mb-2">Create your free account</h1>
          <p class="wdw-muted mb-4">Try the Business plan free for 15 days. Downgrade to Basic, free forever, at any time.</p>

          <form class="d-grid gap-3 mb-3" id="signupForm" novalidate>
            <div class="form-floating">
              <input type="text" class="form-control" id="suName" placeholder="Full name" autocomplete="name" required>
              <label for="suName">Full name</label>
              <div class="invalid-feedback">Please enter your name.</div>
            </div>
            <div class="form-floating">
              <input type="email" class="form-control" id="suEmail" placeholder="Work email" autocomplete="email" required>
              <label for="suEmail">Work email</label>
              <div class="invalid-feedback">Enter a valid email address.</div>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill">Sign up free</button>
          </form>

          <div class="d-flex align-items-center gap-3 wdw-muted small my-2">
            <hr class="flex-grow-1 m-0"><span>or</span><hr class="flex-grow-1 m-0">
          </div>
          <button type="button" class="btn btn-outline-secondary text-body-emphasis rounded-pill mt-2">
            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="#4285F4" d="M22.56 12.25c0-.780-.070-1.53-.200-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.20 3.32v2.77h3.56c2.08-1.92 3.28-4.74 3.28-8.10z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.980 7.28-2.66l-3.56-2.77c-.980.66-2.23 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.10a6.60 6.60 0 0 1 0-4.20V7.07H2.18a11 11 0 0 0 0 9.86z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.560 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"/></svg>
            Sign up with Google
          </button>

          <p class="text-center small wdw-muted mt-auto pt-4 mb-0">Already have an account? <a href="#" class="fw-semibold">Sign in</a></p>
        </div>

        <div class="col-lg-6 su-visual wdw-aurora d-flex flex-column justify-content-end p-4 p-md-5">
          <figure class="su-quote m-0">
            <blockquote class="h5 fw-semibold mb-3">“We saw where visitors got stuck within a day, and fixed it by Friday.”</blockquote>
            <figcaption class="d-flex align-items-center gap-3">
              <img src="https://i.pravatar.cc/80?img=47" width="40" height="40" class="rounded-circle" alt="">
              <span><strong class="d-block">Maya Lindqvist</strong><span class="small opacity-75">Head of Product, Fieldnote</span></span>
            </figcaption>
          </figure>
        </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.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More Form snippets