How to create comment Form using HTML CSS PHP and MYSQL ?

Posted By: Kanika Gupta Published: 14, Jan 2024

How to create comment Form using HTML CSS PHP and MYSQL ?


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.
        In my case it was, C:\xampp\htdocs\contact.php and C:\xampp\htdocs\config.php

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.

Categories


Create Free Website

Recent Blog

Create Free Website