PHP Contact Form Tutorial with JQuery Validation

Css , Html , Bootstrap 4 , Bootstrap , Jquery , PHP




PHP Contact Form Tutorial with JQuery Validation

Hi Guys,

In this blog, I will learn you contact form tutorial with jquery validation in php. We will show php contact form with validation example. I am going to learn you submit contact form with jquery validation in php.

In this article, We will show php contact form with validation example. This tutorial will give you create contact form with validation in php. We will talk about how to create a bootstrap contact form with php, jquery.

Here i will full example for php contact form tutorial with jquery validation. So let's follow bellow step by step:

Step 1 : Create Contact Form Table

In the first step, you have to need a contact form table for insert contact data So let's create contact_list table using bellow sql query :

CREATE TABLE `contacts_list` (


`name` varchar(100) NOT NULL,

`email` varchar(100) NOT NULL,

`mobile_no` varchar(50) NOT NULL,

`Message` text NOT NULL,

`sent_date` datetime NOT NULL


Step 2 : Database Configuration config.php

Now, We will setup database configuration in one file as config.php file and fill the bellow inforamtion as your database inforamtion.


$host = "localhost"; /* Host name */

$user = "root"; /* User */

$password = "root"; /* Password */

$dbname = "contacts"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection

if (!$con) {

die("Connection failed: " . mysqli_connect_error());


Step 3 : Create index.php File

In this step, You can create contact form and put the bellow code :


<?php session_start(); ?>

<!DOCTYPE html>



<title>PHP Contact Form Tutorial with JQuery Validation -</title>

<link rel="stylesheet" href="" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />

<script src="" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>

<style type="text/css">

.error {

color: #DC143C;

font-weight: 400;

display: block;

padding: 6px 0 0;

font-size: 14px;

margin-bottom: 0px !important;


.form-control.error {

border-color: #DC143C;

padding: .375rem .75rem;





<div class="container">

<div class="row mt-5">

<div class="col-md-8 offset-2">

<div class="card mt-5">

<div class="card-header bg-info text-white">

<h5><strong>PHP Contact Form Tutorial with JQuery Validation -</strong></h5>


<div class="card-body">

<?php if(!empty($_SESSION['message'])) {?>

<div class="alert text-center alert-success" role="alert">


echo $_SESSION['message'];




<?php }?>

<form action="store.php" name="contact-form" method="post" enctype="multipart/form-data">

<div class="form-group">


<input type="text" class="form-control" name="name" id="name">


<div class="form-group">


<input type="email" class="form-control" name="email" id="email">


<div class="form-group">

<label>Mobile No.</label>

<input type="text" class="form-control" name="mobile_no" id="mobile_no">


<div class="form-group">


<textarea class="form-control" name="message" id="message" rows="4"></textarea>


<div class="form-group text-center">

<button class="btn btn-success">Save</button>








<script src=""></script>

<script src=""></script>


$(function() {


// Define validation rules

rules: {

name: "required",

email: "required",

mobile_no: "required",

subject: "required",

message: "required",

name: {

required: true


email: {

required: true,

email: true


mobile_no: {

required: true,

minlength: 10,

maxlength: 10,

number: true


subject: {

required: true


message: {

required: true



// Specify validation error messages

messages: {

name: "The name field is required.",

email: {

required: "The email field is required",

minlength: "Please enter a valid email address"


mobile_no: {

required: "The mobile number field is required",

minlength: "Mobile number must be min 10 characters long",

maxlength: "Mobile number must not be more than 10 characters long"


subject: "The subject field is required",

message: "The message field is required"


submitHandler: function(form) {








Step 4 : Create Store Form File store.php




include 'config.php';


// Send email

if(!empty($_POST)) {

$to = "";

$subject = 'Contact';

$header = "From: " . $name . "<". $email .">\r\n";

mail($to, $subject, $message, $header);

// Store contactor data in database

$q = "INSERT INTO contacts_list(name, email, mobile_no, message, sent_date)

VALUES ('{$name}', '{$email}', '{$mobile_no}', '{$message}', now())";

$sql = mysqli_query($con, $q);

if(!$sql) {

die("MySQL query failed.");

} else {

$_SESSION['message'] = "Message Sent Successfully";



$_SESSION['message'] = "Message coudn't be sent, try again";



It will help you....

Recommended Posts