Web Designer Wall

Snippets Form Wizard

Bootstrap 5 Modal Multi-Step Form Wizard

A call-to-action card that opens a modal registration wizard with a progress bar, validation on each step, a plan picker and a confirmation screen.

Bootstrap 5 No jQuery Jun 2020 7K views 

<section class="wdw-stage mw-stage">
  <div class="container" style="max-width:960px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-6 p-4 p-md-5 d-flex flex-column justify-content-center">
          <span class="wdw-eyebrow mb-2">Early access</span>
          <h2 class="wdw-heading display-6 mb-3">Join the beta in three quick steps</h2>
          <p class="wdw-muted mb-4">Tell us who you are, pick how you will use the product, and choose a plan. It takes about a minute.</p>
          <div><button type="button" class="btn btn-primary btn-lg rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#mw-modal">Start registration</button></div>
        </div>
        <div class="col-lg-6 wdw-aurora p-4 p-md-5 d-flex flex-column justify-content-center gap-3">
          <div class="mw-perk"><span class="mw-perk-ico">1</span><div><div class="fw-semibold">Create your account</div><div class="small opacity-75">Name and email, nothing else.</div></div></div>
          <div class="mw-perk"><span class="mw-perk-ico">2</span><div><div class="fw-semibold">Tell us about you</div><div class="small opacity-75">So we can tailor your workspace.</div></div></div>
          <div class="mw-perk"><span class="mw-perk-ico">3</span><div><div class="fw-semibold">Choose a plan</div><div class="small opacity-75">Free to start, upgrade any time.</div></div></div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="mw-modal" tabindex="-1" aria-labelledby="mw-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content border-0 shadow-lg">
        <div class="modal-header border-0 pb-0">
          <div class="w-100">
            <span class="wdw-eyebrow" id="mw-count">Step 1 of 3</span>
            <h3 class="modal-title h4 fw-bold" id="mw-title">Create your account</h3>
          </div>
          <button type="button" class="btn-close align-self-start" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="px-3 pt-3"><div class="progress" style="height:6px" role="progressbar" aria-label="Wizard progress" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" id="mw-progress"><div class="progress-bar" id="mw-bar" style="width:33%"></div></div></div>
        <form id="mw-form" novalidate>
          <div class="modal-body p-4">
            <div class="mw-step" data-title="Create your account">
              <div class="form-floating mb-3"><input type="text" class="form-control" id="mw-name" placeholder="Name" autocomplete="name" required><label for="mw-name">Full name</label><div class="invalid-feedback">Please enter your name.</div></div>
              <div class="form-floating mb-3"><input type="email" class="form-control" id="mw-email" placeholder="Email" autocomplete="email" required><label for="mw-email">Email address</label><div class="invalid-feedback">Enter a valid email.</div></div>
              <div class="form-floating"><input type="password" class="form-control" id="mw-pass" placeholder="Password" autocomplete="new-password" minlength="8" required><label for="mw-pass">Password</label><div class="invalid-feedback">Use at least 8 characters.</div></div>
            </div>
            <div class="mw-step d-none" data-title="Tell us about you">
              <div class="form-floating mb-3"><input type="text" class="form-control" id="mw-co" placeholder="Company" autocomplete="organization"><label for="mw-co">Company (optional)</label></div>
              <div class="form-floating mb-3"><select class="form-select" id="mw-role" required><option value="" selected disabled>Choose…</option><option>Designer</option><option>Developer</option><option>Product manager</option><option>Founder</option></select><label for="mw-role">Your role</label><div class="invalid-feedback">Pick a role.</div></div>
              <div class="form-check"><input class="form-check-input" type="checkbox" id="mw-news" checked><label class="form-check-label" for="mw-news">Send me product updates</label></div>
            </div>
            <div class="mw-step d-none" data-title="Choose a plan">
              <div class="d-grid gap-2" role="radiogroup" aria-label="Plan">
                <input type="radio" class="btn-check" name="mw-plan" id="mw-p1" checked><label class="btn btn-outline-secondary mw-plan text-start" for="mw-p1"><span class="fw-bold">Starter</span><span class="small wdw-muted d-block">1 project, community support</span><span class="mw-price">Free</span></label>
                <input type="radio" class="btn-check" name="mw-plan" id="mw-p2"><label class="btn btn-outline-secondary mw-plan text-start" for="mw-p2"><span class="fw-bold">Pro</span><span class="small wdw-muted d-block">Unlimited projects, priority support</span><span class="mw-price">$12/mo</span></label>
              </div>
            </div>
            <div class="mw-step d-none text-center py-3" data-title="You're all set">
              <span class="mw-ok mb-3"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
              <p class="mb-0 wdw-muted">Check your inbox to confirm your email and start using your workspace.</p>
            </div>
          </div>
          <div class="modal-footer border-0 pt-0 justify-content-between">
            <button type="button" class="btn btn-outline-secondary rounded-pill px-4" id="mw-back" disabled>Back</button>
            <button type="button" class="btn btn-primary rounded-pill px-4" id="mw-next">Continue</button>
          </div>
        </form>
      </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 Wizard snippets