Web Designer Wall

Snippets Form Wizard

Bootstrap 5 Multi-Step Form Wizard

A three-step form wizard with a progress indicator, per-step validation, back and next controls and a completion screen.

Bootstrap 5 No jQuery Jun 2019 4.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 820px">
    <form class="wdw-card overflow-hidden" id="wizard" novalidate>
      <div class="row g-0">
        <aside class="col-md-4 wdw-aurora p-4 p-md-5 d-none d-md-flex flex-column justify-content-between">
          <div>
            <span class="wdw-eyebrow text-white opacity-75">Get started</span>
            <h2 class="wdw-heading h4 text-white mt-1 mb-3">Set up in under a minute</h2>
            <p class="small opacity-75 mb-0">Three quick steps and your workspace is ready.</p>
          </div>
          <ul class="list-unstyled small mb-0 d-grid gap-2 mt-4">
            <li class="d-flex gap-2"><span aria-hidden="true">✓</span>No credit card needed</li>
            <li class="d-flex gap-2"><span aria-hidden="true">✓</span>Invite your team later</li>
            <li class="d-flex gap-2"><span aria-hidden="true">✓</span>Change anything any time</li>
          </ul>
        </aside>
        <div class="col-md-8 p-4 p-md-5">
          <ol class="wz-steps list-unstyled mb-4" id="wzSteps" aria-label="Progress"><li class="wz-step" data-step="0"><span class="wz-dot" aria-hidden="true">1</span><span class="visually-hidden wz-status"></span><span class="wz-name">Profile</span></li><li class="wz-step" data-step="1"><span class="wz-dot" aria-hidden="true">2</span><span class="visually-hidden wz-status"></span><span class="wz-name">Company</span></li><li class="wz-step" data-step="2"><span class="wz-dot" aria-hidden="true">3</span><span class="visually-hidden wz-status"></span><span class="wz-name">Finish</span></li></ol>

          <div class="wz-pane" data-pane="0">
            <h1 class="wdw-heading h3 mb-1">Tell us about you</h1>
            <p class="wdw-muted mb-4">We will use this to set up your account.</p>
            <div class="row g-3">
              <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="wzFirst" placeholder="First name" required autocomplete="given-name"><label for="wzFirst">First name</label><div class="invalid-feedback">Please enter your first name.</div></div></div>
              <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="wzLast" placeholder="Last name" required autocomplete="family-name"><label for="wzLast">Last name</label><div class="invalid-feedback">Please enter your last name.</div></div></div>
            </div>
          </div>
          <div class="wz-pane d-none" data-pane="1">
            <h1 class="wdw-heading h3 mb-1">Your company</h1>
            <p class="wdw-muted mb-4">Where do you work, and how will you use it?</p>
            <div class="d-grid gap-3">
              <div class="form-floating"><input type="text" class="form-control" id="wzCompany" placeholder="Company name" required autocomplete="organization"><label for="wzCompany">Company name</label><div class="invalid-feedback">Please enter a company name.</div></div>
              <fieldset>
                <legend class="form-label small fw-semibold">I am working as</legend>
                <div class="row g-2">
                  <div class="col-4"><input type="radio" class="btn-check" name="wzRole" id="wzR1" value="Solo" checked><label class="btn btn-outline-secondary wz-role w-100" for="wzR1">Solo</label></div>
                  <div class="col-4"><input type="radio" class="btn-check" name="wzRole" id="wzR2" value="Team"><label class="btn btn-outline-secondary wz-role w-100" for="wzR2">Team</label></div>
                  <div class="col-4"><input type="radio" class="btn-check" name="wzRole" id="wzR3" value="Agency"><label class="btn btn-outline-secondary wz-role w-100" for="wzR3">Agency</label></div>
                </div>
              </fieldset>
            </div>
          </div>
          <div class="wz-pane d-none py-2" data-pane="2">
            <h1 class="wdw-heading h3 mb-1">You are all set</h1>
            <p class="wdw-muted mb-3">Here is what we saved.</p>
            <dl class="wdw-card-sm p-3 mb-3 d-grid gap-2 small">
              <div class="d-flex justify-content-between"><dt class="fw-normal wdw-muted">Name</dt><dd class="mb-0 fw-semibold" id="wzRName"></dd></div>
              <div class="d-flex justify-content-between"><dt class="fw-normal wdw-muted">Company</dt><dd class="mb-0 fw-semibold" id="wzRCompany"></dd></div>
              <div class="d-flex justify-content-between"><dt class="fw-normal wdw-muted">Working as</dt><dd class="mb-0 fw-semibold" id="wzRRole"></dd></div>
            </dl>
            <button type="button" class="btn btn-link p-0 text-decoration-none fw-semibold" id="wzRestart">Start over</button>
          </div>

          <div class="d-flex justify-content-between mt-4 pt-2" id="wzActions">
            <button type="button" class="btn btn-outline-secondary rounded-pill px-4" id="wzBack">Back</button>
            <button type="button" class="btn btn-primary rounded-pill px-4" id="wzNext">Next</button>
          </div>
        </div>
      </div>
    </form>
  </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 Wizard snippets