Web Designer Wall

Snippets Form

Bootstrap 5 Event Registration Form

A race-day event registration form with floating-label fields, a state picker and pill-style shirt size selection beside an event details panel.

Bootstrap 5 No jQuery Nov 2020 3.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1040px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-lg-4 wdw-aurora p-4 p-lg-5 d-flex flex-column justify-content-between gap-4">
          <div>
            <span class="wdw-eyebrow text-white-50">Race day 2026</span>
            <h1 class="fw-bold display-6 mt-2 mb-3">iFiveK Registration</h1>
            <p class="mb-0 opacity-75">Sign up for the 5K fun run. Your shirt and bib are waiting on race day.</p>
          </div>
          <ul class="list-unstyled small mb-0 d-grid gap-2">
            <li class="d-flex gap-2 align-items-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M8 2v4M16 2v4M3 10h18"/></svg> Saturday, 18 April, 8:00 AM</li>
            <li class="d-flex gap-2 align-items-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg> Riverside Park, Main Gate</li>
            <li class="d-flex gap-2 align-items-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Free t-shirt with every entry</li>
          </ul>
        </aside>

        <form id="event-registration-form" class="col-lg-8 p-4 p-lg-5" novalidate>
          <h2 class="h5 fw-bold mb-3">Personal information</h2>
          <div class="row g-3 mb-4">
            <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="er-first" placeholder="First name" required autocomplete="given-name"><label for="er-first">First name</label></div></div>
            <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="er-last" placeholder="Last name" required autocomplete="family-name"><label for="er-last">Last name</label></div></div>
            <div class="col-12"><div class="form-floating"><input type="email" class="form-control" id="er-email" placeholder="Email" required autocomplete="email"><label for="er-email">Email address</label></div></div>
            <div class="col-sm-8"><div class="form-floating"><input type="text" class="form-control" id="er-street" placeholder="Street" autocomplete="address-line1"><label for="er-street">Street address</label></div></div>
            <div class="col-sm-4"><div class="form-floating"><input type="text" class="form-control" id="er-unit" placeholder="Unit" autocomplete="address-line2"><label for="er-unit">Unit</label></div></div>
            <div class="col-sm-5"><div class="form-floating"><input type="text" class="form-control" id="er-city" placeholder="City" autocomplete="address-level2"><label for="er-city">City</label></div></div>
            <div class="col-sm-4"><div class="form-floating"><select class="form-select" id="states" aria-label="State"><option value="">Choose…</option></select><label for="states">State</label></div></div>
            <div class="col-sm-3"><div class="form-floating"><input type="text" class="form-control" id="er-zip" placeholder="Postal code" autocomplete="postal-code" inputmode="numeric"><label for="er-zip">Postal code</label></div></div>
          </div>

          <h2 class="h5 fw-bold mb-3">Additional information</h2>
          <fieldset class="mb-3">
            <legend class="form-label small fw-semibold wdw-muted mb-2">Shirt size</legend>
            <div class="d-flex flex-wrap gap-2" role="radiogroup">
              <input type="radio" class="btn-check" name="size" id="size-xs" autocomplete="off"><label class="btn btn-outline-secondary rounded-pill size-pill" for="size-xs">XS</label>
              <input type="radio" class="btn-check" name="size" id="size-s" autocomplete="off"><label class="btn btn-outline-secondary rounded-pill size-pill" for="size-s">S</label>
              <input type="radio" class="btn-check" name="size" id="size-m" autocomplete="off" checked><label class="btn btn-outline-secondary rounded-pill size-pill" for="size-m">M</label>
              <input type="radio" class="btn-check" name="size" id="size-l" autocomplete="off"><label class="btn btn-outline-secondary rounded-pill size-pill" for="size-l">L</label>
              <input type="radio" class="btn-check" name="size" id="size-xl" autocomplete="off"><label class="btn btn-outline-secondary rounded-pill size-pill" for="size-xl">XL</label>
            </div>
          </fieldset>
          <div class="form-check mb-4">
            <input class="form-check-input" type="checkbox" id="pickup">
            <label class="form-check-label" for="pickup">I will pick up my shirt on race day.</label>
          </div>

          <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-3">
            <button type="submit" class="btn btn-primary rounded-pill px-5">Complete registration</button>
            <span id="er-status" class="small" role="status" aria-live="polite"></span>
          </div>
        </form>
      </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