How to send HTML form data to wp_mail function on wordpress?

Question

I have created a custom html form on WordPress and placed it using HTML widget

<form id="form">
    <label for="fname">Full Name</label>
    <input type="text" id="fname" name="name" placeholder="Your name..">

    <label for="email">Email</label>
    <input type="email" id="email" name="email" placeholder="Your email..">
   <label for="contact">Contact number</label>
    <input type="tel" id="contact" name="phone" placeholder="Your contact number..">
     <label for="subject">Description</label>
    <textarea id="subject" name="msg" placeholder="Tell us your requirements.." style="height:100px"> 
    </textarea>
    <input type="submit" value="Submit" onclick="myFunction()">
  </form>

and here is my js code

function myFunction() {
var name = document.getElementById("fname").value;
var email = document.getElementById("email").value;
var Contact = document.getElementById("contact").value;
var Message = document.getElementById("subject").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&email1=' + email + '&contact=' + Contact + '&message=' + Message;
if (name == '' || email == '' || Contact == '' || Message == '') {
alert("Please Fill All Fields");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajaxjs.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}

Now I want to send mail using this form data so How can I send email using WordPress wp-mail.php

Answer 1

First of all, you need to make some changes in your HTML and javascript and have do add few PHP code :

1) Change in form tag

<form id="form" method="post" action="">

2) Add a hidden field in the form with action name

<input type="hidden" name="action" value="my_form_submission">

3) add ajaxurl in functions.php file where you have enqueued your js file

add_action( 'wp_enqueue_scripts', 'your function' );

function enqueue_my_frontend_script() {
    wp_enqueue_script( 'my-script', plugin_dir_url(__FILE__).'frontend-scripts.js', array('jquery'), null, true );
    $variables = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    );
    wp_localize_script('my-script', "jsObj", $variables);
}

4) In your ajax call, change this

$.ajax({
    type: "POST",
    url: jsObj.ajaxurl, // this will get ajax url
    data: $( "#form" ).serialize() , // send your form data with serialize mode
    success: function(html) {
        alert(html);
    }
});

4) Add ajax actions in theme's functions.php file :

add_action('wp_ajax_my_form_submission', 'my_form_submission_callback');
add_action('wp_ajax_nopriv_my_form_submission', 'my_form_submission_callback');

function my_form_submission_callback(){

    $data = $_POST;

    $html = $_POST['message'];

    $headers = array('Content-Type: text/html; charset=UTF-8');
    wp_mail("toemail@gmail.com", "Some subject", $html, $headers);

}

This way you can get ajax data and pass html wp_mail() function.

Check this link for whole demo : https://dev.to/shwetadanej/ajax-calls-in-wordpress-front-end-2g09