multi step form using jquery bootstrap and php

php code / April 26, 2018

Multi-Step-Form is a Full Responsive Multi Step PHP Working Multipurpose Ajax Form with Required field jQuery approval based on PHP, HTML5/CSS3, jQuery and Ajax. Code written just by which you can without much of a stretch coordinated at your site
Multi-Step-Form Responsive PHP Working Multi Step Ajax Form can be utilized for your association, organization, business. With the goal that your guests, clients, customers, operators, individuals can utilize this frame to get Quote as well as let you know their administration worry through the shape. Utilizing this Plugin you can oversee Multi Step frame. We have done all setup PHP, jQuery and Ajax, so no page reload will happen. Get the IP of the sender inside the email body and this shape has Anti Spam (straightforward Math Captcha) human check.

Multi-Step-Form is a responsive, spotless, very much reported Ajax Form. It can be just incorporated at your site with the documentation help. Every one of the codes are spotless, very much remarked and efficient with legitimate help documentation. It looks extraordinary with a wide range of gadgets. Experiment with the demo.

Presently a day’s Multi Step Forms are more prominent because of more clients inviting. The Multi Step Form gives simple well ordered method to finish long FORM. At the point when there is long FORM with an excessive number of fields, you can break the extensive FORM into different littler Forms with few information fields on each Form to make it more helpful for clients. So in this instructional exercise you figure out how to actualize Multi Step Form with Progress Bar utilizing jQuery. We will outline Multi Step Form with Progress Bar utilizing Bootstrap and handle ventures to show diverse structures utilizing jQuery and

db_connect.php
index.php
multi_form_action.php
form.js
In this instructional exercise we will execute usefulness to make client account with numerous structures. For this we require a database table to store client points of interest. So we will make table client to store client account subtle elements utilizing beneath MySQL question.

Step by step Code here

step 1: created container.php

</head>

<span class=”sr-only”>Toggle navigation</span>

</button>

<a href=”#” class=”navbar-brand”>PHPCODE</a>

</div>

</ul>

</div><!–/.nav-collapse –>

</div>

</div>

step 2: created db_connect.php

<?php

/* Database connection start */

$servername = “localhost”;

$username = “root”;

$password = “”;

$dbname = “demos”;

$conn = mysqli_connect($servername, $username, $password, $dbname) or die(“Connection failed: ” . mysqli_connect_error());

if (mysqli_connect_errno()) {

printf(“Connect failed: %sn”, mysqli_connect_error());

exit();

}

step 3: created header.php

<!DOCTYPE html>

<html>

<head>

<!– jQuery –>

step 4: created footer.php

</div>

</body></html>

step 5: created index.php

<?php

include(‘header.php’);

<title>phpcode : Demo Multi Step Form using jQuery, Bootstrap and PHP</title>

#register_form fieldset:not(:first-of-type) {

display: none;

}

</style>

<?php include(‘container.php’);?>

<h2>Example: Multi Step Form using jQuery, Bootstrap and PHP</h2>

</div>

<h2>Step 1: Add Account Details</h2>

<label for=”email”>Email address*</label>

</div>

<label for=”password”>Password*</label>

</div>

</fieldset>

<h2> Step 2: Add Personal Details</h2>

<label for=”first_name”>First Name</label>

</div>

</div>

</fieldset>

<h2>Step 3: Add Contact Information</h2>

<label for=”mobile”>Mobile*</label>

</div>

<label for=”address”>Address</label>

</div>

</fieldset>

</form>

<a class=”btn btn-default read-more” style=”background:#3399ff;color:white” href=”#” title=””>Back to Tutorial</a>

</div>

<?php include(‘footer.php’);?>

step 6: created multi_form_action.php

<?php

include(‘header.php’);

include_once(“db_connect.php”);

<title>phpcode : Demo Multi Step Form using jQuery, Bootstrap and PHP</title>

<?php include(‘../container.php’);?>

<h2>Example: Multi Step Form using jQuery, Bootstrap and PHP</h2>

<?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!”;

}

</div>

<a class=”btn btn-default read-more” style=”background:#3399ff;color:white” href=”#” title=””>Back to Tutorial</a>

</div>

<?php include(‘footer.php’);?>

step 7: created user.sql

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 ;

step 8: created form.js

$(document).ready(function(){

var form_count = 1, previous_form, next_form, total_forms;

total_forms = $(“fieldset”).length;

$(“.next-form”).click(function(){

previous_form = $(this).parent();

next_form = $(this).parent().next();

next_form.show();

previous_form.hide();

setProgressBarValue(++form_count);

});

$(“.previous-form”).click(function(){

previous_form = $(this).parent();

next_form = $(this).parent().prev();

next_form.show();

previous_form.hide();

setProgressBarValue(–form_count);

});

setProgressBarValue(form_count);

function setProgressBarValue(value){

var percent = parseFloat(100 / total_forms) * value;

percent = percent.toFixed();

$(“.progress-bar”)

.css(“width”,percent+”%”)

.html(percent+”%”);

}

// Handle form submit and validation

$( “#register_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;

}

});

DOWNLOAD