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 a very useful functionality when the user input data is too much and needs to divide into parts. We will divide user inputs into steps and associate these steps with each other using navigation like tab or pills.

We will gather all these steps data and submit all inputs on the final step of the HTML Form.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 form UI using bootstrap.
  2. Navigation of next and previous step form using jquery.
  3. Post the all steps form data and get into action.php file.

multi-steps-form

Video Tutorial:

If you are more comfortable in watching a video that explains about Multi Step Form Using PHP, Bootstrap and jQuery, then you should watch this video tutorial.

Simple Example of Multi step form Using jQuery and Bootstrap

Lets create multi step form using 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 files into the head section of index.php file.

Here i am using cdn 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.

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 into section of index.php file to hide other steps except first step.

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.

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

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

You can download source code and Demo from below link.

7 thoughts on “Multi Step Form Using PHP, Bootstrap and jQuery

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

  1. Nice writeup, although I notice a tiny bit of issue with your approach. If I add a container ‘div’ or ‘p’ and wrap the next/prev buttons inside the container, it will stop working. This is because the javascript is making assumption that ‘fieldset’ is the parent element for the next/prev buttons. If this condition isnt satisfied, it will not work. My suggestion is that, instead of looking for the parent element for next/prev buttons, its better to look for the closest fieldset element. So change $(this).parent() to $(this).closest(“fieldset”), just my two cents.

  2. you can add thank you page once all steps completed and send to this page using php redirect method, for data you can store into session/localstorage or cookie between steps.

  3. you, using HTML5 , You can get basic use of localstorage from https://www.js-tutorials.com/javascript-tutorial/html5-localstorage-sessionstorage-using-angularjs/.

Leave a Reply

Your email address will not be published. Required fields are marked *

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