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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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..
