Web Designer Wall

Snippets Checkbox

Bootstrap 5 Contact Form with Topic Chips and Checkboxes

A profile contact card with a quick-reply form, topic chips and consent checkboxes.

Bootstrap 5 Bootstrap 6 No jQuery Jun 2020 2.6K views 

<section class="wdw-stage">
  <div class="container" style="max-width:840px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-md-5 border-end-md">
          <div class="wdw-aurora wdw-profile-band" aria-hidden="true"></div>
          <div class="px-4 pb-4 pb-md-5 text-center text-md-start">
            <img class="rounded-circle wdw-avatar" src="https://i.pravatar.cc/120?img=47" width="88" height="88" alt="Portrait of Maya Chen">
            <h1 class="h4 fw-bold mt-3 mb-1 d-flex flex-wrap justify-content-center justify-content-md-start align-items-center gap-2">Maya Chen
              <span class="badge bg-success-subtle text-success-emphasis rounded-pill" style="--bs-badge-font-size:.7rem">Verified</span></h1>
            <div class="small wdw-muted mb-3">Front-end developer · Riga</div>
            <div class="d-flex align-items-center justify-content-center justify-content-md-start gap-2 rounded-3 bg-warning-subtle text-warning-emphasis small px-3 py-2 mb-3" role="note">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
              121 people viewed this profile recently
            </div>
            <ul class="list-unstyled d-grid gap-2 mb-0 text-start small">
              <li class="d-flex align-items-center gap-3"><span class="wdw-icon" style="width:2.25rem;height:2.25rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg></span><span class="fw-semibold">Verified listing</span></li>
              <li class="d-flex align-items-center gap-3"><span class="wdw-icon" style="width:2.25rem;height:2.25rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><circle cx="12" cy="12" r="3.5"/></svg></span><span class="fw-semibold">Real photos</span></li>
              <li class="d-flex align-items-center gap-3"><span class="wdw-icon" style="width:2.25rem;height:2.25rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 8l-4 4 4 4M16 8l4 4-4 4M14 5l-4 14"/></svg></span><span class="fw-semibold">Verified snippets</span></li>
              <li class="d-flex align-items-center gap-3"><span class="wdw-icon" style="width:2.25rem;height:2.25rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg></span><span class="fw-semibold">+371 2000 0000</span></li>
            </ul>
          </div>
        </div>
        <div class="col-md-7 p-4 p-md-5">
          <form id="contact-form" novalidate>
            <h2 class="h5 fw-bold mb-3">Contact Maya</h2>
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="cf-name" placeholder="Name" required autocomplete="name" aria-describedby="cf-name-fb">
              <label for="cf-name">Name</label>
              <div class="invalid-feedback" id="cf-name-fb">Please enter your name.</div>
            </div>
            <div class="form-floating mb-3">
              <input type="tel" class="form-control" id="cf-phone" placeholder="Phone" autocomplete="tel">
              <label for="cf-phone">Phone</label>
            </div>
            <div class="form-floating mb-4">
              <input type="email" class="form-control" id="cf-email" placeholder="Email" required autocomplete="email" aria-describedby="cf-email-fb">
              <label for="cf-email">Email address</label>
              <div class="invalid-feedback" id="cf-email-fb">Please enter a valid email.</div>
            </div>
            <fieldset class="mb-4">
              <legend class="fs-6 fw-semibold mb-2">I would like to know more about</legend>
              <div class="d-flex flex-wrap gap-2">
                <input type="radio" class="btn-check" name="topic" id="t1" autocomplete="off" checked>
                <label class="btn btn-outline-primary rounded-pill btn-sm px-3" for="t1">Web design</label>
                <input type="radio" class="btn-check" name="topic" id="t2" autocomplete="off">
                <label class="btn btn-outline-primary rounded-pill btn-sm px-3" for="t2">Code</label>
                <input type="radio" class="btn-check" name="topic" id="t3" autocomplete="off">
                <label class="btn btn-outline-primary rounded-pill btn-sm px-3" for="t3">Advice</label>
              </div>
            </fieldset>
            <button type="submit" class="btn btn-primary rounded-pill w-100 mb-3" id="cf-submit">Get contact details</button>
            <div class="form-check mb-2">
              <input class="form-check-input" type="checkbox" id="cf-share" checked>
              <label class="form-check-label small" for="cf-share">Allow other sellers to get in touch</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="cf-web">
              <label class="form-check-label small" for="cf-web">I am interested in web development</label>
            </div>
            <div id="cf-result" class="alert alert-success small mt-3 mb-0 d-none" role="status" tabindex="-1">Thanks! Maya will reply within one working day.</div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More checkbox snippets