Create a simple contact form in PHP with MySQL

In 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,

Create a simple contact form in PHP with MySQL

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:-

contact form

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,

contact form data stored in MySQL

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.

Create a simple contact form in PHP with MySQL

What is the Contact form?

Design an HTML page and CSS for the contact form in PHP

Designing PHP page to fetch and store data in the database (MySQL)

Leave a Reply Cancel reply

Related Posts