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

Bootstrap 5 Multi-step Form with Search
Code Snippet:Multi-step form with search
Author: Crezzur
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 32,994
License: MIT
Edit Code online: View on CodePen
Read More

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.

4 thoughts on “19+ Bootstrap 5 Multi-step Form with Search Samples & Tutorial”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X