PHP Contact Form with jQuery Validation Example

Simple contact form submits in PHP MySQL with jQuery validation. In this tutorial, you will learn how to create a contact form in PHP, and how to submit form data into the MySQL database with jQuery validation.

This tutorial helps you step by step for creating or submit a contact forms in PHP MySQL DB with jQuery validation. And you can use this form for your business queries. The good thing is you can use this contact form in your web application too.

Contact Form Validation using jQuery in PHP

Just follow the few below steps and easily create and submit contacct form in PHP MySQL with jquery validation.

  • Step 1 – Create Table in Database
  • Step 2 – Create a Database Connection File
  • Step 3 – Create Contact Form in PHP

Step 1 – Create Table in Database

First of all, go to your PHPMyAdmin and create a table name contacts_list with the following fields: name, email, mobile.

CREATE TABLE `contacts_list` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `name` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `phone` varchar(50) NOT NULL, `subject` varchar(255) NOT NULL, `Message` text NOT NULL, `sent_date` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Step 2 – Create a Database Connection File

In this step, you will create a file name db.php and update the below code into your file.

The below code is used to create a MySQL database connection in PHP. When we insert form data into MySQL database, there we will include this file:

<?php $servername='localhost'; $username='root'; $password=''; $dbname = "my_db"; $conn=mysqli_connect($servername,$username,$password,"$dbname"); if(!$conn){ die('Could not Connect MySql Server:' .mysql_error()); }
?>

Step 3 – Create Contact Form in PHP

In this step, you need to create contact form and add following code into your contact-form.php file:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contact Form in PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
.container {
max-width: 500px;
margin: 50px auto;
text-align: left;
font-family: sans-serif;
}
form {
border: 1px solid #1A33FF;
background: #ecf5fc;
padding: 40px 50px 45px;
}
.form-control:focus {
border-color: #000;
box-shadow: none;
}
label {
font-weight: 600;
}
.error {
color: red;
font-weight: 400;
display: block;
padding: 6px 0;
font-size: 14px;
}
.form-control.error {
border-color: red;
padding: .375rem .75rem;
} </style>
</head>
<body>
<div class="container mt-5">
<?php
include('db.php');
if(!empty($_POST["send"])) {
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$subject = $_POST["subject"];
$message = $_POST["message"];
// Recipient email
$toMail = "[email protected]";
// Build email header
$header = "From: " . $name . "<". $email .">\r\n";
// Send email
if(mail($toMail, $subject, $message, $header)) {
// Store contactor data in database
$sql = $connection->query("INSERT INTO contacts_list(name, email, phone, subject, message, sent_date)
VALUES ('{$name}', '{$email}', '{$phone}', '{$subject}', '{$message}', now())");
if(!$sql) {
die("MySQL query failed.");
} else {
$response = array( "status" => "alert-success", "message" => "We have received your query and stored your information. We will contact you shortly."
); }
} else {
$response = array( "status" => "alert-danger", "message" => "Message coudn't be sent, try again"
);
}
} ?>
<!-- Messge -->
<?php if(!empty($response)) {?>
<div class="alert text-center <?php echo $response['status']; ?>" role="alert">
<?php echo $response['message']; ?>
</div>
<?php }?>
<!-- Contact form -->
<form action="" name="contactForm" 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>Phone</label>
<input type="text" class="form-control" name="phone" id="phone">
</div>
<div class="form-group">
<label>Subject</label>
<input type="text" class="form-control" name="subject" id="subject">
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" name="message" id="message" rows="4"></textarea>
</div>
<input type="submit" name="send" value="Send" class="btn btn-dark btn-block">
</form>
</div>
<!-- JavaScript -->
<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='contactForm']").validate({
// Define validation rules
rules: {
name: "required",
email: "required",
phone: "required",
subject: "required",
message: "required",
name: {
required: true
},
email: {
required: true,
email: true
}, phone: {
required: true,
minlength: 10,
maxlength: 10,
number: true
}, subject: {
required: true
}, message: {
required: true
}
},
// Specify validation error messages
messages: {
name: "Please provide a valid name.",
email: {
required: "Please enter your email",
minlength: "Please enter a valid email address"
},
phone: {
required: "Please provide a phone number",
minlength: "Phone number must be min 10 characters long",
maxlength: "Phone number must not be more than 10 characters long"
},
subject: "Please enter subject",
message: "Please enter your message"
},
submitHandler: function(form) {
form.submit();
}
});
}); </script>
</body>
</html>

Conclusion

In this tutorial, you have learned how to create contact form with jQuery validation and store data into a MySQL database.

Recommended PHP Tutorials

If you have any questions or thoughts to share, use the comment form below to reach us.

Related Posts