close
A long form provides a complex structure for the users. We need to break it into multiple steps to make long form user-friendly. Multi Step Form Wizard helps to make long form user-friendly by dividing it into multiple steps. With multi step form interface, only a few inputs are showing on each screen and the user can complete input form fields by multiple steps. You can create a form with multiple steps to prevent users from feeling confused by seeing lots of form fields.
Multi-step form can be used for any type of form where a huge number of input fields are added. The progress bar is a useful element to display the status of the completed steps in the multi-step form wizard. In this tutorial, we will give you a step-by-step guide to create multi step form with progress bar and validation using HTML, CSS, and jQuery. Also, we will show you how to implement multi step form submission functionality in web application using PHP and MySQL.
In this example script, we will build multi step registration form with jQuery using PHP. The progress bar will display at the top of the form that will represent the steps. The “Previous” and “Next” buttons will be placed at each step, these buttons help the user to navigate between form steps.
We will build a Multi Step Form wizard in the following steps.
Before getting started to build Multi Step Form with Validation, look at the file structure below.
multi_step_form_with_jquery/ ├── index.html ├── dbConfig.php ├── form_submit.php ├── js/ | ├── jquery.min.js | ├── jquery.validate.js | └── jquery.steps.js ├── css/ | └── style.css └── images/
Define the HTML elements to create the layout of the multi-step form fields and progress bar.
<form action="" id="wizard">
<!-- STEP 1 SECTION -->
<h2></h2>
<section>
<div class="inner">
<div class="image-holder">
<img src="images/wizard-1.png" alt="">
</div>
<div class="form-content" >
<div class="form-header">
<h3>Registration</h3>
</div>
<p>Please fill with your details</p>
<div class="form-row">
<div class="form-holder">
<input type="text" name="first_name" id="first_name" placeholder="First Name" class="form-control">
</div>
<div class="form-holder">
<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-holder w-100">
<input type="text" name="email" id="email" placeholder="Your Email" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-holder">
<input type="password" name="password" id="password" placeholder="Password" class="form-control" autocomplete="new-password">
</div>
<div class="form-holder">
<input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" class="form-control" autocomplete="new-password">
</div>
</div>
<div class="form-row">
<div class="form-holder" style="align-self: flex-end; transform: translateY(4px);">
<div class="checkbox-tick">
<label class="male">
<input type="radio" name="gender" value="male" checked> Male<br>
<span class="checkmark"></span>
</label>
<label class="female">
<input type="radio" name="gender" value="female"> Female<br>
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- STEP 2 SECTION -->
<h2></h2>
<section>
<div class="inner">
<div class="image-holder">
<img src="images/wizard-2.png" alt="">
</div>
<div class="form-content">
<div class="form-header">
<h3>Registration</h3>
</div>
<p>Please fill with additional info</p>
<div class="form-row">
<div class="form-holder w-100">
<input type="text" name="address" id="address" placeholder="Address" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-holder">
<input type="text" name="city" id="city" placeholder="City" class="form-control">
</div>
<div class="form-holder">
<input type="text" name="zipcode" id="zipcode" placeholder="Zip Code" class="form-control">
</div>
</div>
<div class="form-row">
<div class="select">
<div class="form-holder">
<select name="country" id="country" class="form-control">
<option value="">Your Country</option>
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- STEP 3 SECTION -->
<h2></h2>
<section>
<div class="inner">
<div class="image-holder">
<img src="images/wizard-3.png" alt="">
</div>
<div class="form-content">
<div class="form-header">
<h3>Registration</h3>
</div>
<div class="status"></div>
<p>Send an optional message (Bio)</p>
<div class="form-row">
<div class="form-holder w-100">
<textarea name="about" id="about" placeholder="Your messagere here!" class="form-control" style="height: 99px;"></textarea>
</div>
</div>
<div class="checkbox-tick mt-24">
<label>
<input type="checkbox" name="agree" id="agree" checked> Please accept <a href="#">terms and conditions.</a>
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</section>
</form>
Now it’s time to make the multi step form functional. We will use jQuery to integrate multi step form functionality in HTML.
jQuery Library:
First, include the jQuery library.
<script src="js/jquery.min.js"></script>
jQuery Validation:
We will use the jQuery Validation plugin to add validation to the multi-step form. Include the jQuery Validation plugin library.
<script src="js/jquery.validate.js"></script>
jQuery Steps Plugin:
We will use the jQuery Steps plugin to create a wizard-like interface for multi step form. So, include the jQuery Steps plugin library.
<script src="js/jquery.steps.js"></script>
jQuery Custom Code:
The following code handles the operations to make multi-step form functional using jQuery.
#wizard).validate() method of the jQuery Validation library and define validation rules and messages. steps() method of the jQuery Steps library and define configuration options. The validate() method used in this Steps plugin events to integrate the validation functionality with the form wizard.<script>
$(function(){
var formWizard = $("#wizard");
// Form validation with jQuery
formWizard.validate({
rules: {
first_name: "required",
last_name: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
address: "required",
city: "required",
zipcode: "required",
country: "required",
agree: "required"
},
messages: {
first_name: "Please enter your first name",
last_name: "Please enter your last name",
email: "Please enter a valid email address",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please confirm password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
address: "Please enter your address",
city: "Please enter your city",
zipcode: "Please enter your zipcode",
country: "Please select your country",
agree: "Please accept our policy"
}
});
// Multi-step form handler
formWizard.steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "fade",
enableAllSteps: true,
transitionEffectSpeed: 500,
labels: {
finish: "Submit",
next: "Next",
previous: "Previous"
},
onStepChanging: function (event, currentIndex, newIndex){
formWizard.validate().settings.ignore = ":disabled,:hidden";
if(formWizard.valid()){
$('.wizard > .steps li a#wizard-t-'+newIndex).parent().addClass('checked');
$('.wizard > .steps li a#wizard-t-'+newIndex).parent().prevAll().addClass('checked');
$('.wizard > .steps li a#wizard-t-'+newIndex).parent().nextAll().removeClass('checked');
}
return formWizard.valid();
},
onFinishing: function (event, currentIndex){
formWizard.validate().settings.ignore = ":disabled";
return formWizard.valid();
},
onFinished: function (event, currentIndex){
alert('Submitted!');
}
});
// Custom jQuery steps button
$('.forward').click(function(){
$("#wizard").steps('next');
});
$('.backward').click(function(){
$("#wizard").steps('previous');
});
});
</script>
Now, we will submit input fields of multiple steps form in PHP using jQuery and Ajax.
Multi Step Form Submission:
The following jQuery code will post form data to the server-side script (form_submit.php) via Ajax request.
function formSubmission(){
$.ajax({
type:'POST',
url:'form_submit.php',
dataType: "json",
data: $('#wizard').serialize()+'&submit=1',
beforeSend: function () {
$('.form-content').css('opacity', '.5');
$('.actions ul li:nth-child(3) a').css('pointer-events', 'none');
$( '.actions ul li:nth-child(3) a' ).text('Submitting...');
},
success:function(data){
if(data.status == 1){
$('#wizard')[0].reset();
$('.steps').remove();
$('.actions').remove();
$('.image-holder img').attr('src', 'images/wizard-4.png');
$('.form-content').css('position', 'relative');
$('.form-content').html('<div class="status"><p class="success">'+data.msg+'</p></div>');
}else{
$('.status').html('<p class="error">'+data.msg+'</p>');
}
$('.actions ul li:nth-child(3) a').css("pointer-events", "auto");
$( ".actions ul li:nth-child(3) a" ).text( "Submit" );
$('.form-content').css('opacity', '');
}
});
}
The formSubmission() function needs to be placed in the onFinished event of the steps() method. So that the form submission request will be initiated once the user completes the form steps.
formWizard.steps({
...
onFinished: function (event, currentIndex){
// Submit form data
formSubmission();
}
});
Create Database Table:
A table is required to store form inputs in the database. The following SQL creates a users table in the database to store input data of the multi step registration form.
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`first_name` varchar(25) NOT NULL,
`last_name` varchar(25) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(100) DEFAULT NULL,
`gender` varchar(10) DEFAULT NULL,
`address` varchar(255) NOT NULL,
`city` varchar(50) NOT NULL,
`zipcode` varchar(10) NOT NULL,
`country` varchar(50) NOT NULL,
`about` text DEFAULT NULL,
`created` datetime NOT NULL DEFAULT current_timestamp(),
`modified` datetime DEFAULT NULL,
`status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Block',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Database Configuration (dbConfig.php):
The dbConfig.php is used to connect and select the database. Specify the database host ($DB_HOST), username ($DB_USERNAME), password ($DB_PASSWORD), and name ($DB_NAME) as per your MySQL database credentials.
<?php
// Database credentials
$DB_HOST = 'localhost';
$DB_USERNAME = 'root';
$DB_PASSWORD = 'root';
$DB_NAME = 'codexworld_db';
// Connect with the database
$db = new mysqli($DB_HOST, $DB_USERNAME, $DB_PASSWORD, $DB_NAME);
// Display error if failed to connect
if ($db->connect_errno) {
printf("Connect failed: %s\n", $db->connect_error);
exit();
}
?>
Process Form Data (form_submit.php):
This server-side script (form_submit.php) is called by the Ajax request to submit form data in PHP.
<?php
// Load the database configuration file
require_once 'dbConfig.php';
// If form data is submitted by AJAX request
if(isset($_POST['submit'])){
// Define default response
$response = array(
'status' => 0,
'msg' => 'Something went wrong, please try again after some time.'
);
// Get values of input fields
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
$password = $_POST['password'];
$password_hash = md5($_POST['password']);
$gender = $_POST['gender'];
$address = $_POST['address'];
$city = $_POST['city'];
$zipcode = $_POST['zipcode'];
$country = $_POST['country'];
$about = $_POST['about'];
// Check whether the given email already exists
$sqlQ = "SELECT * FROM users WHERE email = ?";
$stmt = $db->prepare($sqlQ);
$stmt->bind_param("s", $email);
$stmt->execute();
$stmt->store_result();
if($stmt->num_rows > 0){
$response['msg'] = 'Your given email is already registered!';
}else{
// Insert user data into the database
$sqlQ = "INSERT INTO users (first_name,last_name,email,password,gender,address,city,zipcode,country,about,created,modified) VALUES (?,?,?,?,?,?,?,?,?,?,NOW(),NOW())";
$stmt = $db->prepare($sqlQ);
$stmt->bind_param("ssssssssss", $first_name, $last_name, $email, $password_hash, $gender, $address, $city, $zipcode, $country, $about);
$insert = $stmt->execute();
if($insert){
$response = array(
'status' => 1,
'msg' => 'Your account has been registered successfully!'
);
}
}
// Return response
echo json_encode($response);
}
?>
In this example, we have integrated the registration form in the multi-step wizard. But you can use this multi-step form functionality for any type of form on the website. The Ajax technology is used to submit the form in PHP without page refresh, which makes the multi-step form submission user-friendly.
All the required CSS and JS files are included in the source code package, download it to get all files together.
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
