How to create comment Form using HTML CSS PHP and MYSQL ?
Posted By: Kanika Gupta Published: 14, Jan 2024
Table of Contents
- 1. portfolio.html
- 2. portfoliostyle.css
- 3. config.php
- 4. contact.php
- 4.1. Note: The PHP files are also saved in the “htdocs” local folder where XAMPP is installed. In my case it was, C:\xampp\htdocs\contact.php and C:\xampp\htdocs\config.php
- 4.2. Note: Names of the database, table and table columns mentioned in the code should be the same as mentioned in the XAMPP software in order to avoid errors.
Comments section is a widely used feature of websites especially blogs, e-commerce websites, news websites and somethings used as a part of contact section in personal portfolio.
In this blog, we are going to discuss the setup of a comment section form using the technologies – PHP and MySQL.
Let us first start by creating a basic HTML form for our website. We will also make use of Json objects to link the form with our PHP file.
portfolio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="portfoliostyle.css">
<title>comment section</title>
<div class="wrapper">
<form action="" method="POST" class="form">
<div class="row">
<div class="input-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your Name" required="">
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your Email" required="">
</div>
</div>
<div class="input-group textarea">
<label for="comment">Comment</label>
<textarea id="comment" name="comment" placeholder="Enter your Comment" required=""></textarea>
</div>
<div class="input-group">
<a href="javascript:void(0);" id="submit-button" class="clickpost">Post Comment</a>
<script>
$(document).ready(function () {
$("#submit-button").click(function (event) {
var formData = {
name: $("#name").val(),
email: $("#email").val(),
comment: $("#comment").val(),
};
$.ajax({
type: "POST",
url: "http://localhost/contact.php",
data: formData,
dataType: "json",
encode: true,
}).done(function (data) {
console.log(data);
if(data==1)
{
alert("Thank you for contacting!");
}
else{
alert("Try again");
}
});
event.preventDefault();
});
});
</script>
</div>
</form>
</div>
</body>
</html>
Next, we add CSS to the form to give it some styling.
portfoliostyle.css
.wrapper {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 15px;
}
.wrapper .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.wrapper .form .row .input-group {
padding: 0 10px;
display: block;
}
.wrapper .form .input-group {
width: 100%;
height: 50px;
margin-bottom: 50px;
}
.wrapper .form .input-group label {
font-weight: 600;
margin-bottom: 5px;
display: block;
}
.clickpost {
display: block;
padding: .9rem 1rem;
opacity: .8;
color: #FFF;
background-color: #DC143C;
border: 1px solid #DC143C;
outline: none;
border-radius: 3px;
cursor: pointer;
transition: .3s ease-in;
font-size: 15px;
text-align: center;
}
.clickpost:hover {
opacity: 1;
color: #FFF;
text-decoration: none;
}
.wrapper .form .input-group input, .wrapper .form .input-group textarea {
width: 100%;
height: 100%;
border: 1px solid #DC143C;
outline: none;
padding: 5px 10px;
}
.wrapper .form .input-group.textarea {
height: 200px;
}
.wrapper .form .input-group.textarea textarea {
resize: none;
}
This is the final product of our form using frontend so far!
Next we configure PHP in our code and access database using XAMPP.
config.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "comment_section";
$conn = mysqli_connect($server, $username, $password, $database);
if (!$conn) { // If Check Connection
die("<script>alert('Connection Failed.')</script>");
}
?>
Lastly, we make another php file to take and store the inputs of comment section in a database.
contact.php
<?php
include 'config.php';
error_reporting(0);
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
$sql = "INSERT INTO comments (name, email, comment)
VALUES ('$name', '$email', '$comment')";
$result = mysqli_query($conn, $sql);
if ($result) {
echo "<script>alert('Thank you for contacting!')</script>";
} else {
echo "Try again!";
}
}
?>
Note: The PHP files are also saved in the “htdocs” local folder where XAMPP is installed.
After we finish up the coding part, we move to installing and setting-up XAMPP to work on MYSQL.
The steps are:
- Install XAMPP software on your local machine from the official website with default configurations.
- Click on start Apache and MySQL actions.
- Click on Admin action of MySQL to land on phpMyAdmin portal connected to your localhost.
- Create a new database using “new” option on the left side of the portal.
- Create table with the required number of columns, here, I require only 4.
- Insert column names, data types and other values to your table.
- Now, we have completed setting up of database and its connection with our comment section.
Note: Names of the database, table and table columns mentioned in the codeshould be the same as mentioned in the XAMPP software in order to avoid errors.
This is how a we make use of HTML forms to design a database supported comment section for our websites. Do try it out and let your creativity flow with the concept and styling as well.