A contact form is an essential feature for any website, allowing users to easily get in touch with you. In this tutorial, we’ll walk you through the process of creating a simple contact form using HTML for the front-end and PHP for the back-end.
**Step 1: Setting Up the HTML Form**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form Tutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Contact Us</h1>
<form action="process_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
**Step 2: Creating the CSS (styles.css)**
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
form {
display: inline-block;
text-align: left;
}
label, input, textarea {
margin-bottom: 10px;
display: block;
}
textarea {
width: 100%;
height: 150px;
}
**Step 3: Processing the Form (process_form.php)**
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
// Send the email (you may use a library like PHPMailer or a built-in function like mail())
// For example:
mail("[email protected]", "Contact Form Submission", $message, "From:" . $email);
echo "Thank you, $name, for reaching out to us!";
} else {
header("Location: contact.html"); // Redirect to the contact form if accessed directly
}
?>
Congratulations! You’ve now created a basic contact form using HTML and PHP. Feel free to customize it further or add additional features as per your specific needs. This form will allow your website visitors to get in touch with you easily.
Remember to replace `[email protected]` with your actual email address in the `process_form.php` file.
Happy coding!
—
Feel free to modify the code or add more details as per your specific requirements or preferences.
