How to send an email using ajax in WordPress?

10/30/201612/29/2018 Admin 0 Comments ajax, jquery, wordpress, wp

Here we will learn how to use ajax in the wordpreee, How to send an email using Ajax that means without refreshing a page we will send an email.

I am showing you an easy way for all this.

Suppose we have a form. Below i m showing you the simple bootstrap used form.
We have three fields in this form that are Name, email and Message.
And a submit button to send an email.

<form id="sub" action=""  method="post" enctype="multipart/form-data">
<div id="talk-business" class=seo-cf-page>
<h2>Please Fill This Form For Instant Access</h2>
  <div class="row">
    <div class="col-sm-6">
      <input class="form-control bccolor" placeholder="Name" required id="name" value="" size="40" aria-required="true" aria-invalid="false" type="text">
    </div>
     <div class="col-sm-6">
     <input class="form-control bccolor" placeholder="Email" required id="email" value="" size="40" aria-required="true" aria-invalid="false" type="email">
    </div>
    
  </div>
<div class="row">
    <div class="col-sm-6">
    <textarea class="form-control bccolor" placeholder="Message" id="messsage" cols="38" rows="6" aria-invalid="false"></textarea>
    </div>
  </div>

  <!-- btns -->
  <div class="row contact_information_btns">
<div class="col-sm-6">
     <input class="submit" value="Send Email" name="submit" type="submit">
</div>
</div>
</div>
</form>

<h2>Please Fill This Form For Instant Access</h2>

</div>

</div>

</div>

</div>

</form>

And we have footer.php file to use the jquery ajax to get values. You can also use the jquery in the another js file.

I am using in the footer.php file

<script>
 
 jQuery('#sub').submit(function(e){
	
	  e.preventDefault();
	 var name =  jQuery('#name').val();
	 var email =  jQuery('#email').val();
         var message =  jQuery('#message').val();
          jQuery.ajax({
           url: '<?php echo admin_url('admin-ajax.php'); ?>',
           type: "POST",
           cache: false,
           data:{ 
              action: 'send_email', 
              name: name,
              email: email,
              message: message,
                },
           success:function(res){
			   alert("Email Sent.");
			   }
                      }); 
});
</script>

jQuery('#sub').submit(function(e){

e.preventDefault();

var name = jQuery('#name').val();

var email = jQuery('#email').val();

var message = jQuery('#message').val();

jQuery.ajax({

url: '<?php echo admin_url('admin-ajax.php'); ?>',

type: "POST",

cache: false,

data:{

action: 'send_email',

name: name,

email: email,

message: message,

success:function(res){

alert("Email Sent.");

}

});

</script>

In the above code the values are retrieve from the id of the each text boxes.
and you will see the send_email action: 'send_email'is our function name which will we use in the function.php file to send an email using the above retrieved values.

Functions.php

add_action( 'wp_ajax_send_email', 'callback_send_email' );
add_action( 'wp_ajax_nopriv_send_email', 'callback_send_email' );

function callback_send_email(){

	  $name = $_REQUEST['name'];
	  $email = $_REQUEST['email'];
          $message= $_REQUEST['message'];
          $subject = "Contact Form";
	  $email_body = "The following prospectus has contacted you.<br>".
		"Name: $name. <br>".
		"Email: $email. <br>".
		"Message: $message. <br>";
          $to = "example@email.com";
          $headers  = "MIME-Version: 1.0" . "\r\n";
          $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
          $headers .= "From: $name <$email> \r\n";
          $headers .= "Reply-To: $email \r\n";
	  $mail = mail($to,$subject,$email_body,$headers);
		if($mail){
		      echo "Email Sent Successfully";
	        }
}

add_action( 'wp_ajax_send_email', 'callback_send_email' );

add_action( 'wp_ajax_nopriv_send_email', 'callback_send_email' );

function callback_send_email(){

$name = $_REQUEST['name'];

$email = $_REQUEST['email'];

$message= $_REQUEST['message'];

$subject = "Contact Form";

$email_body = "The following prospectus has contacted you.<br>".

"Name: $name. <br>".

"Email: $email. <br>".

"Message: $message. <br>";

$to = "example@email.com";

$headers = "MIME-Version: 1.0" . "\r\n";

$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

$headers .= "From: $name <$email> \r\n";

$headers .= "Reply-To: $email \r\n";

$mail = mail($to,$subject,$email_body,$headers);

if($mail){

echo "Email Sent Successfully";

}

By using above code. you will successfully send an email.
change your email id with $to = "example@email.com"; your email id.

That’s it..

Post Views: 5,318

You May Also Like

How to use a taxonomy template page in wordpress to display its posts?

Can you host WordPress using Amazon web services such as EC2, RDS, EBS etc?

What kind of website can I build with WordPress?