Easy Multi-step Form Component For Bootstrap 5

Preview:

Description:

Bootstrap is a powerful tool for creating responsive websites, and we’ve all used it to develop great single-step forms. But often, collecting detailed information from the user requires multiple steps.

Fortunately, we don’t have to settle for mere form elements. With this component, you can quickly build multi-step forms (also called form wizards) in your Bootstrap 5 project, without writing a single line of JavaScript.

How to use it:

1. Download and insert the following files into your Bootstrap page.

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Bootstrap Multi-step Form -->
<link rel="stylesheet" href="/path/to/dist/bootstrap-multi-steps-component.min.css" />
<script src="/path/to/dist/bootstrap-multi-steps-component.min.js"></script>

2. Add CSS class ‘multi-steps-form’ to your HTML form.

<form class="multi-steps-form faded">
  ...
</form>

3. Add CSS class ‘step’ to your form groups as follows:

<form class="multi-steps-form faded">
  <!-- Step 1 -->
  <div class="step fade active show" id="step1">
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">Step 1</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <div class="mb-3">
      <button class="btn btn-primary step-link" type="button" data-bs-target="#step2">Next</button>
    </div>
  </div>
  <!-- Step 2 -->
  <div class="step fade" id="step2">
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">Step 2</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleFormControlTextarea1" class="form-label">Step 1</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <div class="mb-3">
      <button class="btn btn-primary step-link" type="button" data-bs-target="#step1">Back</button>
        <button class="btn btn-primary step-link" type="button" data-bs-target="#step3">Next</button>
    </div>
  </div>
  <!-- Step 3 -->
  <div class="step fade" id="step3">
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">Step 3</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <div class="mb-3">
      <button class="btn btn-primary step-link" data-bs-target="#step2" type="button">Back</button>
      <button class="btn btn-secondary" type="button">Submit</button>
    </div>
</form>

4. Show a specific step manually.

const multiStepForm = new MultiStepForm("#form-container");
multiStepForm.show("#step2");

Changelog:

09/12/2022

• added js behavior