How to Create Contact Form using Ajax in PHP?

Mar 23, 2022

.

Admin

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:

index.php


<!DOCTYPE html>

<html>

<head>

<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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>

.success span {

color: green;

}

span.error {

color: red;

}

i {

font-weight: 900;

font-family: 'Font Awesome 5 Free';

}

</style>

</head>

<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>

<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>

</div>

</form>

</div>

</div>

</div>

</div>

<script type="text/javascript">

$(document).ready(function () {

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

checkuser();

});

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

checkemail();

});

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

checkmobile();

});

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

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

console.log("er1");

$("#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>');

console.log("er");

}

else {

console.log("ok");

$("#message").html("");

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

var data = new FormData(form);

$.ajax({

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) {

$('#message').html(data);

},

complete: function () {

setTimeout(function () {

$('#contactForm').trigger("reset");

$('#submitbtn').html('Submit');

$('#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 {

$('#username_err').html('');

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 {

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

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 {

$("#mobile_err").html("");

return true;

}

}

</script>

</body>

</html>

process.php

<?php

$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>';

}

}

?>

Output:

I hope it will help you....

#PHP