Web Designer Wall

Snippets Form

Bootstrap 5 Login and Register Form with Sliding Panel

A login and registration card with a sliding overlay panel that swaps between the two forms, with social sign-in buttons, password visibility toggles and live password matching. On small screens the forms switch with a simple link.

Bootstrap 5 No jQuery Nov 2020 2.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width:920px">
    <div class="auth wdw-card overflow-hidden" id="authCard" data-mode="signin">
      <div class="auth-strip wdw-aurora d-md-none"><span class="wdw-eyebrow text-white-50">Designer community</span></div>
      <div class="auth-pane auth-signin" id="paneIn">
        <form class="w-100" novalidate onsubmit="return false">
          <h1 class="h3 wdw-heading mb-1">Welcome back</h1>
          <p class="wdw-muted mb-4">Log in to pick up where you left off.</p>
<div class="d-flex gap-2 mb-3">
  <button type="button" class="btn btn-outline-secondary auth-social rounded-pill flex-fill"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> GitHub</button>
  <button type="button" class="btn btn-outline-secondary auth-social rounded-pill flex-fill"><span class="fw-bold" aria-hidden="true">G</span> Google</button>
</div>
<div class="d-flex align-items-center gap-3 mb-3 text-body-secondary small"><hr class="flex-fill m-0"><span>or continue with email</span><hr class="flex-fill m-0"></div>
          <div class="mb-3">
            <label for="inEmail" class="form-label small fw-semibold">Email address</label>
            <input type="email" id="inEmail" class="form-control" placeholder="[email protected]" required autocomplete="email">
          </div>
<div class="mb-3">
  <label for="inPass" class="form-label small fw-semibold">Password</label>
  <div class="position-relative">
    <input type="password" id="inPass" class="form-control pe-5" placeholder="Your password" required autocomplete="current-password">
    <button type="button" class="pw-toggle" data-pw-toggle="inPass" aria-label="Show password" aria-pressed="false"><svg class="eye-on" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg><svg class="eye-off" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.9 17.9A10.4 10.4 0 0 1 12 19C5.6 19 2 12 2 12a18.5 18.5 0 0 1 5.1-5.9M9.9 5.2A9.7 9.7 0 0 1 12 5c6.4 0 10 7 10 7a18.6 18.6 0 0 1-2.2 3.2M1 1l22 22"/></svg></button>
  </div>
</div>
          <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="form-check"><input class="form-check-input" type="checkbox" id="remember"><label class="form-check-label small" for="remember">Remember me</label></div>
            <a href="#" class="small fw-semibold">Forgot password?</a>
          </div>
          <button type="submit" class="btn btn-primary rounded-pill w-100">Log in</button>
          <p class="text-center small wdw-muted mt-3 mb-0 d-md-none">New here? <button type="button" class="btn btn-link p-0 align-baseline fw-semibold" data-auth-go="signup">Create an account</button></p>
        </form>
      </div>
      <div class="auth-pane auth-signup" id="paneUp">
        <form class="w-100" novalidate onsubmit="return false">
          <h2 class="h3 wdw-heading mb-1">Create your account</h2>
          <p class="wdw-muted mb-4">Free for 14 days, no card required.</p>
          <div class="row g-3 mb-3">
            <div class="col-sm-6"><label for="upName" class="form-label small fw-semibold">Full name</label><input type="text" id="upName" class="form-control" placeholder="Ada Lovelace" required autocomplete="name"></div>
            <div class="col-sm-6"><label for="upPhone" class="form-label small fw-semibold">Phone</label><input type="tel" id="upPhone" class="form-control" placeholder="+1 555 0100" autocomplete="tel"></div>
          </div>
          <div class="mb-3">
            <label for="upEmail" class="form-label small fw-semibold">Email address</label>
            <input type="email" id="upEmail" class="form-control" placeholder="[email protected]" required autocomplete="email">
          </div>
<div class="mb-3">
  <label for="upPass" class="form-label small fw-semibold">Password</label>
  <div class="position-relative">
    <input type="password" id="upPass" class="form-control pe-5" placeholder="At least 8 characters" required autocomplete="new-password">
    <button type="button" class="pw-toggle" data-pw-toggle="upPass" aria-label="Show password" aria-pressed="false"><svg class="eye-on" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg><svg class="eye-off" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.9 17.9A10.4 10.4 0 0 1 12 19C5.6 19 2 12 2 12a18.5 18.5 0 0 1 5.1-5.9M9.9 5.2A9.7 9.7 0 0 1 12 5c6.4 0 10 7 10 7a18.6 18.6 0 0 1-2.2 3.2M1 1l22 22"/></svg></button>
  </div>
</div>
          <div class="mb-3">
            <label for="upPass2" class="form-label small fw-semibold">Repeat password</label>
            <div class="position-relative">
              <input type="password" id="upPass2" class="form-control pe-5" placeholder="Repeat password" required autocomplete="new-password" aria-describedby="upMatch">
              <button type="button" class="pw-toggle" data-pw-toggle="upPass2" aria-label="Show password" aria-pressed="false"><svg class="eye-on" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg><svg class="eye-off" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.9 17.9A10.4 10.4 0 0 1 12 19C5.6 19 2 12 2 12a18.5 18.5 0 0 1 5.1-5.9M9.9 5.2A9.7 9.7 0 0 1 12 5c6.4 0 10 7 10 7a18.6 18.6 0 0 1-2.2 3.2M1 1l22 22"/></svg></button>
            </div>
            <div id="upMatch" class="form-text" aria-live="polite"></div>
          </div>
          <button type="submit" class="btn btn-primary rounded-pill w-100 mt-2">Create account</button>
          <p class="text-center small wdw-muted mt-3 mb-0 d-md-none">Already registered? <button type="button" class="btn btn-link p-0 align-baseline fw-semibold" data-auth-go="signin">Log in</button></p>
        </form>
      </div>
      <div class="auth-overlay wdw-aurora d-none d-md-flex">
        <div class="auth-overlay-inner" data-for="signin">
          <p class="h2 fw-bold mb-3">New here?</p>
          <p class="opacity-75 mb-4">Create an account and join a community of 20,000 designers shipping faster.</p>
          <button type="button" class="btn btn-outline-light rounded-pill px-4" data-auth-go="signup">Sign up</button>
        </div>
        <div class="auth-overlay-inner" data-for="signup">
          <p class="h2 fw-bold mb-3">Welcome back</p>
          <p class="opacity-75 mb-4">Already have an account? Log in to keep working on your projects.</p>
          <button type="button" class="btn btn-outline-light rounded-pill px-4" data-auth-go="signin">Log 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