Building a Contact Form in PHP

28/12/2020
php

How to create contact form using HTML, CSS and PHP

A contact form is a very essential part of any website. The visitors of the site need to communicate with the site owner for different purposes. By using contact form, the visitors send messages to the administrator or site owner with their contact information. Administrator or site owner can respond to the visitors after reading and considering the importance of their message. You can create a contact form for a site by various ways. How you can create a simple contact form using HTML, CSS and PHP is shown in this tutorials.

Design Contact Form using HTML and CSS

Create a folder named “contactform” in /vat/www/html folder where all files of contact form will be created. Create an html file named contactform.html and a css file named style.css in that folder. Suppose, the contact form will contain four fields. These are name, email, message and Submit button.  Add the following code in the html file.

HTML Code:

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact Form</title>
<link href="style.css" rel="stylesheet" />
</head>

<body>
<div style="background-color:#F0F7F6; width:40%; margin:40px auto;" >
<h2 align="center" style="  background: #DCF5FD; width:99%; height:30px;
color: #807A7A" >
CONTACT FORM </h2>
<form method="post" action="contact.php">
 
<label>Name</label>
<input name="name" placeholder="Enter Your name">
 
<label>Email</label>
<input name="email" type="email" placeholder="Enter your email">
 
<label>Message</label>
<textarea name="message" placeholder="Type Your message"></textarea>
 
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
</body>
</html>

CSS Code:

/* Change the look of Labels */
label {
display:block;
margin-top:20px;
letter-spacing:2px;
}
 
/* Center the form  */
form {
margin:0 auto;
width:450px;
}
 
/* textbox and textarea styles */
input, textarea {
width:430px;
height:25px;
background: #E5FCDF;
padding:10px;
margin-top:3px;
color: #4A2A2B;
border-radius:7px;
border:1px solid green;
}
 
/* height for textarea */
textarea {
height:213px;
}
 
/* Border style on focus */
input:focus, textarea:focus {
border:1px solid #97d6eb;
}
 
/* submit button styles */
#submit {
width:130px;
height:40px;
margin-top:20px;
margin-bottom:20px;
cursor:pointer;
color:#363E3F;
}
 
/* Change button looks on hover */
#submit:hover {
opacity:0.5;
}

Now, run contactform.html file from the browser.

http://localhost/contactform/contactform.html

Output:

Read, Validate and print the form data using PHP

Create a PHP file named contact.php to read form data, validate the data and print the data on the browser. When the user will click Submit button then the form data will send to contact.php. Add php code for three types of validations. If all data are valid then print the data.

PHP Code:

<?php
 
/* Check required fields */
 
if($_POST[‘name’]=="" || $_POST[’email’]=="" || $_POST[‘message’]=="")
{
die ("Required field(s) are empty.");
}
/* Check name field */
else if(strlen($_POST[‘name’]) < 3){
die ("Name should be more than 2 characters");
}
/* Check message field */
else if(strlen($_POST[‘message’]) < 10){
die ("Message should be more than 9 characters");
}
 
 
$name = $_POST[‘name’];
$to = ‘admin@linuxhint.com’;
$from = $_POST[’email’];
$subject = ‘Inquiry’;
$body = ‘Hello,<br/><br/>’.$_POST[‘message’].‘<br/><br/>Thanks, <br/>’.$name;
 
echo "To: ".$to."<br/>From: ".$from."<br/>Subject: ".$subject."<br/><hr><br/>".$body;
 
 
/*————-Add code for sending email—————— */
 
?>

Output:

When any field is empty then the following message will appear.

When the name is less the 3 characters then the following message will appear.

When the message is less the 10 characters then the following message will appear.

When all data are valid then the following message will appear.

By using above codes you can easily create a very simple contact form for your site. Here, the form data are displayed in the browser. If you want to send the data to the site owner or administrator then you can use PHPmailer for sending email with form data which is shown in another tutorial and the link for that tutorial is given below. To prevent Spam messages in your site you can add Anti-Spam field in your contact form.

https://linuxhint.com/how-to-send-email-from-php/

ONET IDC thành lập vào năm 2012, là công ty chuyên nghiệp tại Việt Nam trong lĩnh vực cung cấp dịch vụ Hosting, VPS, máy chủ vật lý, dịch vụ Firewall Anti DDoS, SSL… Với 10 năm xây dựng và phát triển, ứng dụng nhiều công nghệ hiện đại, ONET IDC đã giúp hàng ngàn khách hàng tin tưởng lựa chọn, mang lại sự ổn định tuyệt đối cho website của khách hàng để thúc đẩy việc kinh doanh đạt được hiệu quả và thành công.
Bài viết liên quan

PHP Server Side Charts Tutorial

A very common requirement of business websites is creating charts based on the collected data of the website to find out...
php
28/12/2020

Setting up a Debian 10 LAMP Server for PHP Web Development

In this article, I am going to show you how to setup a LAMP (Linux, Apache, MySQL/MariaDB, PHP) server for PHP web development....
php
29/12/2020

How to Trim Strings in PHP

The function of trimming strings is to remove the unwanted characters from string data.  String data requires trimming...
php
28/12/2020