PHP Contact Form Tutorial with JQuery Validation

11-Apr-2023

.

Admin

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` (

`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

`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

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

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.

<?php

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

index.php

<?php session_start(); ?>

<!DOCTYPE html>

<html>

<head>

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" 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;

}

</style>

</head>

<body>

<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 - NiceSnippets.com</strong></h5>

</div>

<div class="card-body">

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

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

<?php

echo $_SESSION['message'];

unset($_SESSION['message']);

?>

</div>

<?php }?>

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

<div class="form-group">

<label>Name</label>

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

</div>

<div class="form-group">

<label>Email</label>

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

</div>

<div class="form-group">

<label>Mobile No.</label>

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

</div>

<div class="form-group">

<label>Message</label>

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

</div>

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

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

</div>

</form>

</div>

</div>

</div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>

<script>

$(function() {

$("form[name='contact-form']").validate({

// 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) {

form.submit();

}

});

});

</script>

</body>

</html>

Step 4 : Create Store Form File store.php

store.php

<?php

session_start();

include 'config.php';

extract($_POST);

// Send email

if(!empty($_POST)) {

$to = "bagadamehul615@gmail.com";

$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";

}

}else{

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

}

header("Location:index.php");

It will help you....

#Css

#Html

#Bootstrap 4

#Bootstrap

#Jquery

#PHP