Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Simple Contact Form using HTML CSS and PHP
A contact form is a great way to allow users to reach out to you directly through your website. Contact forms are a crucial aspect of any website, as they allow visitors to get in touch with the website owner. A contact form on website provides an easy way for visitors to ask questions, make inquiries, or provide feedback.
In this tutorial, we will be discussing how to create a simple contact form using HTML, CSS, and PHP.
Step 1: Create the HTML Form
The first step in creating a contact form is to create its structure using HTML. In this step, we will create the form elements allowing visitors to enter their information and send it to the website owner
<form method="post" action="sendmail.php"> <label for="name">Name:</label> <input type="text" name="name" id="name" required> <label for="email">Email:</label> <input type="email" name="email" id="email" required> <label for="message">Message:</label> <textarea name="message" id="message" required></textarea> <button type="submit" name="submit">Submit</button> </form>
Step 2: CSS - Styling the Form
The next step in creating a contact form is to style it using CSS. While it is possible to create a basic form without any styling, adding some design elements can make it look more professional and visually appealing. Here is an example of the complete contact form with CSS styles
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
form {
margin: auto;
max-width: 500px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], input[type="email"], textarea {
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Contact Us</h1>
<form method="post" action="sendmail.php">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required>
<label for="message">Message:</label>
<textarea name="message" id="message" rows="5" required></textarea>
<button type="submit" name="submit">Submit</button>
</form>
</body>
</html>
The CSS code styles the form with a modern design. The body element sets the font family and background color, while the h1 element centers the "Contact Us" heading. The form element centers the form with a white background, padding, and subtle shadow for a clean appearance.
Step 3: Create the PHP Script
Now that we have created the HTML form and styled it, we need to create a PHP script that will handle the form submission and send the message to the website owner. Create a file named sendmail.php
<?php
if(isset($_POST['submit'])) {
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
// Validate email
if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email format";
exit;
}
$to = "your-email@example.com";
$subject = "New Message from Contact Form";
$body = "Name: $name\nEmail: $email
\nMessage:
$message";
$headers = "From: $email\r\nReply-To: $email";
if(mail($to, $subject, $body, $headers)) {
echo "Thank you for your message! We'll get back to you soon.";
} else {
echo "Sorry, there was an error sending your message.";
}
}
?>
Note: To test email functionality, you need a web server with mail configuration (like XAMPP with Mercury Mail or a live hosting server). The
mail()function won't work in a local environment without proper mail server setup.
How It Works
The PHP script first checks if the form has been submitted by verifying the 'submit' button press. It then retrieves and sanitizes the form values using htmlspecialchars() to prevent XSS attacks. Email validation ensures the submitted email is in correct format.
The mail() function sends the email with proper headers including sender information. The script provides feedback to users whether the message was sent successfully or if an error occurred.
Conclusion
Creating a simple contact form using HTML, CSS, and PHP is essential for any website. This combination provides a professional-looking form that securely processes user submissions and sends them via email, helping you stay connected with your website visitors.
5K+ Views
