Create a simple contact form in PHP with MySQL
By Ujwal Kumar SahooIn this article, we will learn what is a contact form and how we can implement it using PHP. It requires an HTML page to get the data. So we will cover this article in 3 steps-
- Creating an HTML page
- Enhance the HTML page with CSS (*optional)
- Fetching and manipulating form data of the HTML page inside a PHP page.
What is the Contact form?
A contact form is a form where the user /client can post any query to the admin/server. The user leaves a comment and that comment is stored in the server-side database for review. After a successful review the admin contact and reply to that user.
This is how a contact form looks like,
Design an HTML page and CSS for the contact form in PHP
Let us create an HTML page that contains a form to hold the necessary data,
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<h2>Contact Us</h2>
<form class="form" action="contactform.php" method="POST">
<p class="username">
<input type="text" name="name" id="name" placeholder="Enter your name" >
<label for="name">Name</label>
</p>
<p class="useremail">
<input type="text" name="email" id="email" placeholder="[email protected]" >
<label for="email">Email</label>
</p>
<p class="usercontact">
<input type="text" name="contact" id="contact" placeholder="contact no." >
<label for="contact">Phone number</label>
</p>
<p class="usertext">
<textarea name="text" placeholder="Write something to us" ></textarea>
<label for="text">Comments</label>
</p>
<p class="usersubmit">
<input type="submit" name="submit" value="Send" >
</p>
</form>
</body>
</html>
Let us design the form with CSS to enhance the user experience.
body {
padding: 50px 500px;
font-size: 13px;
background-color: deepskyblue;
}
h2 {
margin-bottom: 20px;
font-family: fantasy;
font-size: 40px;
}
input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
width: 200px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
margin-left: 10px;
font-family:monospace;
font-size: 15px;
}
.usersubmit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
}
Output:-
Note:-
It is completely optional to add a CSS file. It is used only for designing purposes.
Designing PHP page to fetch and store data in the database (MySQL)
Let us create a PHP page that can fetch data from the HTML page and store it in the database.
<?php
//creating connection to database
$con=mysqli_connect("localhost","root","","codespeedy") or die(mysqli_error());
//check whether submit button is pressed or not
if((isset($_POST['submit'])))
{
//fetching and storing the form data in variables
$Name = $con->real_escape_string($_POST['name']);
$Email = $con->real_escape_string($_POST['email']);
$Phone = $con->real_escape_string($_POST['contact']);
$comments = $con->real_escape_string($_POST['text']);
//query to insert the variable data into the database
$sql="INSERT INTO contactus (name, email, phone, comments) VALUES ('".$Name."','".$Email."', '".$Phone."', '".$comments."')";
//Execute the query and returning a message
if(!$result = $con->query($sql)){
die('Error occured [' . $conn->error . ']');
}
else
echo "Thank you! We will get in touch with you soon";
}
?>
If there is no error in the HTML page, then after successful insertion of data the output message is as follows,
Thank you! We will get in touch with you soon
Output in the database(Here it is MySQL database) is as follows,
Note:-
Here the name of our database is codespeedy and the table name is contactus.
This is how we can create a contact form in PHP. If you have any queries about the above topic, comment below.
See also,
Hi,
How can I configure the same form data to served on the database and sent to the sender and another copy to the website owners email?
can u please tell me what is the file name of the third source code