Create Multi Step Form with Progress Bar using jQuery, CSS3 and PHP

Hi guys, today we will see how to create an awesome multi step form using CSS3, jQuery and PHP. Multi step forms are important when you have large number of input fields in a form, so breaking that form in smaller forms with less number of input fields is a good idea. It is user friendly as well. In this tutorial we will learn how easily we can create multi step form with progress bar and save data in MySQL database. I Googled around for such tutorials but didn’t get any good one but I found a beautiful and elegant multistep form using jQuery and CSS3 (front end), so I thought about creating its backend and give you complete solution. Yeah you can see the front end used in this tutorial is originally created by an awesome team at TheCodePlayer.com. Here is the link of original front end form.

multi-step-form

                                              Live Demo

                              [sociallocker]Download File[/sociallocker]

In this post I will share the code for field validation and submitting data into database.

First we created a table named user_tbl, below is the SQL query for it:

</p>
CREATE TABLE user_tbl
(
PID INT NOT NULL AUTO_INCREMENT,
PRIMARY KEY(PID),
FirstName VARCHAR(150),
LastName VARCHAR(150),
email VARCHAR(150),
upassword VARCHAR(150),
phone_number VARCHAR(15),
address VARCHAR(255),
twitter VARCHAR(150),
facebook VARCHAR(150),
googleplus VARCHAR(150),
date VARCHAR(150)
)ENGINE=InnoDB DEFAULT CHARSET=utf8;";
<p style="text-align: justify;">

We have added validations on few fields using javascript. You can add more fields to the form and add validations easily by editing script.js file. After successful validations insert.php is called to submit all form field’s values in db. Below is code for validation in script.js.

</p>

$("#msform").submit(function(){

var fname=jQuery('#fname').val();
if ($.trim(fname).length == 0) {
document.getElementById("fname").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please Enter First Name !</span>');
jQuery('.fs-error').show();
return false;
}
else{
jQuery('.fs-error').hide();
 var serializedReturn = formData();

window.location = "http://localhost/multistepform/success.php";
 return false;

 }
});
});

&nbsp;

function formData() {
 var serializedValues = jQuery("#msform").serialize();
 var form_data = {
 action: 'ajax_data',
 type: 'post',
 data: serializedValues,
 };
 jQuery.post('insert.php', form_data, function(response) {
 alert(response);
 // document.getElementById("sucess").style.color = "#006600";
 // jQuery('#sucess').show();
 });

 return serializedValues;
}
function formValidation(e){

var emailval=jQuery('#email').val();
 var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
// Checking Empty Fields
var vemail=mailformat.test(emailval)
if ($.trim(emailval).length == 0 || vemail==false) {
jQuery('.fs-error').html('<span style="color:red;"> Email is invalid !</span>');
return false;
}
else{

jQuery('.fs-error').hide();
}
 var pass1 = document.getElementById("pass").value;
 var pass2 = document.getElementById("cpass").value;

 if (pass1 != pass2 || pass1 == '') {
 //alert("Passwords Do not match");
 document.getElementById("pass").style.borderColor = "#E34234";
 document.getElementById("cpass").style.borderColor = "#E34234";
 jQuery('.fs-error').html('<span style="color:red;"> Passords do not match !</span>');
 jQuery('.fs-error').show();
 return false
 }
 else {
 document.getElementById("pass").style.borderColor = "#006600";
 document.getElementById("cpass").style.borderColor = "#006600";
 jQuery('.fs-error').hide();
 return true;
 }
<p style="text-align: justify;">

Now insert.php would be executed and will simply insert all the values in user_tbl table in DB. Below is the code fir insert.php:

</p>
<?php
include_once "dbconnect.php";
if(isset($_POST['data'])){
$data=$_POST['data'];
 parse_str($data, $value);
 insert_data($con,$value);
}
function nullcheck($data){
if(isset($data) && $data!=null){
return $data;
}else{
return '';
}

}

function insert_data($con,$val){
mysqli_query($con,"INSERT INTO user_tbl (FirstName,LastName,email,upassword,phone_number,address,twitter,facebook,googleplus,date)
VALUES ('$fname','$lname','$email','$pwd','$number','$address','$twitter','$fbook','$gplus','$date')");
mysqli_close($con);
}
?>
<p style="text-align: justify;">

I hope this tutorial will help you create a good looking multi-step form with validations and saving data in database. Please share this simple tutorial with your friends and followers 🙂 Again I would like to give credits to thecodeplayer.com team for such an awesome front end form and letting me use the code.

5 thoughts on “Create Multi Step Form with Progress Bar using jQuery, CSS3 and PHP”

  1. Thank’s for add validation to this form

    but i’ve a question :

    the validation here occurs only for first fieldset and the last fieldset, how to do the validation if we have 5 fieldset and in the 5 we must validate not only in the first and the last ?

    thank’s

  2. Sanjeev,

    How are you? First I wanted to say thank you for all the amazing tutorials. I came across your website just yesterday and all I can say is that is great to have people like you out here helping others. Thank you for that.

    I wanted to know where on the site do I go to make tutorial suggestions/requests.

    Thanks,
    Don

  3. Hello sir ,

    Design and jquery is working fine ,But value is not inserting in database .

    can You Help me in this ,I need it immediately…

    Thanks for sharing such a wonderfull thing.

    but please resolve my query

  4. Hi Sanjeev,
    Thanks a lot for the tutorial and this amazing multi step form.

    I have almost everything working fine. The only problem is that the form is saving only ‘c’ as value, for every field (or variable).

    Can you please let me know the name of the variables that stock the information in the $_Post[]? It looks to be $_POST[‘data’] but it comes empty (or just with a ‘c’).

    Regards

  5. Hi sanjeev, is there any other way of doing this?? As i have have too many fields in my form , so i m thinking to do it in different page and then store all the information in one single submitt button.

Comments are closed.