Bootstrap 5 Form Wizard

by adminkit

HTML

<script src="https://cdn.jsdelivr.net/npm/zangdar@1.0.25/dist/zangdar.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-6 d-none d-lg-flex col-img">
    </div>
    <div class="col-12 col-lg-6 align-self-center">
      <div class="m-3 m-lg-5">

        <div class="text-center mt-4 mb-3">
          <h1 class="h3">Multi-step Form Wizard</h1>
          <p class="lead">
            Navigate between steps in this multi-step Bootstrap 5 Form Wizard example.
          </p>
        </div>

        <ul id="steps-native" class="nav nav-pills justify-content-center"></ul>
        
        <form id="wizard" class="my-2 py-2">
          <section data-step="1. Account">
            <div class="mb-3">
              <label class="form-label" for="email">Email</label>
              <input class="form-control" type="email" name="email" placeholder="Email.." required>
            </div>
            <div class="mb-3">
              <label class="form-label" for="password">Password</label>
              <input class="form-control" type="password" name="password" placeholder="Password.." required>
            </div>
            <div class="row">
              <div class="col-12 text-right">
                <button class="btn btn-primary" data-next>Next</button>
              </div>
            </div>
          </section>
        
          <section data-step="2. Profile">
            <div class="mb-3">
              <label class="form-label" for="first-name">First name</label>
              <input class="form-control" type="text" name="first-name" placeholder="First name.." required>
            </div>
            
            <div class="mb-3">
              <label class="form-label" for="last-name">Last name</label>
              <input class="form-control" type="text" name="last-name" placeholder="Last name.." required>
           ...

CSS

.zandgar__wizard {
  display: block;
  height: 100%;
  position: relative;
}

.zandgar__wizard .zandgar__step {
  display: none;
}
.zandgar__wizard .zandgar__step.zandgar__step__active {
  display: block;
}

.col-img {
  /* https://unsplash.com/photos/yWwob8kwOCk */
  background: scroll center url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80');
  background-size: cover;
  min-height: 100vh;
}

JavaScript

function buildStepsBreadcrumb (wizard, element, steps) {
  const $steps = document.getElementById(element)
  $steps.innerHTML = ''
  for (let label in steps) {
    if (steps.hasOwnProperty(label)) {
      const $li = document.createElement('li')
      const $a = document.createElement('a')
      $li.classList.add('nav-item')
      $a.classList.add('nav-link')
      if (steps[label].active) {
        $a.classList.add('active')
      }
      $a.setAttribute('href', '#')
      $a.innerText = label
      $a.addEventListener('click', e => {
        e.preventDefault()
        wizard.revealStep(label)
      })
      $li.appendChild($a)
      $steps.appendChild($li)
    }
  }
}

function onStepChange(wizard, selector) {
    const steps = wizard.getBreadcrumb()
    buildStepsBreadcrumb(wizard, selector, steps)
}

const wizard = new window.Zangdar('#wizard', {
  onStepChange: () => {
    onStepChange(wizard, 'steps-native')
  },
  onSubmit(e) {
    e.preventDefault()
    console.log(e.target.elements)
    return false
  }
})

onStepChange(wizard, 'steps-native')