When creating a multi-page form, you can save the data being entered at every step in session variables or temporary database. In this tutorial, we will be creating three different pages to save the information being entered in the session variables.
Multi-page Form in PHP
To get started, create a web form as shown below
Form 1
<?php
session_start ();
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
*{box-sizing:border-box; margin:0; padding:0; }
body{font-family: 'Open Sans', sans-serif; color:#333; font-size:14px; background-color:#dadada; padding:100px;}
/*form styles*/
#msform {
width: 400px; margin: 50px auto; text-align: center; position: relative;
}
#msform fieldset {
background: white; border: 0 none; border-radius: 3px;
padding: 20px; width: 80%; margin: 0 10%; position: relative;
}
#msform input, #msform textarea {
padding: 15px; border: 1px solid #ccc; border-radius: 3px;
margin-bottom: 10px; width: 100%;
box-sizing: border-box;
color: #2C3E50;
}
#msform .action-button {
width: 100%;
background: #16a9ff;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px;
margin: 10px 0;
}
#msform .action-button:hover, #msform .action-button:focus {
background-color: #0a7cbe;
}
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
</style>
<body>
<form id="msform" action="server1.php" method="post">
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">MultiPage Form </h2>
<h3 class="fs-subtitle">Login Information</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="submit" name="next" class="next action-button" value="Next" />
</fieldset>
</form>
</body>
</html>
Add another form
Form 2
<?php
session_start ();
if(isset($_POST['next'])){
$_SESSION['email'] =$_POST['email'];
$_SESSION['pass'] =$_POST['pass'];
}
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
*{box-sizing:border-box; margin:0; padding:0; }
body{font-family: 'Open Sans', sans-serif; color:#333; font-size:14px; background-color:#dadada; padding:100px;}
/*form styles*/
#msform {
width: 400px; margin: 50px auto; text-align: center; position: relative;
}
#msform fieldset {
background: white; border: 0 none; border-radius: 3px;
padding: 20px; width: 80%; margin: 0 10%; position: relative;
}
#msform input, #msform textarea {
padding: 15px; border: 1px solid #ccc; border-radius: 3px;
margin-bottom: 10px; width: 100%;
box-sizing: border-box;
color: #2C3E50;
}
#msform .action-button {
width: 100%;
background: #16a9ff;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px;
margin: 10px 0;
}
#msform .action-button:hover, #msform .action-button:focus {
background-color: #0a7cbe;
}
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
</style>
<body>
<form id="msform" action="server2.php" method="post">
<fieldset>
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
<input type="submit" name="next1" class="next action-button" value="Next" />
</fieldset>
</form>
</body>
</html>
And the result form…
<?php
session_start ();
if(isset($_POST['next1'])){
$_SESSION['twitter'] =$_POST['twitter'];
$_SESSION['facebook'] =$_POST['facebook'];
$_SESSION['gplus'] = $_POST['gplus'];
}
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
*{box-sizing:border-box; margin:0; padding:0; }
body{font-family: 'Open Sans', sans-serif; color:#333; font-size:14px; background-color:#dadada; padding:100px;}
</style>
<body>
<h4>Here is what you have entered.</h4><br/>
<p>Email: <?php echo $_SESSION['email']; ?> </p>
<p>Google Plus: <?php echo $_SESSION['gplus']; ?></p>
<p>Twitter: <?php echo $_SESSION['twitter'];?></p>
<p>Facebook: <?php echo $_SESSION['facebook'];?></p>
</body>
</html>
Note: The example presented in the tutorial is just for an educational purpose. Don’t use sessions to store password or any other sensitive information.
Recommended reading
Comments