Home >> PHP MySql Ajax >> Contact Us Form Submit in PHP MySql Ajax
Contact Us Form Submit in PHP MySql Ajax
Following steps to Contact Us Form Submit using PHP MySQL using Ajax:
Step 1: Create Contactus table.
Step 2: Create DB Connection.
Step 3: Create Html Form For Display Contact Us Form.
Step 4: Save data by contact us form.
Step 1:
Run the following sql query to create database and table:
CREATE DATABASE education;
CREATE TABLE `contactus` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`email` varchar(150) COLLATE utf8_unicode_ci NOT NULL,
`mobile` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
`message` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Step 2:
Create database connection file named dbconnection.php
<?php
$dbservername='localhost';
$dbusername='root';
$dbpassword='';
$dbname = "education";
$conn=mysqli_connect($dbservername,$dbusername,$dbpassword,$dbname);
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Step 3:
Create Html Form For Display Contact Us Form.
<!doctype html>
<html>
<head>
<title>Form</title>
</head>
<body>
<h3>Form</h3>
<form action="" id="contactForm" method="POST" onsubmit="return false">
<div id="resultMessage"></div>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="Name">Email</label>
<input type="text" name="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="Name">Mobile No.</label>
<input type="text" name="mobile" id="mobile" class="form-control">
</div>
<div class="form-group">
<label for="Name">Message</label>
<input type="text" name="message" id="message" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="submit" id="submit" value="Submit" class="form-control">
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#contactForm').on('submit', function() {
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
var message = $('#message').val();
$.ajax({
type: 'POST',
url: "save-contact-us.php",
dataType: 'html',
data: "name="+name+"&email="+email+"&mobile="+mobile+"&message="+message,
success: function(response) {
if (response == "yes") {
$('#resultMessage').html("Your contact us submit successfully");
} else if (response == "no") {
$('#resultMessage').html("Your contact us not saved");
}
}
});
});
});
</script>
</body>
</html>
Step 4:
Now, Save data by file named save-contact-us.php
<?php
require_once "dbconnection.php";
$name = $_POST["name"];
$email = $_POST["email"];
$mobile = $_POST["mobile"];
$message = $_POST["message"];
$query="insert into contactus(name,email,mobile,message)values('".$name."','".$email."','".$mobile."','".$message."')";
$result = mysqli_query($conn,$query);
if($result){
echo 'yes';
} else {
echo 'no';
}
?>
Thanks Coderraj All Team for Provide Good Content.