Handling multiple forms on a single page in PHP can be a bit tricky if you're just getting started. In this guide, we'll break down how to manage multiple forms using PHP, along with some basic styling to make your forms look neat and professional. This tutorial is perfect for beginners who want to learn how to handle multiple form submissions in PHP while keeping their design clean and simple.
Sometimes, you might need to collect different types of information from users on a single page. Instead of cramming all fields into one large form, splitting them into smaller, more focused forms can make the user experience better and your code easier to manage.
We'll create a page with three forms, each having one input field and a submit button. The forms will be distinguished using hidden inputs, allowing us to identify which form was submitted. We'll also add basic styling using CSS to enhance the look of the forms.
Let's start by setting up the PHP script that will handle our form submissions. We'll name this file handle_forms.php.
Here's the PHP code:
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
// Check which form is submitted
$form_type = $_POST["form_type"];
switch ($form_type) {
case "form1":
$input1 = $_POST["input1"];
echo "Form 1 Submitted with Input: " . htmlspecialchars($input1);
break;
case "form2":
$input2 = $_POST["input2"];
echo "Form 2 Submitted with Input: " . htmlspecialchars($input2);
break;
case "form3":
$input3 = $_POST["input3"];
echo "Form 3 Submitted with Input: " . htmlspecialchars($input3);
break;
default:
echo "Unknown form submitted!";
break;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Forms in PHP</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.form-container {
background: white;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 300px;
}
.form-container h2 {
font-size: 18px;
margin-bottom: 10px;
}
.form-container input[type="text"],
.form-container input[type="submit"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-container input[type="submit"] {
background-color: #4CAF50;
color: white;
cursor: pointer;
border: none;
}
.form-container input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Form 1</h2>
<form action="handle_forms.php" method="POST">
<input type="hidden" name="form_type" value="form1">
<input type="text" name="input1" placeholder="Enter value for Form 1">
<input type="submit" value="Submit Form 1">
</form>
</div>
<div class="form-container">
<h2>Form 2</h2>
<form action="handle_forms.php" method="POST">
<input type="hidden" name="form_type" value="form2">
<input type="text" name="input2" placeholder="Enter value for Form 2">
<input type="submit" value="Submit Form 2">
</form>
</div>
<div class="form-container">
<h2>Form 3</h2>
<form action="handle_forms.php" method="POST">
<input type="hidden" name="form_type" value="form3">
<input type="text" name="input3" placeholder="Enter value for Form 3">
<input type="submit" value="Submit Form 3">
</form>
</div>
</body>
</html>