BroadOakData.UK

Contact Form using HTML, JavaScript, CSS, PHP and MySQL

Written by

in

Creating a contact form using HTML and saving data in MySQL.

Prerequisites

MySQL
Web server
PHP

Create a table in MySQL database

CREATE TABLE `contact_form_info` (
 `id` INT(11) NOT NULL AUTO_INCREMENT, 
 `name` VARCHAR(90) NULL DEFAULT NULL, 
 `email` VARCHAR(90) NULL DEFAULT NULL, 
 `phone` VARCHAR(40) NULL DEFAULT NULL,
 `comments` TEXT NULL,
  PRIMARY KEY (`id`)
)
;

HTML form

<!DOCTYPE html>
<html>
  <head>
    <!-- Latest compild and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      #loading-img {
        display: none;
      }

      .response_msg {
        margin-top: 10px;
        font-size: 13px;
        background: #E5D669;
        color: #ffffff;
        width: 250px;
        padding: 3px;
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <h1>
            <img src="https://alia119.sg-host.com/wp-content/uploads/2022/01/cropped-utc-logo-small.png" width="80px">Contact Form using JavaScript, CSS, PHP and MySQL
          </h1>
          <form name="contact-form" action="" method="post" id="contact-form">
            <div class="form-group">
              <label for="Name">Name</label>
              <input type="text" class="form-control" name="your_name" placeholder="Name" required>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" name="your_email" placeholder="Email" required>
            </div>
            <div class="form-group">
              <label for="Phone">Phone</label>
              <input type="text" class="form-control" name="your_phone" placeholder="Phone" required>
            </div>
            <div class="form-group">
              <label for="comments">Comments</label>
              <textarea name="comments" class="form-control" rows="3" cols="28" rows="5" placeholder="Comments"></textarea>
            </div>
            <button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
            <img src="img/loading.gif" id="loading-img">
          </form>
          <div class="response_msg"></div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#contact-form").on("submit", function(e) {
          e.preventDefault();
          if ($("#contact-form [name='your_name']").val() === '') {
            $("#contact-form [name='your_name']").css("border", "1px solid red");
          } else if ($("#contact-form [name='your_email']").val() === '') {
            $("#contact-form [name='your_email']").css("border", "1px solid red");
          } else {
            $("#loading-img").css("display", "block");
            var sendData = $(this).serialize();
            $.ajax({
              type: "POST",
              url: "get_response.php",
              data: sendData,
              success: function(data) {
                $("#loading-img").css("display", "none");
                $(".response_msg").text(data);
                $(".response_msg").slideDown().fadeOut(3000);
                $("#contact-form").find("input[type=text], input[type=email], textarea").val("");
              }
            });
          }
        });
        $("#contact-form input").blur(function() {
          var checkValue = $(this).val();
          if (checkValue != '') {
            $(this).css("border", "1px solid #eeeeee");
          }
        });
      });
    </script>
  </body>
</html>

MySQL connection settings

<?php
$host = "127.0.0.1";
$userName = "user";
$password = "password";
$dbName = "database";

// Create database connection
$conn = new mysqli($host, $userName, $password, $dbName);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

Processing form data

<?php
require_once("config.php");
if((isset($_POST['your_name'])&& $_POST['your_name'] !='') && (isset($_POST['your_email'])&& $_POST['your_email'] !=''))
{
$yourName = $conn->real_escape_string($_POST['your_name']);                                     $yourEmail = $conn->real_escape_string($_POST['your_email']);
$yourPhone = $conn->real_escape_string($_POST['your_phone']);
$comments = $conn->real_escape_string($_POST['comments']);

$sql="INSERT INTO contact_form_info (name, email, phone, comments) VALUES ('".$yourName."','".$yourEmail."', '".$yourPhone."', '".$comments."')";


if(!$result = $conn->query($sql)){
die('There was an error running the query [' . $conn->error . ']');
}
else
{
echo "Thank you! We will contact you soon";
}
}
else
{
// get all contacts
    $sql = "SELECT * FROM contact_form_info ORDER BY id DESC";
    $result = mysqli_query($conn, $sql);

    ?>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
        }
    </style>

    <table class="table">

        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone Number</th>
            <th>Notes</th>
        </tr>

<?php while ($row = mysqli_fetch_object($result)): ?>
        <tr>
            <td><?php echo $row->name; ?></td>
            <td><?php echo $row->email; ?></td>
            <td><?php echo $row->phone; ?></td>
            <td><?php echo $row->comments; ?></td>
        </tr>
<?php endwhile; ?>

    </table>
<?php 
}
?>

Screenshots

Contact form

Show data

More posts