Web Designer Wall

Snippets Login

Bootstrap 5 Dual Registration Form with Employee/Hirer Tabs

A split-panel registration screen with a pill switch between employee and hirer sign-up forms, each with clearly labelled fields.

Bootstrap 5 No jQuery May 2019 7.4K views 

<section class="wdw-stage dr-stage">
  <div class="container" style="max-width:1020px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-4 wdw-aurora dr-side d-flex flex-column justify-content-between p-4 p-lg-5">
          <div class="d-flex align-items-center gap-2 fw-bold">
            <span class="dr-logo" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l18-8-8 18-2-8-8-2z"/></svg></span>
            Workbridge
          </div>
          <div class="my-4">
            <h2 class="h2 fw-bold lh-sm mb-3">Welcome aboard</h2>
            <p class="mb-0 opacity-75">You are 30 seconds away from earning your own money, or from hiring your next teammate.</p>
          </div>
          <div class="d-flex align-items-center gap-3">
            <span class="small opacity-75">Already registered?</span>
            <a href="#" class="btn btn-light btn-sm rounded-pill px-3 fw-semibold">Log in</a>
          </div>
        </div>
        <div class="col-lg-8 p-4 p-md-5">
          <div class="d-flex justify-content-center justify-content-lg-end mb-4">
            <div class="nav nav-pills dr-switch bg-body-tertiary rounded-pill p-1" role="tablist" aria-label="Account type">
              <button class="nav-link rounded-pill active" id="dr-tab-emp" data-bs-toggle="pill" data-bs-target="#dr-emp" type="button" role="tab" aria-controls="dr-emp" aria-selected="true">Employee</button>
              <button class="nav-link rounded-pill" id="dr-tab-hire" data-bs-toggle="pill" data-bs-target="#dr-hire" type="button" role="tab" aria-controls="dr-hire" aria-selected="false">Hirer</button>
            </div>
          </div>
          <div class="tab-content">
            <div class="tab-pane fade show active" id="dr-emp" role="tabpanel" aria-labelledby="dr-tab-emp" tabindex="0">
              <h3 class="wdw-heading h3 mb-1">Apply as an employee</h3>
              <p class="wdw-muted mb-4">Create a profile and start getting matched with paid work.</p>
              <form class="row g-3" novalidate>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-e-first">First name</label><input type="text" class="form-control" id="dr-e-first" autocomplete="given-name" placeholder="Ava"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-e-last">Last name</label><input type="text" class="form-control" id="dr-e-last" autocomplete="family-name" placeholder="Morgan"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-e-email">Email</label><input type="email" class="form-control" id="dr-e-email" autocomplete="email" placeholder="[email protected]"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-e-phone">Phone</label><input type="tel" class="form-control" id="dr-e-phone" autocomplete="tel" placeholder="(555) 010-2030"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-e-pass">Password</label><input type="password" class="form-control" id="dr-e-pass" autocomplete="new-password" placeholder="At least 8 characters"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-e-pass2">Confirm password</label><input type="password" class="form-control" id="dr-e-pass2" autocomplete="new-password" placeholder="Repeat password"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-e-q">Security question</label>
                  <select class="form-select" id="dr-e-q"><option selected>What is your pet's name?</option><option>What city were you born in?</option><option>What was your first school?</option></select></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-e-a">Answer</label><input type="text" class="form-control" id="dr-e-a" placeholder="Your answer"></div>
                <div class="col-12 d-flex flex-wrap align-items-center justify-content-between gap-3 pt-2">
                  <div class="d-flex gap-3">
                    <div class="form-check"><input class="form-check-input" type="radio" name="dr-gender" id="dr-g1" checked><label class="form-check-label" for="dr-g1">Male</label></div>
                    <div class="form-check"><input class="form-check-input" type="radio" name="dr-gender" id="dr-g2"><label class="form-check-label" for="dr-g2">Female</label></div>
                  </div>
                  <button type="submit" class="btn btn-primary rounded-pill px-4">Create employee account</button>
                </div>
              </form>
            </div>
            <div class="tab-pane fade" id="dr-hire" role="tabpanel" aria-labelledby="dr-tab-hire" tabindex="0">
              <h3 class="wdw-heading h3 mb-1">Register as a hirer</h3>
              <p class="wdw-muted mb-4">Post roles and reach vetted candidates in your area.</p>
              <form class="row g-3" novalidate>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-h-co">Company name</label><input type="text" class="form-control" id="dr-h-co" autocomplete="organization" placeholder="Northwind Ltd"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-h-name">Contact person</label><input type="text" class="form-control" id="dr-h-name" autocomplete="name" placeholder="Jordan Lee"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-h-email">Work email</label><input type="email" class="form-control" id="dr-h-email" autocomplete="email" placeholder="[email protected]"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-h-phone">Phone</label><input type="tel" class="form-control" id="dr-h-phone" autocomplete="tel" placeholder="(555) 010-2030"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-h-pass">Password</label><input type="password" class="form-control" id="dr-h-pass" autocomplete="new-password" placeholder="At least 8 characters"></div>
                <div class="col-md-6"><label class="form-label small fw-semibold" for="dr-h-size">Team size</label>
                  <select class="form-select" id="dr-h-size"><option selected>1–10 people</option><option>11–50 people</option><option>51–200 people</option><option>200+ people</option></select></div>
                <div class="col-12 d-flex flex-wrap align-items-center justify-content-between gap-3 pt-2">
                  <div class="form-check"><input class="form-check-input" type="checkbox" id="dr-h-terms"><label class="form-check-label" for="dr-h-terms">I agree to the terms</label></div>
                  <button type="submit" class="btn btn-primary rounded-pill px-4">Create hirer account</button>
                </div>
              </form>
            </div>
          </div>
        </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 login snippets