Web Designer Wall

Snippets Form

Bootstrap 5 Sliding Sign In and Sign Up Form

A sign in and sign up card where a gradient panel slides between two forms on desktop and a segmented switch toggles them on mobile.

Bootstrap 5 No jQuery Nov 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:920px">
    <div class="wdw-auth wdw-card overflow-hidden" id="wdwAuth" data-mode="signin">
      <!-- Mobile segmented switch -->
      <div class="wdw-auth-switch d-md-none p-3 pb-0">
        <div class="btn-group w-100" role="group" aria-label="Choose form">
          <input type="radio" class="btn-check" name="wdwMode" id="wdwModeIn" autocomplete="off" checked>
          <label class="btn btn-outline-primary rounded-start-pill" for="wdwModeIn">Sign in</label>
          <input type="radio" class="btn-check" name="wdwMode" id="wdwModeUp" autocomplete="off">
          <label class="btn btn-outline-primary rounded-end-pill" for="wdwModeUp">Sign up</label>
        </div>
      </div>

      <form class="wdw-pane wdw-pane-in p-4 p-lg-5" action="#" id="wdwSignIn">
        <h1 class="wdw-heading h3 mb-1">Welcome back</h1>
        <p class="wdw-muted mb-4">Sign in to pick up where you left off.</p>
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="inEmail" placeholder="[email protected]" autocomplete="email" required>
          <label for="inEmail">Email address</label>
        </div>
        <div class="form-floating mb-2">
          <input type="password" class="form-control" id="inPass" placeholder="Password" autocomplete="current-password" required>
          <label for="inPass">Password</label>
        </div>
        <div class="d-flex justify-content-between align-items-center mb-4 small">
          <div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="inRemember"><label class="form-check-label" for="inRemember">Remember me</label></div>
          <a href="#" class="link-primary link-underline-opacity-0 fw-semibold">Forgot password?</a>
        </div>
        <button class="btn btn-primary rounded-pill w-100" type="submit">Sign in</button>
      </form>

      <form class="wdw-pane wdw-pane-up p-4 p-lg-5" action="#" id="wdwSignUp">
        <h2 class="wdw-heading h3 mb-1">Create your account</h2>
        <p class="wdw-muted mb-4">Free for 14 days. No card needed.</p>
        <div class="form-floating mb-3">
          <input type="text" class="form-control" id="upName" placeholder="Full name" autocomplete="name" required>
          <label for="upName">Full name</label>
        </div>
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="upEmail" placeholder="[email protected]" autocomplete="email" required>
          <label for="upEmail">Email address</label>
        </div>
        <div class="form-floating mb-4">
          <input type="password" class="form-control" id="upPass" placeholder="Password" autocomplete="new-password" minlength="8" required>
          <label for="upPass">Password (8+ characters)</label>
        </div>
        <button class="btn btn-primary rounded-pill w-100" type="submit">Create account</button>
      </form>

      <div class="wdw-overlay wdw-aurora d-none d-md-flex" aria-hidden="false">
        <div class="wdw-ov wdw-ov-in text-center">
          <h2 class="fw-bold mb-2">New here?</h2>
          <p class="mb-4 opacity-75">Create an account and start in under a minute.</p>
          <button class="btn btn-light rounded-pill px-4" type="button" data-mode-go="signup">Sign up</button>
        </div>
        <div class="wdw-ov wdw-ov-up text-center">
          <h2 class="fw-bold mb-2">Already a member?</h2>
          <p class="mb-4 opacity-75">Sign in with your details to continue.</p>
          <button class="btn btn-light rounded-pill px-4" type="button" data-mode-go="signin">Sign in</button>
        </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