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. <form id="sub" action="" method="post" enctype="multipart/form-data">
2. <div id="talk-business" class="seo-cf-page">
3. <h2>Please Fill This Form For Instant Access</h2>
4. <div class="row">
5. <div class="col-sm-6">
6. <input class="form-control bccolor" placeholder="Name" required="" id="name" value="" size="40" aria-required="true" aria-invalid="false" type="text">
7. </div>
8. <div class="col-sm-6">
9. <input class="form-control bccolor" placeholder="Email" required="" id="email" value="" size="40" aria-required="true" aria-invalid="false" type="email">
10. </div>
11.
12. </div>
13. <div class="row">
14. <div class="col-sm-6">
15. <textarea class="form-control bccolor" placeholder="Message" id="messsage" cols="38" rows="6" aria-invalid="false"></textarea>
16. </div>
17. </div>
18.
19. <!-- btns -->
20. <div class="row contact_information_btns">
21. <div class="col-sm-6">
22. <input class="submit" value="Send Email" name="submit" type="submit">
23. </div>
24. </div>
25. </div>
26. </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. <script>
2.
3. jQuery('#sub').submit(function(e){
4.
5. e.preventDefault();
6. var name = jQuery('#name').val();
7. var email = jQuery('#email').val();
8. var message = jQuery('#message').val();
9. jQuery.ajax({
10. url: '<?php echo admin_url('admin-ajax.php'); ?>',
11. type: "POST",
12. cache: false,
13. data:{
14. action: 'send_email',
15. name: name,
16. email: email,
17. message: message,
18. },
19. success:function(res){
20. alert("Email Sent.");
21. }
22. });
23. });
24. </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. add_action( 'wp_ajax_send_email', 'callback_send_email' );
2. add_action( 'wp_ajax_nopriv_send_email', 'callback_send_email' );
3.
4. function callback_send_email(){
5.
6. $name = $_REQUEST['name'];
7. $email = $_REQUEST['email'];
8. $message= $_REQUEST['message'];
9. $subject = "Contact Form";
10. $email_body = "The following prospectus has contacted you.<br>".
11. "Name: $name. <br>".
12. "Email: $email. <br>".
13. "Message: $message. <br>";
14. $to = "example@email.com";
15. $headers = "MIME-Version: 1.0" . "\r\n";
16. $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
17. $headers .= "From: $name <$email> \r\n";
18. $headers .= "Reply-To: $email \r\n";
19. $mail = mail($to,$subject,$email_body,$headers);
20. if($mail){
21. echo "Email Sent Successfully";
22. }
23. }
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..
