How to Create Contact Form using Ajax in PHP?




How to Create Contact Form using Ajax in PHP?

Hi friends,

In this post, we will learn how to PHP Contact Form with jQuery AJAX. i explained simply step by step how to Build a Bootstrap Contact Form Using PHP and AJAX. Here you will learn Simple PHP-AJAX Contact Form. This tutorial will give you simple example of Ajax Contact Form Using jQuery, PHP And MySQL.

I will give you simple Example of how to Create an AJAX Contact Form.

So let's see bellow example:


<!DOCTYPE html>



<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>PHP Contact Form Create using Ajax</title>

<link href="" rel="stylesheet">

<script src=""></script>


.success span {

color: green;


span.error {

color: red;


i {

font-weight: 900;

font-family: 'Font Awesome 5 Free';




<body class="bg-dark">

<div class="container p-3">

<div class="col-lg-12">

<div class="card m-auto">

<div class="card-header text-center bg-primary text-white">

<h4>PHP Contact Form Create using Ajax</h4>


<div class="card-body">

<div id="message"></div>

<form method="POST" id="contactForm">

<label for="user1"><strong>Username :</strong><span class="text-danger"> *</span></label>

<input type="text" name="username" id="username" class="form-control" placeholder="Enter Username">

<span class="error" id="username_err"> </span><br>

<label for="user1"><strong>Email : </strong><span class="text-danger"> *</span></label>

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

<span class="error" id="email_err"> </span><br>

<label for="mob"><strong>Mobile : </strong><span class="text-danger"> *</span></label>

<input type="text" name="mobile" id="mobile" class="form-control" placeholder="Enter Mobile No">

<span class="error" id="mobile_err"> </span><br>

<label for="message"><strong>Message : </strong></label>

<textarea name="message" id="message" class="form-control" rows="5" cols="40" placeholder="Leave Message"></textarea>

<span class="error" id="mobile_err"> </span><br>

<div class="d-flex justify-content-center mt-1 mb-0">

<button type="button" id="submitbtn" class="btn btn-success ">Submit</button>







<script type="text/javascript">

$(document).ready(function () {

$('#username').on('input', function () {



$('#email').on('input', function () {



$('#mobile').on('input', function () {



$('#submitbtn').click(function () {

if (!checkuser() && !checkemail() && !checkmobile()) {


$("#message").html('<div class="alert alert-warning">Please fill all required field</div>');

} else if (!checkuser() || !checkemail() || !checkmobile()) {

$("#message").html('<div class="alert alert-warning">Please fill all required field</div>');



else {



var form = $('#contactForm')[0];

var data = new FormData(form);


type: "POST",

url: "process.php",

data: data,

processData: false,

contentType: false,

cache: false,

async: false,

beforeSend: function () {

$('#submitbtn').html('<i class="fa-solid fa-spinner fa-spin"></i>');

$('#submitbtn').attr("disabled", true);

$('#submitbtn').css({ "border-radius": "50%" });


success: function (data) {



complete: function () {

setTimeout(function () {



$('#submitbtn').attr("disabled", false);

$('#submitbtn').css({ "border-radius": "4px" });

}, 200);






function checkuser() {

var pattern = /^[A-Za-z0-9]+$/;

var user = $('#username').val();

var validuser = pattern.test(user);

if (user == '') {

$('#username_err').html('Username Field is required');

return false;

}else if ($('#username').val().length < 4) {

$('#username_err').html('Username length is too short');

return false;

} else if (!validuser) {

$('#username_err').html('Username should be a-z ,A-Z only');

return false;

} else {


return true;



function checkemail() {

var pattern1 = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

var email = $('#email').val();

var validemail = pattern1.test(email);

if (email == "") {

$('#email_err').html('Email field is required');

return false;

} else if (!validemail) {

$('#email_err').html('Invalid Email');

return false;

} else {


return true;



function checkmobile() {

var mobile = $("#mobile").val();

if (mobile == '') {

$("#mobile_err").html("Mobile filed is required");

return false;

}else if (!$.isNumeric(mobile)) {

$("#mobile_err").html("only number is allowed");

return false;

} else if (mobile.length != 10) {

$("#mobile_err").html("Only Valide 10 digit");

return false;


else {


return true;








$con = mysqli_connect("localhost", "root", "root", "aatman");

if (!$con) {

echo "connection error";


$username = htmlspecialchars(trim($_POST['username']));

$email = htmlspecialchars(trim($_POST['email']));

$message = htmlspecialchars(trim($_POST['message']));

$mobile = htmlspecialchars(trim($_POST['mobile']));

if (empty($username) || empty($email) || empty($mobile)) {

echo '<div class="alert alert-success">Please fill all required field</div>';

}else {

$sql = "insert into users(username,email,mobile,message) values ('$username','$email','$mobile','$message')";

if ($res = mysqli_query($con, $sql)) {

echo '<div class="alert alert-success">Data Successfully Inserted</div>';

}else {

echo '<div class="alert alert-warning">Data Not Inserted</div>';





I hope it will help you....