Multi Step Form Using PHP,Bootstrap and jQuery

This post help to understand multi step form submission with progress bar using php, jQuery and bootstrp3.Multi steps form is very useful functionality when the user input data is too much.We will divide user input data into steps and associate these steps each other using navigation like tab or pills.
We will gather all these step data and submit all inputs on final step of multi steps form data.I am using non ajax method to submit data using php, you can use ajax submit using jQuery.

There are following steps will follow on this article,

  1. We will create multi steps UI using bootstrap
  2. Navigation next and previous steps using jquery
  3. Post the all steps form data and get into action.php file

multi-steps-form

Simple Example of Multi step form Using jQuery and Bootstrap

Step 1: We will create index.php file, where we need to test this sample example,I need to include jquery and bootstrap library file in section of index.php file.

Select Code
1
2
3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <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, you can also use these library locally and replace with your path.

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

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <form id="regiration_form" novalidate action="action.php"  method="post">
  <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>

i have created 3 steps using HTML field-set control for each step, so whenever user click next and previous button we will slide fieldset based on current step.

Step 3: Add css class in section of index.php file to hide fieldset except first fieldset.

Select Code
1
2
3
4
5
<style type="text/css">
  #regiration_form fieldset:not(:first-of-type) {
    display: none;
  }
  </style>

Step 4: We will use jQuery to hide and show HTML fieldset for navigation between steps,You need to add below code into footer of index.php file.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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+"%");   
  }
});

Step 5: created action.php file added below code into this file.

Select Code
1
<div class="row well alert alert-success"><?php echo "<pre>";print_R($_POST);?></div>

So after completion of all steps user will clicked submit button, We will post all steps data and send to action.php file using form action attribute.

You can download source code and Demo from below link.

  • Bernardo de la torre aparicio

    how can you make it somehow it sends the info to admin email?

    • You can use javascript send to mail function or you can use backend email programming function like in php there is email() function