PHP AJAX contact form is used to send contact information to the back end without page refresh. The AJAX based contact form will be useful when this component is widgetized in an application layout.
In this tutorial, we have given an example contact form for collecting user queries, feedback and etc. After client-side validation, these form data will be sent to a PHP page through a jQuery AJAX call. After sending contact email, the PHP page will respond to the AJAX request.
This form contains the collection of inputs to get user feedback. It triggers jQuery AJAX call on the click event of its submit button.
<div id="frmContact">
<div id="mail-status"></div>
<div>
<label style="padding-top:20px;">Name</label><span id="userName-info" class="info"></span><br/>
<input type="text" name="userName" id="userName" class="demoInputBox">
</div>
<div>
<label>Email</label><span id="userEmail-info" class="info"></span><br/>
<input type="text" name="userEmail" id="userEmail" class="demoInputBox">
</div>
<div>
<label>Subject</label><span id="subject-info" class="info"></span><br/>
<input type="text" name="subject" id="subject" class="demoInputBox">
</div>
<div>
<label>Content</label><span id="content-info" class="info"></span><br/>
<textarea name="content" id="content" class="demoInputBox" cols="60" rows="6"></textarea>
</div>
<div>
<button name="submit" class="btnAction" onClick="sendContact();">Send</button>
</div>
</div>
This jQuery script validates contact form input and sends AJAX request to a PHP page on successful validation. It collects contact form input and sends it as the parameters to the second PHP page.
function sendContact() {
var valid;
valid = validateContact();
if(valid) {
jQuery.ajax({
url: "contact_mail.php",
data:'userName='+$("#userName").val()+'&userEmail='+
$("#userEmail").val()+'&subject='+
$("#subject").val()+'&content='+
$(content).val(),
type: "POST",
success:function(data){
$("#mail-status").html(data);
},
error:function (){}
});
}
}
The client-side validation script is,
function validateContact() {
var valid = true;
$(".demoInputBox").css('background-color','');
$(".info").html('');
if(!$("#userName").val()) {
$("#userName-info").html("(required)");
$("#userName").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#userEmail").val()) {
$("#userEmail-info").html("(required)");
$("#userEmail").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
$("#userEmail-info").html("(invalid)");
$("#userEmail").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#subject").val()) {
$("#subject-info").html("(required)");
$("#subject").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#content").val()) {
$("#content-info").html("(required)");
$("#content").css('background-color','#FFFFDF');
valid = false;
}
return valid;
}
We have seen this code when we saw about PHP contact form tutorial without AJAX or jQuery.
<?php
$toEmail = "admin@phppot_samples.com";
$mailHeaders = "From: " . $_POST["userName"] . "<". $_POST["userEmail"] .">\r\n";
if(mail($toEmail, $_POST["subject"], $_POST["content"], $mailHeaders)) {
print "<p class='success'>Mail Sent.</p>";
} else {
print "<p class='Error'>Problem in Sending Mail.</p>";
}
?>