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" target="_blank" rel="nofollow" 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/[email protected]/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 = "[email protected]";
$subject = 'Contact';
$header = "From: " . $name . "\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....
