Multi Step Form with Progress Bar using jQuery and Bootstrap CSS

I will provide you with a simple jquery and HTML snippet to create a multi-step form with a progress bar using bootstrap with jQuery. There are many jQuery plugins available on the web which is providing the same functionality but I don’t want spent time on the customization of plugins so I have created mine one which is more customizable and easy to understand and use.

You can change functionality and HTML view as you want for your project. I have used bootstrap for front-end UI and jQuery for transition on client side. This is a simple multi step form example so i haven’t added validation and animation etc functionality. I am sure you can easily add these functionality with this jQuery and HTML snippet.

Also Checkout other useful jQuery tutorials,

So, let’s start a simple multi step form creation journey, I am assuming you have knowledge of jquery and bootstrap or used them in previous web application.

Simple Example of Multi Step Form Using jQuery and Bootstrap

Step 1: We need to create a new index.html file where we will test this sample example code, I need to include jquery and bootstrap library files into head section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Here, I am using cdn and googleapi path for jquery and bootstrap files, You can also use these library files as a locally Path and replace cdn path with your local storage files path.

Step 2: Creating HTML UI for all steps which you need in multi-step form to follow the user and added into index.html file.

<div class="progress">

<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>

</div>


<div class="alert alert-success hide"></div>

  <form id="regiration_form" novalidate="">

<fieldset>

<h2>Step 1: Create your account</h2>


<div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>


<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
</div>

    <input type="button" name="password" class="next btn btn-info" value="Next">
</fieldset>


<fieldset>

<h2> Step 2: Add Personnel Details</h2>


<div class="form-group">
    <label for="fName">First Name</label>
    <input type="text" class="form-control" name="fName" id="fName" placeholder="First Name">
</div>


<div class="form-group">
    <label for="lName">Last Name</label>
    <input type="text" class="form-control" name="lName" id="lName" placeholder="Last Name">
</div>

    <input type="button" name="previous" class="previous btn btn-default" value="Previous">
    <input type="button" name="next" class="next btn btn-info" value="Next">
</fieldset>


<fieldset>

<h2>Step 3: Contact Information</h2>


<div class="form-group">
    <label for="mob">Mobile Number</label>
    <input type="text" class="form-control" id="mob" placeholder="Mobile Number">
</div>


<div class="form-group">
    <label for="address">Address</label>
    <textarea class="form-control" name="address" placeholder="Communication Address"></textarea>
</div>

    <input type="button" name="previous" class="previous btn btn-default" value="Previous">
    <input type="submit" name="submit" class="submit btn btn-success" value="Submit">
</fieldset>

  </form>

in the above code, I have created 3 steps and added HTML fieldset control for each step, so whenever user clicks the next and previous button we will slide the fieldset based on the current step.

Step 3: Added CSS class in head section of index.html file to hide fieldset except first fieldset or Step.

<style type="text/css">
  #regiration_form fieldset:not(:first-of-type) {
    display: none;
  }
  </style>

I have used a first-of-type css selector to show the first HTML fieldset and hide the rest of them, so whenever users come on the form field or reload, they will see the first step instead of all steps.

Step 4: Defining the jQuery variable and navigation between steps using the below jQuery code, we will add the below code into the footer of index.html file using jquery $(document).ready() method.

$(document).ready(function(){
  var current = 1,current_step,next_step,steps;
  steps = $("fieldset").length;
  $(".next").click(function(){
    current_step = $(this).parent();
    next_step = $(this).parent().next();
    next_step.show();
    current_step.hide();
    setProgressBar(++current);
  });
  $(".previous").click(function(){
    current_step = $(this).parent();
    next_step = $(this).parent().prev();
    next_step.show();
    current_step.hide();
    setProgressBar(--current);
  });
  setProgressBar(current);
  // Change progress bar action
  function setProgressBar(curStep){
    var percent = parseFloat(100 / steps) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width",percent+"%")
      .html(percent+"%");   
  }
});

in the above jquery code, I have added click event on .next and .previous button class and based on button type click I am showing HTML fieldset step form and filling progress-bar control.

Step 5: Finally submit the form using the jquery submit method and added into the footer of $(document).ready() method.

$( "#regiration_form" ).submit(function(event) {
    jQuery('.alert-success').removeClass('hide').html( "Handler for .submit() called and see console logs for your posted variable" );
    console.log($(this).serialize());
    event.preventDefault();
  });

Once the user filled all the steps data and clicks submit button, The form will submit all data using the jquery submit() method and showing serialized data of the submitted form data. You can see JSON data into console of browser.

You can download the source code and Demo from the below link.