19+ Bootstrap 5 Multi-step Form with Search Samples & Tutorial

This Bootstrap 5 snippet helps you to create a multi-step form with a progress bar and search feature. Users can easily navigate from content through the next/back button. It appends a progress bar at the top of the form that automatically calculates percentage values.

This multi-step form is useful for the admin dashboard where an admin can add a new user or search for existing users. On the other hand, it is also useful for general-purpose user registration forms.

Basically, this multi-step form is based on jQuery to validate inputs before enabling the next button. It shows the warning if required inputs are blank. Similarly, if the input is filled properly the next button will be enabled and the user can move to the next step.

How to Create Bootstrap 5 Multi-step Form with Search

First of all, load Bootstrap 5 framework, Font Awesome 5 CSS, and multi-step form CSS file into the head tag of your webpage.

<!-- Bootstrap 5 CSS -->  
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css'>
<!-- Font Awesome 5 -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'>
<!-- Multi-step Form CSS -->
<link rel="stylesheet" href="css/style.css">

After that, create the HTML structure for Bootstrap 5 multi-step form as follows:

<div class="container d-flex justify-content-center" style="min-width:720px!important">
  <div class="col-11 col-offset-2">
    <div class="progress mt-3" style="height: 30px;">
      <div class="progress-bar progress-bar-striped progress-bar-animated" style="font-weight:bold; font-size:15px;" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="card mt-3">
      <div class="card-header font-weight-bold">My Bootstrap 5 multi-step-form</div>
      <div class="card-body p-4 step">
        <div class="radio-group row justify-content-between px-3 text-center" style="justify-content:center !important">
          <div class="col-auto me-sm-2 mx-1 card-block py-0 text-center radio">
            <div class="opt-icon"><i class="fas fa-user-plus" style="font-size: 80px; margin-left: 25px;"></i></div>
            <p><b>Add new user</b></p>
          </div>
          <div id="suser" class="selected col-auto ms-sm-2 mx-1 card-block py-0 text-center radio">
            <div class="opt-icon"><i class="fas fa-users" style="font-size: 80px;"></i></div>
            <p><b>Search existing user</b></p>
          </div>
        </div>
        <div class="searchfield text-center pb-1" style="font-size:12px">Search for example <b>Gary Hendren</b></div>
        <div class="searchfield input-group px-5">
          <span class="input-group-text" id="basic-addon1"><i class="fas fa-search text-white" aria-hidden="true"></i></span>
          <input id="txt-search" class="form-control" type="text" placeholder="Search" aria-label="Search">
        </div>
        <div id="filter-records" class="mx-5"></div>
      </div>
      <div id="userinfo" class="card-body p-4 step" style="display: none">
        <div class="text-center">
          <h5 class="card-title font-weight-bold pb-2">User information</h5>
        </div>

        <div class="form-group row">
          <div class="col-2"></div>
          <div class="col-4">
            <label for="fname">First Name<b style="color: #dc3545;">*</b></label>
            <input type="text" name="name" class="form-control" id="fname" required>
            <div class="invalid-feedback">This field is required</div>
          </div>
          <div class="col-4">
            <label for="lname">Last Name<b style="color: #dc3545;">*</b></label>
            <input type="text" class="form-control" id="lname" required>
            <div class="invalid-feedback">This field is required</div>
          </div>
        </div>
        <div class="form-group row pt-2">
          <label for="team" class="col-2 text-end control-label col-form-label">Team</label>
          <div class="col-8">
            <input type="text" class="form-control" id="team">
          </div>
        </div>
        <div class="form-group row pt-2">
          <label for="address" class="col-2 text-end control-label col-form-label">Address</label>
          <div class="col-8">
            <input type="text" class="form-control" id="address">
          </div>
        </div>
        <div class="form-group row pt-2">
          <label for="tel" class="col-2 text-end control-label col-form-label">Tel/Gsm</label>
          <div class="col-8">
            <input type="text" class="form-control" id="tel">
          </div>
        </div>
        <div class="text-center text-muted"><b style="color: #dc3545;">*</b> required fields</div>
      </div>
      <div class="card-body p-5 step" style="display: none">Step 3</div>
      <div class="card-body p-5 step" style="display: none">Step 4</div>
      <div class="card-body p-5 step" style="display: none">Step 5</div>
      <div class="card-footer">
        <button class="action back btn btn-sm btn-outline-warning" style="display: none">Back</button>
        <button class="action next btn btn-sm btn-outline-secondary float-end" disabled="">Next</button>
        <button class="action submit btn btn-sm btn-outline-success float-end" style="display: none">Submit</button>
      </div>
    </div>

  </div>
</div>

Load the jQuery, Bootstrap 5 JS, and multi-step-form.js file before closing of body tag and done.

<!-- jQuery JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<!-- Bootstrap 5 JS -->
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js'></script>
<!-- Multi-step Form JS -->
<script src="js/bootstrap-multi-step-form.js"></script>

In order to update the search data, edit the "bootstrap-multi-step-form.js" file and add your value inside the data variable.

var data = [
  { id:"1", fname:"Tiger", lname:"Noxx", team:'Team 1', address:'Ryecroft Field',   tel:'0494645879'},
  { id:"2", fname:"Garrett", lname:"Pellens", team:'Team 2', address:'Kiln Circus',      tel:'0493658746' },
];

That’s all! hopefully, this code snippet helps you to create a multi-step form with a search feature. If you have any questions or suggestions, let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.