如何将 HTML 表单数据发送到 wordpress 上的 wp_mail 函数？

Question

我在 WordPress 上创建了一个自定义的 html 表单并使用 HTML 小部件放置它

<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>

这是我的 js 代码

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;
}

现在我想使用此表单数据发送邮件，因此如何使用 WordPress wp-mail.php 发送电子邮件

Answer 1

首先，您需要对 HTML 和 javascript 进行一些更改，并添加一些 PHP 代码：

1) 更改表单标签

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

2）在表单中添加一个隐藏字段，带有动作名称

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

3）在functions.php文件中添加ajaxurl，你已经将js文件加入队列

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）在你的ajax调用中，改变这个

$.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）在主题的functions.php文件中添加ajax动作：

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);

}

这样你就可以获取ajax数据并传递html wp_mail() 函数。

检查整个演示的链接： https : //dev.to/shwetadanej/ajax-calls-in-wordpress-front-end-2g09