Simple Contact Form using HTML CSS and PHP
Last Updated :
05 Aug, 2024
In this article, we will learn to create a basic contact form using HTML, CSS, and PHP.
We are creating a simple HTML form that has three fields name, email address, and message. The design part is implemented using CSS. Any functionality is added to the form using PHP. We can add our own details, such as an address, phone number, email address, etc as per the application's need. We can create the form in multiple sections and HTML divs so that it will be easier to add the styles later.
Example: In the example below, several Font Awesome icons are used. We have created a different section with a heading. In addition to the modified form, we have added the icons and other contact information.
HTML Code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet"
href=
"style.css" />
</head>
<body>
<section id="last">
<!-- heading -->
<div class="full">
<h3>Drop a Message</h3>
<div class="lt">
<!-- form starting -->
<form class="form-horizontal" method="post"
action="contact.php">
<div class="form-group">
<div class="col-sm-12">
<!-- name -->
<input type="text" class="form-control"
id="name" placeholder="NAME"
name="name" value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!-- email -->
<input type="email" class="form-control"
id="email" placeholder="EMAIL"
name="email"
value="" />
</div>
</div>
<!-- message -->
<textarea class="form-control" rows="10"
placeholder="MESSAGE" name="message">
</textarea>
<button class="btn btn-primary send-button"
id="submit" type="submit" value="SEND">
<i class="fa fa-paper-plane"></i>
<span class="send-text">SEND</span>
</button>
</form>
<!-- end of form -->
</div>
<!-- Contact information -->
<div class="rt">
<ul class="contact-list">
<li class="list-item">
<i class="fa fa-map-marker fa-1x">
<span class="contact-text place">
your address
</span>
</i>
</li>
<li class="list-item">
<i class="fa fa-envelope fa-1x">
<span class="contact-text gmail">
<a href="mailto:[email protected]"
title="Send me an email">
[email protected]</a>
</span>
</i>
</li>
<li class="list-item">
<i class="fa fa-phone fa-1x">
<span class="contact-text phone">
(033) 12345678
</span>
</i>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
Output:
CSS Code: After creating the HTML file, we have to add CSS to improve its appearance. Once we add the styles to the code, we have to take care of another thing. Our website should be able to adapt to different screen sizes and resolutions. So we have to add media queries. The following CSS code is the content for the file "style.css" used in the above HTML code.
style.css
CSS
#last{
width: 100%;
height: auto;
justify-content: center;
background-color: #ffb3b3;
}
.full{
width: 80%;
display: inline-block;
margin:2%;
margin-left: 10%;
text-align: center;
background-color: black;
color: white;
border:15px solid orange;
border-radius: 5px;
margin-bottom: 8%;
margin-top: 8%;
}
.full h3{
font-size: 2rem;
display:block;
margin: 2%;
margin-bottom: 0;
}
.lt{
padding: 2%;
margin: 2%;
}
.rt{
padding: 2%;
margin: 2%;
}
.lt textarea{
width: 94%;
margin-left: 2.8%;
}
button{
margin: 2%;
}
.btn-primary{
background-color: black;
border: 2px solid white;
border-radius: 5%;
}
.list-item{
margin-bottom: 2%;
list-style-type: none;
}
.list-item span{
margin-left: 10px;
font-size: 1.4rem;
}
.list-item a{
color: white;
display: inline-block;
}
.list-item a:hover{
text-decoration: underline;
}
.form-control{
background-color: black;
}
@media screen and (min-width: 770px){
.full{
width: 70%;
margin-left: 15%;
}
.lt textarea{
width: 95%;
margin-left: 2.4%;
}
}
@media screen and (min-width: 1100px){
.full{
width: 65%;
margin-left: 17%;
margin-top: 5%;
}
.lt{
width: 55%;
display: inline-block;
float: left;
margin-right: 0;
}
.rt{
width: 35%;
display: inline-block;
margin-left: 0;
}
.list-item{
margin-bottom: 10%;
}
.contact-list{
margin-top: 22%;
padding-right: 8%;
}
.fa-envelope, .gmail{
display: inline-block;
width: auto;
}
}
PHP code: To add functionality to the form, we are using phpmailer. A separate php file "contact.php" is created and the name of the file is added in the HTML file in the form action field.
<form class="form-horizontal" method="post" action="contact.php">
In the following code, we are getting the name, email, and message from the contact form. When "SEND" button is clicked, an email is sent from the website to the email address specified in the PHP code, with the subject line "This is the subject line".
PHP
<?php
// Get data from form
$name = $_POST['name'];
$email= $_POST['email'];
$message= $_POST['message'];
$to = "[email protected]";
$subject = "This is the subject line";
// The following text will be sent
// Name = user entered name
// Email = user entered email
// Message = user entered message
$txt ="Name = ". $name . "\r\n Email = "
. $email . "\r\n Message =" . $message;
$headers = "From: [email protected]" . "\r\n" .
"CC: [email protected]";
if($email != NULL) {
mail($to, $subject, $txt, $headers);
}
// Redirect to
header("Location:last.html");
?>
In the above example, the redirection location is given as "last.html". We can redirect to any file name. The above code cannot be tested in the web browser or live server. To test the working of the emails, paid host server is needed.
Output:
Similar Reads
Signup form using PHP and MySQL Database
The task is to create and design a sign-up form in which if the user enters details, the HTML form data are inserted into our MySQL server database. Approach: First task is that we have to create our MySQL server Database and a Table according to our requirements. We connect our MySQL server Databas
4 min read
How to Insert Form Data into Database using PHP ?
In modern web development, Handling User Input is a fundamental task. One of the most common Operations is capturing data from a form and inserting it into database. PHP, combined with MySQL, offers a straightforward and powerful way to achieve it.Here, we will see complete process of inserting form
4 min read
How to Upload Image into Database and Display it using PHP ?
Uploading the image/videos into the database and displaying it using PHP is the way of uploading the image into the database and fetching it from the database. Using the PHP code, the user uploads the image or videos they are safely getting entry into the database and the images should be saved into
8 min read
How to create a PHP form that submit to self ?
Forms can be submitted to the web page itself using PHP. The main purpose of submitting forms to self is for data validation. Data validation means checking for the required data to be entered in the form fields. PHP_SELF is a variable that returns the current script being executed. You can use this
3 min read
How to select and upload multiple files with HTML and PHP, using HTTP POST?
In this article, we will look at how to upload multiple files with HTML and PHP. Multiple image upload allows the user to select multiple files at once and upload all files to the server. index.html Create a simple HTML page to select multiple files and submit it to upload files on the server. Here,
3 min read
How to check form submission in PHP ?
Given a form and the task is to check form submitted successfully or not. Use the PHP program for the backend to check form submission and HTML and CSS to create the form as frontend. Syntax: if (!empty($_POST)) if (isset($_POST['submit'])) Use these two statements to check whether the form submitte
3 min read
Online Group Chat application using PHP
Prerequisites:Â Technical knowledge: HTMLCSSJavascript (basics)PHP (Database connectivity)SQL queries Softwares to be installed: XAMPP server: This is a free software which contains web server Apache, Database management system for MySQL (or MariaDB). It can be downloaded for free from the official s
9 min read
How to Pop an Alert Message Box using PHP?
The alert message just like a pop-up window on the screen. Using this you can alert to the user with some information and message. PHP doesn't support alert message box because it is a server-side language but you can use JavaScript code within the PHP body to alert the message box on the screen.Syn
1 min read
How to Get $_POST from multiple check-boxes ?
$_POST is an array of variable names. The program given below illustrates how to write HTML structure for multiple valued checkbox and to get the values of multiple valued checkbox using $_POST in PHP. Note: The name attribute of checkboxes must be the same name and must be initialized with an array
2 min read
How to send a GET request from PHP?
There are mainly two methods to send information to the web server which are listed below: GET Method: Requests data from a specified resource. POST Method: Submits data to be processed to a specified resource. Get Method: The GET method sends the encoded user information appended to the page reques
2 min read