Web Designer Wall

Snippets Registration

Bootstrap 5 Registration Form Card

A sign-up card with social buttons, a divider, floating-label fields, a phone input with country code and a job type select. Password fields are validated on submit.

Bootstrap 5 No jQuery Aug 2019 2.2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:720px">
    <div class="wdw-card p-4 p-md-5">
      <div id="regPanel">
        <div class="text-center mb-4">
          <span class="wdw-icon mb-3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg></span>
          <h2 class="wdw-heading h3 mb-1">Create account</h2>
          <p class="wdw-muted mb-0">Get started with your free account</p>
        </div>
        <div class="row g-2 mb-3">
          <div class="col-6"><button type="button" class="btn btn-outline-secondary rf-social w-100 rounded-pill"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/><path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09C3.26 21.3 7.31 24 12 24z"/><path fill="#FBBC05" d="M5.27 14.29A7.2 7.2 0 0 1 4.89 12c0-.79.14-1.56.38-2.29V6.62H1.29A11.99 11.99 0 0 0 0 12c0 1.94.46 3.77 1.29 5.38l3.98-3.09z"/><path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.7 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z"/></svg> Google</button></div>
          <div class="col-6"><button type="button" class="btn btn-outline-secondary rf-social w-100 rounded-pill"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3z"/></svg> GitHub</button></div>
        </div>
        <div class="rf-or text-center small wdw-muted mb-3"><span>or with email</span></div>
        <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="rfName" placeholder="Full name" autocomplete="name" required><label for="rfName">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="email" class="form-control" id="rfEmail" placeholder="Email" autocomplete="email" required><label for="rfEmail">Email address</label><div class="invalid-feedback">Enter a valid email.</div></div></div>
            <div class="col-sm-6"><div class="form-floating"><input type="tel" class="form-control" id="rfPhone" placeholder="Phone" autocomplete="tel"><label for="rfPhone">Phone (optional)</label></div></div>
            <div class="col-sm-6"><div class="form-floating"><select class="form-select" id="rfJob" required><option value="" selected></option><option>Designer</option><option>Developer</option><option>Product manager</option><option>Founder</option></select><label for="rfJob">Job type</label><div class="invalid-feedback">Choose a job type.</div></div></div>
            <div class="col-sm-6">
              <div class="input-group has-validation">
                <div class="form-floating"><input type="password" class="form-control" id="rfPass" placeholder="Password" minlength="8" autocomplete="new-password" required><label for="rfPass">Password (8+ characters)</label></div>
                <button type="button" class="btn btn-outline-secondary rf-eye" id="rfToggle" aria-label="Show passwords" aria-pressed="false"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.600-7 10-7 10 7 10 7-3.600 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg></button>
                <div class="invalid-feedback">Use at least 8 characters.</div>
              </div>
              <div class="progress mt-2" style="height:6px" role="progressbar" aria-label="Password strength" aria-valuenow="0" aria-valuemin="0" aria-valuemax="4" id="rfMeter"><div class="progress-bar" id="rfMeterBar" style="width:0"></div></div>
              <div class="form-text" id="rfMeterText">Use letters, numbers and symbols.</div>
            </div>
            <div class="col-sm-6"><div class="form-floating"><input type="password" class="form-control" id="rfPass2" placeholder="Repeat" autocomplete="new-password" required><label for="rfPass2">Repeat password</label><div class="invalid-feedback" id="rfPass2Msg">Passwords must match.</div></div></div>
            <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="rfTerms" required><label class="form-check-label" for="rfTerms">I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a></label><div class="invalid-feedback">You need to accept the terms.</div></div></div>
            <div class="col-12"><button type="submit" class="btn btn-primary rounded-pill w-100">Create account</button></div>
          </div>
        </form>
        <p class="text-center small wdw-muted mt-4 mb-0">Have an account? <a href="#" class="fw-semibold">Log in</a></p>
      </div>
      <div id="regDone" class="text-center py-4" hidden>
        <span class="wdw-icon mb-3 bg-success-subtle text-success"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.500 4.500L19 7.500"/></svg></span>
        <h2 class="wdw-heading h3 mb-1" tabindex="-1" id="regDoneTitle">You are all set</h2>
        <p class="wdw-muted mb-4" role="status">Welcome aboard. We sent a confirmation link to your email.</p>
        <button type="button" class="btn btn-outline-primary rounded-pill px-4" id="regReset">Start over</button>
      </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 registration snippets