Web Designer Wall

Snippets Form

Bootstrap 5 Form with Progress Bar Tracking

A subscription billing form with a live completion bar that updates its encouragement message as each required field becomes valid, beside a plan summary panel.

Bootstrap 5 No jQuery May 2019 2.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width:980px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <aside class="col-lg-5 wdw-aurora p-4 p-lg-5 d-flex flex-column">
          <span class="badge rounded-pill text-bg-light align-self-start mb-4">Pro plan</span>
          <h1 class="h2 fw-bold mb-2">Start your subscription</h1>
          <p class="opacity-75 mb-4">Add your billing details. We will only charge you after the 14-day trial ends.</p>
          <div class="display-5 fw-bold mb-1">$19<span class="fs-6 fw-normal opacity-75"> / month</span></div>
          <hr class="my-4 opacity-25">
          <ul class="list-unstyled mb-0 small"><li class="d-flex gap-2 mb-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-1"><path d="M20 6 9 17l-5-5"/></svg><span>Unlimited projects and teammates</span></li><li class="d-flex gap-2 mb-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-1"><path d="M20 6 9 17l-5-5"/></svg><span>Priority support, 24h response</span></li><li class="d-flex gap-2 mb-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-1"><path d="M20 6 9 17l-5-5"/></svg><span>Cancel any time, no questions</span></li></ul>
        </aside>
        <div class="col-lg-7 p-4 p-lg-5">
          <form id="progressForm" novalidate onsubmit="return false">
            <div class="d-flex justify-content-between align-items-baseline mb-2">
              <span class="fw-semibold" id="pfMessage" aria-live="polite">Let us get you set up.</span>
              <span class="small fw-semibold text-primary" id="pfPercent">0%</span>
            </div>
            <div class="progress mb-4" role="progressbar" aria-label="Form completion" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="pfBar" style="height:.6rem"><div class="progress-bar rounded-pill" style="width:0"></div></div>
            <div class="row g-3">
              <div class="col-12"><label for="cardName" class="form-label small fw-semibold">Name on card</label><input id="cardName" class="form-control" type="text" required autocomplete="cc-name" placeholder="Ada Lovelace"></div>
              <div class="col-12"><label for="addr1" class="form-label small fw-semibold">Street address</label><input id="addr1" class="form-control mb-2" type="text" required autocomplete="address-line1" placeholder="12 Analytical Way"><label for="addr2" class="visually-hidden">Apartment, suite (optional)</label><input id="addr2" class="form-control" type="text" autocomplete="address-line2" placeholder="Apartment, suite (optional)"></div>
              <div class="col-sm-5"><label for="zip" class="form-label small fw-semibold">Zip code</label><input id="zip" class="form-control" type="text" inputmode="numeric" pattern="[0-9]{4,10}" maxlength="10" required autocomplete="postal-code" placeholder="94107"></div>
              <div class="col-sm-7"><label for="cardNum" class="form-label small fw-semibold">Card number</label><input id="cardNum" class="form-control" type="text" inputmode="numeric" pattern="[0-9 ]{15,19}" maxlength="19" required autocomplete="cc-number" placeholder="4242 4242 4242 4242"></div>
              <div class="col-sm-4"><label for="cvv" class="form-label small fw-semibold">CVV</label><input id="cvv" class="form-control" type="text" inputmode="numeric" pattern="[0-9]{3,4}" maxlength="4" required autocomplete="cc-csc" placeholder="123"></div>
              <div class="col-sm-4 col-6"><label for="expMonth" class="form-label small fw-semibold">Expiry month</label><select id="expMonth" class="form-select" required autocomplete="cc-exp-month"><option value="" selected disabled>Month</option><option value="1">01 - January</option><option value="2">02 - February</option><option value="3">03 - March</option><option value="4">04 - April</option><option value="5">05 - May</option><option value="6">06 - June</option><option value="7">07 - July</option><option value="8">08 - August</option><option value="9">09 - September</option><option value="10">10 - October</option><option value="11">11 - November</option><option value="12">12 - December</option></select></div>
              <div class="col-sm-4 col-6"><label for="expYear" class="form-label small fw-semibold">Expiry year</label><select id="expYear" class="form-select" required autocomplete="cc-exp-year"><option value="" selected disabled>Year</option></select></div>
            </div>
            <button type="submit" id="pfSubmit" class="btn btn-primary rounded-pill w-100 mt-4" disabled>Subscribe</button>
            <p class="small wdw-muted text-center mt-3 mb-0">Payments are encrypted. This demo form does not send data anywhere.</p>
          </form>
        </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