Multi Step Form With Progress Bar Using Bootstrap 5

This tutorial will guide you through creating a multi-step form with a progress bar using Bootstrap 5. This is a great way to improve user experience, especially for forms with many fields. The progress bar provides visual feedback to the user, indicating their progress through the form.

Step 1: Include Necessary Assets

Add the following code within the “ section of your HTML document to include the required Bootstrap and Animate.css libraries:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'>

Step 2: Create the HTML Structure

This section outlines the HTML structure for the multi-step form and progress bar. Remember to replace the `` comments with your actual form fields.

<div id="container" class="container mt-5">
  <div class="progress px-1" style="height: 3px;">
    <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="step-container d-flex justify-content-between">
    <div class="step-circle" onclick="displayStep(1)">1</div>
    <div class="step-circle" onclick="displayStep(2)">2</div>
    <div class="step-circle" onclick="displayStep(3)">3</div>
  </div>

  <form id="multi-step-form">
    <div class="step step-1">
      <!-- Step 1 form fields here -->
      <h3>Step 1</h3>
      <div class="mb-3">
        <label for="field1" class="form-label">Field 1:</label>
        <input type="text" class="form-control" id="field1" name="field1">
      </div>
      <button type="button" class="btn btn-primary next-step">Next</button>
    </div>

    <div class="step step-2">
      <!-- Step 2 form fields here -->
      <h3>Step 2</h3>
      <div class="mb-3">
        <label for="field2" class="form-label">Field 2:</label>
        <input type="text" class="form-control" id="field2" name="field2">
      </div>
      <button type="button" class="btn btn-primary prev-step">Previous</button>
      <button type="button" class="btn btn-primary next-step">Next</button>
    </div>

    <div class="step step-3">
      <!-- Step 3 form fields here -->
      <h3>Step 3</h3>
      <div class="mb-3">
        <label for="field3" class="form-label">Field 3:</label>
        <input type="text" class="form-control" id="field3" name="field3">
      </div>
      <button type="button" class="btn btn-primary prev-step">Previous</button>
      <button type="submit" class="btn btn-success">Submit</button>
    </div>
  </form>
</div>

Step 3: Add CSS Styling

This CSS will style the form’s progress bar, steps, and overall layout. This ensures the visual appeal and responsiveness of your multi-step form.

#container {
  max-width: 550px;  
}

.step-container {
  position: relative;
  text-align: center;
  transform: translateY(-43%);
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #007bff;
  line-height: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  cursor: pointer; /* Added cursor pointer */
}

.step-line {
  position: absolute;
  top: 16px;
  left: 50px;
  width: calc(100% - 100px);
  height: 2px;
  background-color: #007bff;
  z-index: -1;
}

#multi-step-form{
  overflow-x: hidden;
}

Step 4: Implement JavaScript Functionality

This JavaScript code handles the form’s step navigation, progress bar updates, and animations. It uses jQuery for easier DOM manipulation.

var currentStep = 1;
var updateProgressBar;

function displayStep(stepNumber) {
  if (stepNumber >= 1 && stepNumber <= 3) {
    $(".step-" + currentStep).hide();
    $(".step-" + stepNumber).show();
    currentStep = stepNumber;
    updateProgressBar();
  }
}

  $(document).ready(function() {
    $('#multi-step-form').find('.step').slice(1).hide();
  
    $(".next-step").click(function() {
      if (currentStep < 3) {
        $(".step-" + currentStep).addClass("animate__animated animate__fadeOutLeft");
        currentStep++;
        setTimeout(function() {
          $(".step").removeClass("animate__animated animate__fadeOutLeft").hide();
          $(".step-" + currentStep).show().addClass("animate__animated animate__fadeInRight");
          updateProgressBar();
        }, 500);
      }
    });

    $(".prev-step").click(function() {
      if (currentStep > 1) {
        $(".step-" + currentStep).addClass("animate__animated animate__fadeOutRight");
        currentStep--;
        setTimeout(function() {
          $(".step").removeClass("animate__animated animate__fadeOutRight").hide();
          $(".step-" + currentStep).show().addClass("animate__animated animate__fadeInLeft");
          updateProgressBar();
        }, 500);
      }
    });

    updateProgressBar = function() {
      var progressPercentage = ((currentStep - 1) / 2) * 100;
      $(".progress-bar").css("width", progressPercentage + "%");
    }
  });

Step 5: Include Footer Assets

<script src='https://code.jquery.com/jquery-3.6.4.slim.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js'></script>

In conclusion, you’ve successfully built a multi-step form with a progress bar using Bootstrap 5. This enhanced user experience will make your forms more user-friendly and engaging.