Simply contact us form submit in PHP, MySQL with jQuery validation. In this article, you will see how to create a contact form using PHP, and submit the contact us form record in MySQL DB using jQuery validation.
This article helps you to create and submit contact forms with PHP and MySQL DB using jQuery validation. And you can also use this form for your website queries. The best thing is you can use this form in your web App too.
And, you can use the free code of PHP contact us form with the DB source code.
PHP Contact us Form in PHP using jquery Validation and Database
Just follow the few below instruction and easily generate and submit contact form with PHP MySQL using 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, Open your PHPMyAdmin and create a table with name contacts_list using 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
Now, you need to create a file name db.php and update the below given code into your php file.
The below given code is used to create a MySQL database connection in PHP. When we go insert form record into MySQL DB, 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
Next Step, you will create HTML contact form and add following below given 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 = "tutsmake@gmail.com";
// 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/jquery-validation@1.19.2/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 article, you have learned how to generate contact form in php with using jQuery validation and add data into a MySQL database.
0 Comments