We have to required many details from users at the time of registration. For capture lots of information at the time of registration we have to make long registration form on our website. So reduce headache of long registration form we have divide that form information in smaller logical section and convert into multi step registration form. This type of multi step form will improve usability of our website as compare to long form. This multi step form we have not only use in registration but we can also in any event where we want to insert lots of data. For making multi step form we have use Bootstrap library and Jquery with PHP server script.
In current scenario web development multistep forms are more popular that long form due to more user user friendliness. Multi step form give us easy step by step fill to complete long procedure form. If there are in long form with too many HTML input fields for fill details then we can break that many input fields into different multiple smaller forms fields, forms filling to user to make it more convenient. And In Multi step form we can divide form validation into different step, so if previous form validation run properly then user can go to next step. So in multi step form can divide validation into different step.
So in this post we have discuss how to make Multi Step Form by using Bootstrap JQuery with PHP PDO and Mysql. By using we will make multi step form which will provide useful functionality to user then input too much data into form. So, We will divide form input fields data into steps and if user has fill first step with proper validation then he can go to next step clicking on next button only and suppose user want to go previous step then he can only go previous step by clicking on previous button only. When use has complete to fill data in all step will proper form validation and he has come to final step then on final step user can submit form data to server. So, multi step form method will reduce human error while filling of data because each step data has varify on that step and if data properly filled then he can go to next step. So, here we have make multi step form by using Jquery Bootstrap with PHP PDO and Mysql.
Source Code
index.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$message = '';
if(isset($_POST["email"]))
{
sleep(5);
$query = "
INSERT INTO tbl_login
(first_name, last_name, gender, email, password, address, mobile_no) VALUES
(:first_name, :last_name, :gender, :email, :password, :address, :mobile_no)
";
$password_hash = password_hash($_POST["password"], PASSWORD_DEFAULT);
$user_data = array(
':first_name' => $_POST["first_name"],
':last_name' => $_POST["last_name"],
':gender' => $_POST["gender"],
':email' => $_POST["email"],
':password' => $password_hash,
':address' => $_POST["address"],
':mobile_no' => $_POST["mobile_no"]
);
$statement = $connect->prepare($query);
if($statement->execute($user_data))
{
$message = '
<div class="alert alert-success">
Registration Completed Successfully
</div>
';
}
else
{
$message = '
<div class="alert alert-success">
There is an error in Registration
</div>
';
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multi Step Registration Form Using JQuery Bootstrap in PHP</title>
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box
{
width:800px;
margin:0 auto;
}
.active_tab1
{
background-color:#fff;
color:#333;
font-weight: 600;
}
.inactive_tab1
{
background-color: #f5f5f5;
color: #333;
cursor: not-allowed;
}
.has-error
{
border-color:#cc0000;
background-color:#ffff99;
}
</style>
</head>
<body>
<br />
<div class="container box">
<br />
<h2 align="center">Multi Step Registration Form Using JQuery Bootstrap in PHP</h2><br />
<?php echo $message; ?>
<form method="post" id="register_form">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active_tab1" style="border:1px solid #ccc" id="list_login_details">Login Details</a>
</li>
<li class="nav-item">
<a class="nav-link inactive_tab1" id="list_personal_details" style="border:1px solid #ccc">Personal Details</a>
</li>
<li class="nav-item">
<a class="nav-link inactive_tab1" id="list_contact_details" style="border:1px solid #ccc">Contact Details</a>
</li>
</ul>
<div class="tab-content" style="margin-top:16px;">
<div class="tab-pane active" id="login_details">
<div class="panel panel-default">
<div class="panel-heading">Login Details</div>
<div class="panel-body">
<div class="form-group">
<label>Enter Email Address</label>
<input type="text" name="email" id="email" class="form-control" />
<span id="error_email" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Password</label>
<input type="password" name="password" id="password" class="form-control" />
<span id="error_password" class="text-danger"></span>
</div>
<br />
<div align="center">
<button type="button" name="btn_login_details" id="btn_login_details" class="btn btn-info btn-lg">Next</button>
</div>
<br />
</div>
</div>
</div>
<div class="tab-pane fade" id="personal_details">
<div class="panel panel-default">
<div class="panel-heading">Fill Personal Details</div>
<div class="panel-body">
<div class="form-group">
<label>Enter First Name</label>
<input type="text" name="first_name" id="first_name" class="form-control" />
<span id="error_first_name" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Last Name</label>
<input type="text" name="last_name" id="last_name" class="form-control" />
<span id="error_last_name" class="text-danger"></span>
</div>
<div class="form-group">
<label>Gender</label>
<label class="radio-inline">
<input type="radio" name="gender" value="male" checked> Male
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="female"> Female
</label>
</div>
<br />
<div align="center">
<button type="button" name="previous_btn_personal_details" id="previous_btn_personal_details" class="btn btn-default btn-lg">Previous</button>
<button type="button" name="btn_personal_details" id="btn_personal_details" class="btn btn-info btn-lg">Next</button>
</div>
<br />
</div>
</div>
</div>
<div class="tab-pane fade" id="contact_details">
<div class="panel panel-default">
<div class="panel-heading">Fill Contact Details</div>
<div class="panel-body">
<div class="form-group">
<label>Enter Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
<span id="error_address" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Mobile No.</label>
<input type="text" name="mobile_no" id="mobile_no" class="form-control" />
<span id="error_mobile_no" class="text-danger"></span>
</div>
<br />
<div align="center">
<button type="button" name="previous_btn_contact_details" id="previous_btn_contact_details" class="btn btn-default btn-lg">Previous</button>
<button type="button" name="btn_contact_details" id="btn_contact_details" class="btn btn-success btn-lg">Register</button>
</div>
<br />
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#btn_login_details').click(function(){
var error_email = '';
var error_password = '';
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if($.trim($('#email').val()).length == 0)
{
error_email = 'Email is required';
$('#error_email').text(error_email);
$('#email').addClass('has-error');
}
else
{
if (!filter.test($('#email').val()))
{
error_email = 'Invalid Email';
$('#error_email').text(error_email);
$('#email').addClass('has-error');
}
else
{
error_email = '';
$('#error_email').text(error_email);
$('#email').removeClass('has-error');
}
}
if($.trim($('#password').val()).length == 0)
{
error_password = 'Password is required';
$('#error_password').text(error_password);
$('#password').addClass('has-error');
}
else
{
error_password = '';
$('#error_password').text(error_password);
$('#password').removeClass('has-error');
}
if(error_email != '' || error_password != '')
{
return false;
}
else
{
$('#list_login_details').removeClass('active active_tab1');
$('#list_login_details').removeAttr('href data-toggle');
$('#login_details').removeClass('active');
$('#list_login_details').addClass('inactive_tab1');
$('#list_personal_details').removeClass('inactive_tab1');
$('#list_personal_details').addClass('active_tab1 active');
$('#list_personal_details').attr('href', '#personal_details');
$('#list_personal_details').attr('data-toggle', 'tab');
$('#personal_details').addClass('active in');
}
});
$('#previous_btn_personal_details').click(function(){
$('#list_personal_details').removeClass('active active_tab1');
$('#list_personal_details').removeAttr('href data-toggle');
$('#personal_details').removeClass('active in');
$('#list_personal_details').addClass('inactive_tab1');
$('#list_login_details').removeClass('inactive_tab1');
$('#list_login_details').addClass('active_tab1 active');
$('#list_login_details').attr('href', '#login_details');
$('#list_login_details').attr('data-toggle', 'tab');
$('#login_details').addClass('active in');
});
$('#btn_personal_details').click(function(){
var error_first_name = '';
var error_last_name = '';
if($.trim($('#first_name').val()).length == 0)
{
error_first_name = 'First Name is required';
$('#error_first_name').text(error_first_name);
$('#first_name').addClass('has-error');
}
else
{
error_first_name = '';
$('#error_first_name').text(error_first_name);
$('#first_name').removeClass('has-error');
}
if($.trim($('#last_name').val()).length == 0)
{
error_last_name = 'Last Name is required';
$('#error_last_name').text(error_last_name);
$('#last_name').addClass('has-error');
}
else
{
error_last_name = '';
$('#error_last_name').text(error_last_name);
$('#last_name').removeClass('has-error');
}
if(error_first_name != '' || error_last_name != '')
{
return false;
}
else
{
$('#list_personal_details').removeClass('active active_tab1');
$('#list_personal_details').removeAttr('href data-toggle');
$('#personal_details').removeClass('active');
$('#list_personal_details').addClass('inactive_tab1');
$('#list_contact_details').removeClass('inactive_tab1');
$('#list_contact_details').addClass('active_tab1 active');
$('#list_contact_details').attr('href', '#contact_details');
$('#list_contact_details').attr('data-toggle', 'tab');
$('#contact_details').addClass('active in');
}
});
$('#previous_btn_contact_details').click(function(){
$('#list_contact_details').removeClass('active active_tab1');
$('#list_contact_details').removeAttr('href data-toggle');
$('#contact_details').removeClass('active in');
$('#list_contact_details').addClass('inactive_tab1');
$('#list_personal_details').removeClass('inactive_tab1');
$('#list_personal_details').addClass('active_tab1 active');
$('#list_personal_details').attr('href', '#personal_details');
$('#list_personal_details').attr('data-toggle', 'tab');
$('#personal_details').addClass('active in');
});
$('#btn_contact_details').click(function(){
var error_address = '';
var error_mobile_no = '';
var mobile_validation = /^\d{10}$/;
if($.trim($('#address').val()).length == 0)
{
error_address = 'Address is required';
$('#error_address').text(error_address);
$('#address').addClass('has-error');
}
else
{
error_address = '';
$('#error_address').text(error_address);
$('#address').removeClass('has-error');
}
if($.trim($('#mobile_no').val()).length == 0)
{
error_mobile_no = 'Mobile Number is required';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').addClass('has-error');
}
else
{
if (!mobile_validation.test($('#mobile_no').val()))
{
error_mobile_no = 'Invalid Mobile Number';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').addClass('has-error');
}
else
{
error_mobile_no = '';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').removeClass('has-error');
}
}
if(error_address != '' || error_mobile_no != '')
{
return false;
}
else
{
$('#btn_contact_details').attr("disabled", "disabled");
$(document).css('cursor', 'prgress');
$("#register_form").submit();
}
});
});
</script>
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_login`
--
CREATE TABLE `tbl_login` (
`id` int(11) NOT NULL,
`first_name` varchar(100) NOT NULL,
`last_name` varchar(100) NOT NULL,
`gender` varchar(30) NOT NULL,
`email` varchar(200) NOT NULL,
`password` varchar(200) NOT NULL,
`address` text NOT NULL,
`mobile_no` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_login`
--
ALTER TABLE `tbl_login`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_login`
--
ALTER TABLE `tbl_login`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;
ded
ReplyDeleteGreat job done. Thank You.
ReplyDeleteThanks Brother.................
ReplyDeleteHi
ReplyDeleteCan this source code could be downloaded and used it in my project that I am building. I like your tutorial very much
thank you so much...
ReplyDeleteThtanks And having good practices with these code..
ReplyDeleteSir you are such a great person.
ReplyDeletethank u so much for this tutorial .
Fatal error: Call to undefined function password_hash() in C:\wamp\www\useraccounts\index.php on line 13
ReplyDeleteAwesome tutorial! Great job and well designed! Thanks.
ReplyDeleteAlthough I use mysqli over PDO, minor adjustment!
Thanks for this important tutx, kindly tell me how enable click on tabs and how to add 1 more tab and click on next prev buttons and direct mouse click?
ReplyDeletenot working in Bootsrap4
ReplyDeleteYou Are Life Saver
ReplyDeleteThanks Very Good Tutorial and source code also working.
ReplyDeleteI am getting an error in the console chrome /firefox when we press F12:
ReplyDelete$(document).ready(function(){
There shouldn't be any error as the jquery has already been referenced in the head part. Any idea how to fix it?
How do I insert code confirm of my password?
ReplyDeletehow can we setup multiple table insert mysql or pgsql? Login details in users table and personal details in profile table in one register.php page ?
ReplyDeletei added one more tab but i want to move after submit it goes to other tab how??
ReplyDelete