Web Designer Wall

Snippets Form

Bootstrap 5 Registration Form with Validation

A split-layout registration form with a brand panel, floating-label fields, pill radio options and built-in validation messages. The username field accepts lowercase letters only.

Bootstrap 5 No jQuery Dec 2020 11.1K views 

<section class="wdw-stage reg-stage">
  <div class="container" style="max-width: 1040px;">
    <div class="card wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-lg-5 wdw-aurora text-white p-4 p-lg-5 d-flex flex-column justify-content-between">
          <div>
            <span class="badge rounded-pill bg-white bg-opacity-25 px-3 py-2 mb-4">Autumn cohort</span>
            <h1 class="display-6 fw-bold mb-3">Create your account</h1>
            <p class="opacity-75 mb-4">Join the Advanced Java course. Applications close on 15 November and seats are limited.</p>
          </div>
          <ul class="list-unstyled mb-0 d-grid gap-3 small">
            <li class="d-flex gap-3 align-items-start"><span class="reg-tick" aria-hidden="true">✓</span><span>12 weeks of live mentoring</span></li>
            <li class="d-flex gap-3 align-items-start"><span class="reg-tick" aria-hidden="true">✓</span><span>Real-world capstone project</span></li>
            <li class="d-flex gap-3 align-items-start"><span class="reg-tick" aria-hidden="true">✓</span><span>Certificate on completion</span></li>
          </ul>
        </aside>

        <div class="col-lg-7 bg-body p-4 p-lg-5">
          <form id="regForm" novalidate>
            <div class="row g-3">
              <div class="col-sm-6">
                <div class="form-floating">
                  <input type="text" class="form-control" id="regName" placeholder="Full name" required autocomplete="name">
                  <label for="regName">Full name</label>
                  <div class="invalid-feedback">Please enter your name.</div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating">
                  <input type="text" class="form-control" id="regUser" placeholder="Username" required pattern="[a-z]+" autocomplete="username">
                  <label for="regUser">Username</label>
                  <div class="invalid-feedback">Lowercase letters only.</div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating">
                  <input type="email" class="form-control" id="regEmail" placeholder="Email" required autocomplete="email">
                  <label for="regEmail">Email address</label>
                  <div class="invalid-feedback">Enter a valid email address.</div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating">
                  <select class="form-select" id="regLevel" required>
                    <option value="" selected disabled>Choose</option>
                    <option>Beginner</option>
                    <option>Intermediate</option>
                    <option>Advanced</option>
                  </select>
                  <label for="regLevel">Experience level</label>
                  <div class="invalid-feedback">Pick a level.</div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating">
                  <select class="form-select" id="regTrack" required>
                    <option value="" selected disabled>Choose</option>
                    <option>Backend</option>
                    <option>Android</option>
                    <option>Data</option>
                  </select>
                  <label for="regTrack">Track</label>
                  <div class="invalid-feedback">Pick a track.</div>
                </div>
              </div>
              <div class="col-12">
                <fieldset>
                  <legend class="form-label fs-6 fw-medium">Schedule</legend>
                  <div class="d-flex flex-wrap gap-2" role="radiogroup">
                    <input type="radio" class="btn-check" name="regSchedule" id="regS1" value="weekday" checked>
                    <label class="btn btn-outline-secondary rounded-pill px-3" for="regS1">Weekday evenings</label>
                    <input type="radio" class="btn-check" name="regSchedule" id="regS2" value="weekend">
                    <label class="btn btn-outline-secondary rounded-pill px-3" for="regS2">Weekends</label>
                    <input type="radio" class="btn-check" name="regSchedule" id="regS3" value="self">
                    <label class="btn btn-outline-secondary rounded-pill px-3" for="regS3">Self-paced</label>
                  </div>
                </fieldset>
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="regTerms" required>
                  <label class="form-check-label small text-body-secondary" for="regTerms">I have read the course information and agree to the terms.</label>
                  <div class="invalid-feedback">You must agree to continue.</div>
                </div>
              </div>
              <div class="col-12">
                <button type="submit" class="btn btn-primary btn-lg w-100 rounded-3">Submit application</button>
                <div id="regOk" class="alert alert-success d-none mt-3 mb-0" role="status">Thanks, your application was received. Check your inbox for next steps.</div>
              </div>
            </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.

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

Related snippets

More Form snippets