Send Mail by JavaScript AJAX PHP Mail Function by Submit form

JQuery AJAX and PHP Code for Contact Form

Ajax (Asynchronous JavaScript and XML) means by send or receive data with the server without refreshing or reloading the web page. In this post explain about form data submitted using by Ajax and using mail function for send email.

In this post also given code with an example of how to contact form collecting user queries and data after submitting the contact form.

These form data will send to PHP page (submitForm.php) through jQuery Ajax and also show the response to Ajax. Also improve the output format of email better and make it a beautiful HTML formated Email.

Query Ajax Contact Form

This contact form contains input fields to get user information and feedback. It triggers AJAX call on the click of its send button.

<form id="contactFreeOnlineForm" class="contactFreeOnlineForm"
name="contactFreeOnlineForm">
<div class="row">
<div class="col-md-12 contactFieldMain">
<label for="contactTextarea">Enter Your Text</label>
<div class="contactFormField"><textarea id="contactTextarea">
</textarea></div>
</div>
</div>
<div class="row">
<div class="col-md-3 contactFieldMain">
<label for="name">Name</label> 
<div class="contactFormField"><input type="text" id="name" />
</div>
</div>
<div class="col-md-3 contactFieldMain">
<label for="email">Email</label> 
<div class="contactFormField"><input type="email" id="email" />
</div>
</div> 
<div class="col-md-4 contactFieldMain">
<label for="email">Subject</label> 
<div class="contactFormField"><input type="text" id="subject" />
</div>
</div>
<div class="col-md-2 contactFieldMain">
<div class="contactFormField"><input type="button" value="Send" 
onclick="sendMail()"/></div>
</div> 
</div>
<div class="row">
<div class="col-md-12">
<div id="emailSendResult"></div>
</div>
</div>
</form>

jQuery AJAX Send Data to PHP file by Event Handler

Below code validate contact form and send AJAX Request to PHP (submitForm.php) page. Its work collect contact form input fields information and send to PHP page which having PHP Mail function.

 function sendMail(){
var getname = jQuery('#name').val();
var getemail = jQuery('#email').val();
var gettext = jQuery('#contactTextarea').val();
var getSubject = jQuery('#subject').val();
if(getname != '' && getname != '' && getname != ''){
jQuery('#emailSendResult').html('Mail Sending...');
$.ajax({
url:'submitForm.php',
data:{ name:getname, email:getemail, message:gettext, subject:getSubject},
method: 'POST',
success: function(data){
jQuery('#emailSendResult').html(data);
}
});
}else{
jQuery('#emailSendResult').html('Please Enter All Required Fields.');
}
}

Code for HTML Formated Email

PHP Code for Sending Contact Mail by using the mail function.

 

<?php 
ob_start(); 
error_log();
if(isset($_POST['name']) && isset($_POST['email'])){

$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];

$mailHeading = 'MyFreeOnlineTools Contact Form';
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: MyFreeOnlineTools <mailmyfreeonlinetools.com>' . PHP_EOL .
'Reply-To: MyFreeOnlineTools <mailmyfreeonlinetools.com>' . PHP_EOL .
'X-Mailer: PHP/' . phpversion();

$to = '[email protected]'; 


$messageSent = '<div>Name Sender : '.$name .'</div><div> Name Email : '.$email.' </div><div>Mail Subject : '.$subject.'</div><div> Message : <br/> '.$message.'</div>';

if( $name != '' || $message != '' || $email != ''){
mail($to,$subject,$messageSent,$headers);
echo 'Mail Send I Will Get Back to You....';
} 
}

?>

For more details click below link PHP Mail Function

In the PHP mail function, last parameter is optional but if required when sending HTML format email. So the developer pass along with content Type declaration its tells email client to parse the email as HTML format.

View Demo