PHP Sending Mail Contact Form with jQuery AJAX

Today, We want to share with you PHP Sending Mail Contact Form with jQuery AJAX.In this post we will show you PHP Contact Form with jQuery AJAX, hear for floating contact form jquery we will give you demo and example for implement.In this post, we will learn about jquery contact form validation with an example.

PHP Sending Mail Contact Form with jQuery AJAX

There are the Following The simple About PHP Sending Mail Contact Form with jQuery AJAX Full Information With Example and source code.

As I will cover this Post with live Working example to develop jQuery Contact Form PHP Sending Mail with AJAX, so the some major files and Directory structures for this example is following below.

  • index.php
  • contact_mail.php
Read Also:  Converting JSON Object into Javascript PHP array

jQuery AJAX Contact PHP Mail Sending

index.php

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.

<style>
body{width:610px;}
#liveContactFrm {border-top:#3d3d3d 2px solid;background:#FAF8F8;padding:10px;}
#liveContactFrm div{margin-bottom: 16px}
#liveContactFrm div label{margin-left: 6px}
.liveTagBox{padding:10px; border:#3d3d3d 1px solid; border-radius:5px;}
.error{background-color: #FF6600;border:#AA4502 1px solid;padding: 6px 10px;color: #FFFFFF;border-radius:5px;}
.success{background-color: #12CC1A;border:#0FA015 1px solid;padding: 6px 10px;color: #FFFFFF;border-radius:5px;}
.dtls{font-size:.8em;color: #FF6600;letter-spacing:2px;padding-left:6px;}
.btnAction{background-color:#2FC332;border:0;padding:10px 40px;color:#FFF;border:#3d3d3d 1px solid; border-radius:5px;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function sendContact() {
	var valid;	
	valid = validateContact();
	if(valid) {
		jQuery.ajax({
		url: "contact_mail.php",
		data:'memberName='+$("#memberName").val()+'&memberEmail='+$("#memberEmail").val()+'&status='+$("#status").val()+'&message='+$(message).val(),
		type: "POST",
		success:function(data){
		$("#mail-status").html(data);
		},
		error:function (){}
		});
	}
}

function validateContact() {
	var valid = true;	
	$(".liveTagBox").css('background-color','');
	$(".dtls").html('');
	
	if(!$("#memberName").val()) {
		$("#memberName-dtls").html("(required)");
		$("#memberName").css('background-color','#c60000');
		valid = false;
	}
	if(!$("#memberEmail").val()) {
		$("#memberEmail-dtls").html("(required)");
		$("#memberEmail").css('background-color','#c60000');
		valid = false;
	}
	if(!$("#memberEmail").val().match(/^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/)) {
		$("#memberEmail-dtls").html("(invalid)");
		$("#memberEmail").css('background-color','#c60000');
		valid = false;
	}
	if(!$("#status").val()) {
		$("#status-dtls").html("(required)");
		$("#status").css('background-color','#c60000');
		valid = false;
	}
	if(!$("#message").val()) {
		$("#message-dtls").html("(required)");
		$("#message").css('background-color','#c60000');
		valid = false;
	}
	
	return valid;
}
</script>
<h2>PHP Contact Form with jQuery AJAX</h2>
<div id="liveContactFrm">
<div id="mail-status"></div>
<div>
<label style="padding-top:20px;">Name</label>
<span id="memberName-dtls" class="dtls"></span><br/>
<input type="text" name="memberName" id="memberName" class="liveTagBox">
</div>
<div>
<label>Email</label>
<span id="memberEmail-dtls" class="dtls"></span><br/>
<input type="text" name="memberEmail" id="memberEmail" class="liveTagBox">
</div>
<div>
<label>Subject</label> 
<span id="status-dtls" class="dtls"></span><br/>
<input type="text" name="status" id="status" class="liveTagBox">
</div>
<div>
<label>Content</label> 
<span id="message-dtls" class="dtls"></span><br/>
<textarea name="message" id="message" class="liveTagBox" cols="60" rows="6"></textarea>
</div>
<div>
<button name="submit" class="btnAction" onClick="sendContact();">Send</button>
</div>
</div>

PHP Sending Contact Mail

I have display this source code when we displaying about simple PHP contact form Example without any jQuery AJAX.

Read Also:  Convert character to ASCII code in JavaScript Example

contact_mail.php

<?php
$sendEmail = "[email protected]";
$mailHeaders = "From: " . $_POST["memberName"] . "<". $_POST["memberEmail"] .">\r\n";
if(mail($sendEmail, $_POST["status"], $_POST["message"], $mailHeaders)) {
print "<p class='success'>Contact Mail Sent.</p>";
} else {
print "<p class='Error'>Sorry, Some Problem in Sending Mail.</p>";
}
?>

PHP Contact Form with jQuery AJAX – Output

Angular 6 CRUD Operations Application Tutorials
jqueryajaxcontactform
jqueryajaxcontactform

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about PHP Sending Mail Contact Form with jQuery AJAX.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.