Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
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, but adding some design elements can make it look more professional and visually appealing. Here is an example of the contact form with basic CSS styles −
<!DOCTYPE html>
<html>
<head>
<title> Contact Form </title>
<style>
body {
font-family : Arial, sans-serif;
}
h1 {
text-align : center;
}
form { margin : auto; max-width: 500px;
}
label {
display : block; margin-bottom: 10px;
}
input[type = "text"], input[type = "email"], textarea { padding: 10px; width: 100%; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 20px;
}
submit{
background-color : #4CAF50;
color : #fff;
padding : 10px 20px; border : none; border-radius : 4px; cursor : pointer;
}
button:hover {
background-color : #3e8e41;
}
</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" required></textarea>
<button type = ”submit” name = ”submit”> Submit </buton>
</form>
</body>
We first define a contact form in the code. The first line, “<!DOCTYPE html>” declares the document type as HTML5; the code defines a form that will be submitted using the post method to a PHP script named “sendmail.php”.
The form contains three input fields: name, email, and message; when the user clicks the “submit” button, data of the form will be sent to the PHP script for processing.
This CSS code will style the form with a simple, modern design. The "body" element sets the font family, while the "h1" element centers the "Contact Us" heading. The "form" element centers the form and sets its maximum width to 500px.
The "label" element adds spacing and styling to the input fields' labels. The input fields themselves are styled with padding, border, and margin properties, and the button element creates a button that stands out and changes color on hover.
Step 3: Create the PHP Script
Now that we have created the HTML form and styled it as well, we need to create a PHP script that will handle the form submission and send the message to the website owner. Here's a simple PHP code that you can use −
Example
<?php
if(isset($_POST['submit'])){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = "your-email@xyz.com";
$subject = "New Message from Contact Form";
$body = "Name : $name
Email: $email
$message";
mail($to,$subject,$body);
echo "Thank you for your message!";
}
?>
This code first checks if the form has been submitted by checking if the ‘submit’ button has been pressed. If it has pressed, the code retrieves the values of the form fields and stores them in a variable, the $to variable should be set to the email address that you want the form submission to be sent to.
The next few lines create the email that will be sent. The ‘$subject’ variable is the subject of the form, and the ‘$body’ variable contains the message that was submitted through the form. The ‘mail()’ function sends the email to the specified email address.
In conclusion, creating a simple contact form using HTML, CSS, and PHP is essential to any website. It allows visitors to get in touch with the website owner, by following the steps outlined in this article, you can create a basic contact form that will help you stay connected with your website visitors.
3K+ Views
