How to Create Contact Form using Ajax in PHP?
Teams applying “How to Create Contact Form using Ajax in PHP?” in a production project can use practical hiring laws to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.
Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.
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/[email protected]/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....
- How To Use Php Conditional Statement Example
- How to Check if String Contains Regex in PHP?
- PHP Array_column() Function Example
- PHP Generate List of Random Numbers Between 0 and 100 Example
- How to User Login with Facebook in PHP?
- How to Explode Every Character into Array Using PHP Example?
- PHP Form Validation Tutorial
- PHP Convert XML to JSON Example