How To Create Multi-Step Form Progress Bar JQuery, Bootstrap, And PHP

Today, We will learn how to create a multi-step form with progress bar using Jquery, Bootstrap, and PHP. So let’s start writing code. Read: What are Bootstrap Containers and how to code

Forms with too many input fields are so boring and annoying to users, So we will not use more input fields. We will create Multi-Step Forms to make it more user-friendly.

The Multi-Step Forms are the best solution when there are too many input fields in a Form. So breaking the large Form into multiple smaller Forms with few input fields on each Form is a very smart and user-friendly solution.

You will also learn how to validate multiple forms using jQuery and store multiple Forms submit data into MySQL database using PHP. Read more: bootstrap : Responsive Navbar with Links of Same Width

Create Database Table for Multi-Step Form

Here, we will handle functionality to register users with multiple forms. So we need a database table to store user details. So we will create a table used to store user information using the below MySQL query.

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `first_name` varchar(100) NOT NULL,
  `last_name` varchar(100) NOT NULL,
  `mobile` int(11) NOT NULL,
  `address` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Create Database Connection for Multi-Step Form

We will create a db_connect.php file to make a connection with the MySQL database to store user information.

<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demos";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

Create Multiple FORM HTML for Multi-Step Form

Now we will create the main file index.php having user FORM HTML using Bootstrap. We will also create progress bar HTML using Bootstrap.

<div class="container">
	<h2>Example: Multi Step Form with Progress Bar using jQuery, Bootstrap & PHP</h2>		
	<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="user_form" novalidate action="form_action.php"  method="post">	
	<fieldset>
	<h2>Step 1: Add Account Details</h2>
	<div class="form-group">
	<label for="email">Email address*</label>
	<input type="email" class="form-control" required id="email" name="email" placeholder="Email">
	</div>
	<div class="form-group">
	<label for="password">Password*</label>
	<input type="password" class="form-control" name="password" id="password" placeholder="Password">
	</div>
	<input type="button" class="next btn btn-info" value="Next" />
	</fieldset>	
	<fieldset>
	<h2> Step 2: Add Personal Details</h2>
	<div class="form-group">
	<label for="first_name">First Name</label>
	<input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
	</div>
	<div class="form-group">
	<label for="last_name">Last Name</label>
	<input type="text" class="form-control" name="last_name" id="last_name" 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: Add Contact Information</h2>
	<div class="form-group">
	<label for="mobile">Mobile*</label>
	<input type="text" class="form-control" name="mobile" id="mobile" 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>		
</div>	

We will also keep below CSS code in the head tag to hide forms that are kept inside <fieldset> to show and hide using jQuery.

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

Multiple Form Display with jQuery for Mutli-Step Form

After creating From HTML, we will create JavaScript file form.js and handle functionality to display next/previous FORM on button click using jQuery. We will also Form submit and validate using jQuery. Below is code to handle multiple form displays, form submit, and validation using jQuery.

$(document).ready(function(){  
  var form_count = 1, form_count_form, next_form, total_forms;
  total_forms = $("fieldset").length;  
  $(".next").click(function(){
    form_count_form = $(this).parent();
    next_form = $(this).parent().next();
    next_form.show();
    form_count_form.hide();
    setProgressBar(++form_count);
  });  
  $(".previous").click(function(){
    form_count_form = $(this).parent();
    next_form = $(this).parent().prev();
    next_form.show();
    form_count_form.hide();
    setProgressBar(--form_count);
  });
  setProgressBar(form_count);  
  function setProgressBar(curStep){
    var percent = parseFloat(100 / total_forms) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width",percent+"%")
      .html(percent+"%");   
  } 
  // Handle form submit and validation
  $( "#user_form" ).submit(function(event) {    
	var error_message = '';
	if(!$("#email").val()) {
		error_message+="Please Fill Email Address";
	}
	if(!$("#password").val()) {
		error_message+="<br>Please Fill Password";
	}
	if(!$("#mobile").val()) {
		error_message+="<br>Please Fill Mobile Number";
	}
	// Display error if any else submit form
	if(error_message) {
		$('.alert-success').removeClass('hide').html(error_message);
		return false;
	} else {
		return true;	
	}    
  });  
});

Save Form Data to Database for Multi-Step Form

Now finally in form_action.php, we will handle functionality to save user form value into MySQL database.

<?php
	include_once("db_connect.php");
	if (isset($_POST['submit'])) {	
		$email = mysqli_real_escape_string($conn, $_POST['email']);
		$password = mysqli_real_escape_string($conn, $_POST['password']);
		$first_name = mysqli_real_escape_string($conn, $_POST['first_name']);
		$last_name = mysqli_real_escape_string($conn, $_POST['last_name']);
		$mobile = mysqli_real_escape_string($conn, $_POST['mobile']);
		$address = mysqli_real_escape_string($conn, $_POST['address']);		
		if(mysqli_query($conn, "INSERT INTO user(email, pass, first_name, last_name, mobile, address) VALUES('".$email."', '" . $password . "', '". $first_name."', '".$last_name."', '".$mobile."', '". $address."')")) {
			echo "You're Registered Successfully!";
		} else {
			echo "Error in registering...Please try again later!";
		}
	}	
?>

Read also: How to Live Search using PHP MySQL and Ajax

Posts to Review:

bootstrap : Responsive Navbar with Links of Same Width Bootstrap icon bar with CSS What is Bootstrap Grids and How to Code What are Bootstrap Containers and how to code