Web Designer Wall

Snippets Form

Bootstrap 5 Responsive Registration Form

A newsletter registration form with a brand panel, floating-label contact fields and pill toggles for topics and format.

Bootstrap 5 No jQuery Nov 2020 2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1000px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-4 wdw-aurora p-4 p-md-5 d-flex flex-column justify-content-between gap-4">
          <div>
            <span class="badge rounded-pill text-bg-light mb-3">Weekly newsletter</span>
            <h1 class="h2 fw-bold mb-3">Code that reviews itself, in your inbox.</h1>
            <p class="opacity-75 mb-0">One short email every Friday with the best HTML, CSS and JavaScript tips from the community.</p>
          </div>
          <ul class="list-unstyled small mb-0 d-grid gap-2">
            <li class="d-flex gap-2"><svg class="flex-none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg> 38,000 developers subscribed</li>
            <li class="d-flex gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg> No spam, unsubscribe anytime</li>
          </ul>
        </div>
        <div class="col-lg-8 p-4 p-md-5">
          <form id="regForm" novalidate>
            <h2 class="h5 fw-bold mb-3 d-flex align-items-center gap-2"><span class="wdw-icon" style="width:2rem;height:2rem;border-radius:.6rem;font-size:.85rem;font-weight:700">1</span> Contact information</h2>
            <div class="row g-3 mb-4">
              <div class="col-md-6"><div class="form-floating"><input type="text" class="form-control" id="rgName" placeholder="Full name" required autocomplete="name"><label for="rgName">Full name</label><div class="invalid-feedback">Please enter your name.</div></div></div>
              <div class="col-md-6"><div class="form-floating"><input type="email" class="form-control" id="rgEmail" placeholder="Email" required autocomplete="email"><label for="rgEmail">Email address</label><div class="invalid-feedback">Enter a valid email.</div></div></div>
              <div class="col-12"><div class="form-floating"><input type="text" class="form-control" id="rgAddr" placeholder="Street" autocomplete="street-address"><label for="rgAddr">Street address (optional)</label></div></div>
              <div class="col-md-5"><div class="form-floating"><input type="text" class="form-control" id="rgCity" placeholder="City" autocomplete="address-level2"><label for="rgCity">City</label></div></div>
              <div class="col-6 col-md-4"><div class="form-floating"><select class="form-select" id="rgState" autocomplete="address-level1"><option value="">Choose</option><option>California</option><option>New York</option><option>Texas</option><option>Washington</option></select><label for="rgState">State</label></div></div>
              <div class="col-6 col-md-3"><div class="form-floating"><input type="text" class="form-control" id="rgZip" placeholder="Zip" inputmode="numeric" autocomplete="postal-code"><label for="rgZip">Zip code</label></div></div>
            </div>

            <h2 class="h5 fw-bold mb-3 d-flex align-items-center gap-2"><span class="wdw-icon" style="width:2rem;height:2rem;border-radius:.6rem;font-size:.85rem;font-weight:700">2</span> Preferences</h2>
            <fieldset class="mb-3">
              <legend class="form-label small fw-semibold text-body-secondary">Topics</legend>
              <div class="d-flex flex-wrap gap-2">
                <input type="checkbox" class="btn-check" id="tpHtml" checked><label class="btn btn-outline-primary btn-sm rounded-pill px-3" for="tpHtml">HTML</label>
                <input type="checkbox" class="btn-check" id="tpCss"><label class="btn btn-outline-primary btn-sm rounded-pill px-3" for="tpCss">CSS</label>
                <input type="checkbox" class="btn-check" id="tpJs"><label class="btn btn-outline-primary btn-sm rounded-pill px-3" for="tpJs">JavaScript</label>
              </div>
            </fieldset>
            <div class="row g-3 mb-4">
              <div class="col-md-6">
                <fieldset>
                  <legend class="form-label small fw-semibold text-body-secondary">Format</legend>
                  <div class="btn-group w-100" role="group">
                    <input type="radio" class="btn-check" name="fmt" id="fmtHtml" checked><label class="btn btn-outline-primary rounded-start-pill" for="fmtHtml">HTML</label>
                    <input type="radio" class="btn-check" name="fmt" id="fmtText"><label class="btn btn-outline-primary rounded-end-pill" for="fmtText">Plain text</label>
                  </div>
                </fieldset>
              </div>
              <div class="col-md-6">
                <label for="rgSource" class="form-label small fw-semibold text-body-secondary">How did you find us?</label>
                <select class="form-select" id="rgSource"><option>Search engine</option><option>Social media</option><option>A friend</option><option>Other</option></select>
              </div>
            </div>
            <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3">
              <p class="small text-body-secondary mb-0" role="status" aria-live="polite" id="rgStatus"></p>
              <button type="submit" class="btn btn-primary rounded-pill px-5">Subscribe</button>
            </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 Form snippets