Web Designer Wall

Snippets Form

Bootstrap 5 Sign In / Sign Up Form with Switch

A split-screen authentication card that switches between sign in and sign up panels, with a photo panel beside the form.

Bootstrap 5 No jQuery Nov 2020 2.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width:900px">
    <div class="wdw-card overflow-hidden" id="authCard">
      <div class="row g-0">
        <div class="col-md-6 p-4 p-md-5 order-1">
          <p class="visually-hidden" role="status" aria-live="polite" id="authStatus"></p>
          <div id="signinPane" class="wdw-pane">
            <h2 class="wdw-heading h3 mb-1">Welcome back</h2>
            <p class="wdw-muted mb-4">Sign in to your account to continue.</p>
            <div class="d-flex gap-2 mb-3">
              <button class="btn btn-outline-secondary text-body-emphasis flex-fill rounded-pill wdw-social" type="button"><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.500 12h-8M20 12a8.500 8.500 0 1 1-2.600-6.100"/></svg>Google</button>
              <button class="btn btn-outline-secondary text-body-emphasis flex-fill rounded-pill wdw-social" type="button"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.500 11.500 0 0 0-3.600 22.400c.6.100.8-.3.8-.6v-2c-3.200.7-3.900-1.500-3.900-1.500-.5-1.300-1.300-1.700-1.300-1.700-1-.7.100-.7.100-.7 1.200.1 1.800 1.200 1.800 1.200 1 1.800 2.800 1.300 3.400 1 .1-.8.400-1.300.7-1.600-2.600-.3-5.300-1.300-5.300-5.700 0-1.300.5-2.300 1.200-3.100-.1-.3-.5-1.500.1-3.100 0 0 1-.3 3.200 1.200a11 11 0 0 1 5.800 0c2.200-1.500 3.200-1.200 3.200-1.200.6 1.600.2 2.800.1 3.100.8.800 1.200 1.800 1.200 3.100 0 4.400-2.700 5.400-5.300 5.700.4.400.8 1.100.8 2.200v3.200c0 .3.2.7.8.6A11.500 11.500 0 0 0 12 .5z"/></svg>GitHub</button>
            </div>
            <p class="text-center small wdw-muted mb-3">or use your email</p>
            <form novalidate>
              <div class="form-floating mb-3"><input type="email" class="form-control" id="inEmail" placeholder="Email" autocomplete="email"><label for="inEmail">Email</label></div>
              <div class="form-floating mb-2"><input type="password" class="form-control" id="inPass" placeholder="Password" autocomplete="current-password"><label for="inPass">Password</label></div>
              <a href="#" class="d-inline-block mb-4 fw-semibold link-underline link-underline-opacity-0 link-underline-opacity-100-hover">Forgot your password?</a>
              <button class="btn btn-primary rounded-pill w-100" type="submit">Sign in</button>
            </form>
            <p class="d-md-none text-center small wdw-muted mt-3 mb-0">New here? <button type="button" class="btn btn-link p-0 align-baseline fw-semibold link-underline link-underline-opacity-0" data-switch>Create an account</button></p>
          </div>
          <div id="signupPane" class="wdw-pane" hidden>
            <h2 class="wdw-heading h3 mb-1">Create account</h2>
            <p class="wdw-muted mb-4">Join in less than a minute.</p>
            <form novalidate>
              <div class="form-floating mb-3"><input type="text" class="form-control" id="upName" placeholder="Name" autocomplete="name"><label for="upName">Full name</label></div>
              <div class="form-floating mb-3"><input type="email" class="form-control" id="upEmail" placeholder="Email" autocomplete="email"><label for="upEmail">Email</label></div>
              <div class="form-floating mb-1"><input type="password" class="form-control" id="upPass" placeholder="Password" autocomplete="new-password" aria-describedby="upHint"><label for="upPass">Password</label></div>
              <p class="form-text small mb-3" id="upHint">Use 8 or more characters with a mix of letters and numbers.</p>
              <div class="form-check mb-4 d-flex align-items-start gap-2 ps-0"><input class="form-check-input mt-1 flex-shrink-0 ms-0" type="checkbox" id="upTerms"><label class="form-check-label small" for="upTerms">I agree to the <a href="#" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover">terms</a> and <a href="#" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover">privacy policy</a>.</label></div>
              <button class="btn btn-primary rounded-pill w-100" type="submit">Sign up</button>
            </form>
            <p class="d-md-none text-center small wdw-muted mt-3 mb-0">Already a member? <button type="button" class="btn btn-link p-0 align-baseline fw-semibold link-underline link-underline-opacity-0" data-switch>Sign in</button></p>
          </div>
        </div>
        <div class="col-md-6 order-2 wdw-auth-side d-flex flex-column justify-content-end p-4 p-md-5 text-white">
          <div class="position-relative">
            <h3 class="wdw-heading text-white h2 mb-2" id="sideTitle">New here?</h3>
            <p class="mb-4" id="sideText">Create an account and start booking tables in your favourite places.</p>
            <button class="btn btn-light rounded-pill px-4" type="button" id="switchBtn" data-switch>Sign up</button>
          </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 Form snippets