Multi step registration form in PHP
Multi Step Responsive Form Using PHP JavaScript and HTML
In this blog we are going to create a simple registration form with multiple steps. In this example we used simple JavaScript functions and HTML with CSS. So for creating multistep form applications using PHP here I provided some points to follow. Please check out the code example and requirements for building multistep form in PHP
Database:
Create Database and Table with given MySQL Code
Database: coding-zon
Table structure for table register
CREATE TABLE IF NOT EXISTS register (
id int(11) NOT NULL AUTO_INCREMENT,
fname varchar(30) NOT NULL,
lname varchar(30) NOT NULL,
username varchar(30) NOT NULL,
password varchar(150) NOT NULL,
email varchar(30) NOT NULL,
phone varchar(30) NOT NULL,
birthdate varchar(30) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;Folder structure:
In this application we are using only 2 files.
- index.php
- action-page.php
So, let’s walk through the steps on how to create a multistep form in PHP.
STEP-1. Create one folder in Server.
STEP-2. Create Index.php. Next go to given link, copy the code and paste in index.php.
Get the form code from Here.
STEP-3. Create action-page.php with code given below.
action-page.php
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<body>
<?php
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_NAME', 'coding-zon');
$con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
$fname = $_POST["fname"];
$lname = $_POST["lname"];
$uname = $_POST["uname"];
$password = $_POST["pword"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$date = $_POST["dd"]."-".$_POST["mm"]."-".$_POST["yyyy"];
$query = "insert into register(fname,lname,username,password,email,phone,birthdate)
values('$fname','$lname','$uname','$password','$email','$phone','$date')";
$result=mysqli_query($con,$query );
if($result){
?>
<div id="regForm"><span class="success"></span><h1>Registration Success</h1></div>
<?php
}
else{
?>
<div class="regForm"><h1>Oops!! Something went wrong.</h1></div>
<?php
}
?>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: 100px auto;
font-family: Raleway;
padding: 40px;
width: 50%;
min-width: 300px;
}
h1 {
text-align: center;
}
.success {
height: 25px;
width: 12px;
margin-left: 50%;
display: inline-block;
transform: rotate(45deg);
border-bottom: 7px solid #78b13f;
border-right: 7px solid #78b13f;
}
</style>
</body>
</html>
STEP-4. Open index.php in Browser.
Demo:



Comments
Post a Comment