wordpress操作表单不起作用

Question

我有一个page-contact.php (我有我的自定义表单)

            <form id="contact-form" name="contact-form" method="post" action="">
                <input type="text" name="name" placeholder="name"/>
                <input type="text" name="email" placeholder="email"/>
                <textarea rows="4" cols="50" name="message" 
                placeholder="message"> </textarea>
                <input id="submit" type="submit" name="submit" value="send"/>
            </form>

我有我的email_process.php (

<?php

$to        = 'info@domain.com';
$subject   = $_POST['name'];
$email     = $_POST['email'];
$body      = $_POST['message'];
$headers   = 'From: '.$email;
$mailCheck = mail($to, $subject, $body, $headers);

if($mailCheck) echo 1;

?>

我还有一个js文件，用于回显我的成功消息和错误消息。js表单似乎起作用了。但是email_process.php不起作用。对于没有wordpress的手工编码的html，表单动作作品"email_process.php“我认为wordpress处理代码的方式不同。有人能帮我一下吗？

$(document).ready(function(){
    alertAnswer();
});


var check = 1;

function alertAnswer(){
$('#contact-form').submit(function(event){
    event.preventDefault();

    checkFormFill();
    if(check == false) alert("you didn't answer my form");
    else sendMessage();
});
}

function checkFormFill() {
check = 1;
$('#contact-form input[type="text"]').each(function(){
    if($(this).val().length < 3) check = false 
}) 

if($('#contact-form textarea').val().length < 3) check = false 
}

function eraseFormData() {
$('#contact-form input[type="text"]').each(function(){
    $(this).val('');
}) 

$('#contact-form textarea').val(''); 
}

function sendMessage() {
$.post('email_process.php',
    {
        name: $('input[name="name"]').val(),
        email: $('input[name="email"]').val(),
        message: $('textarea[name="message"]').val()
    },
    function(data) {
    if(data == 1) {
        $('#sendMessage').text("Thanks for contacting us. 
        We\'ll get back to you     shortly.");
        $('#sendMessage').css("margin-top","15px"); 
        eraseFormData(); 
    } 
    else $('#sendMessage').text("Sorry, an error occured. 
    Please try again!");
});
}

Answer 1

在wordpress中，有很多灵活的插件可以让你在没有任何硬编码的情况下创建表单和提交。但是如果你想知道wordpress是如何做到这一点的，你需要使用wp_mail( $to, $subject, $body, $headers );。尝试以下操作。

将此代码添加到您的functions.php

add_action('wp_ajax_nopriv_send_email', 'send_email');

function send_email() {
  // check the nonce before submit the form 
  $nonce = check_ajax_referer( 'ajax_nonce', 'nonce' );
    if($nonce) {

              $to        = 'info@domain.com';
                 $subject   = $_POST['name'];
               $email     = $_POST['email'];
              $body = $_POST['message'];
           $headers = array('Content-Type: text/html; charset=UTF-8');

              wp_mail( $to, $subject, $body, $headers );
       }

}

创建一个新文件，添加以下代码，并将其命名为form.js

(function($) {
    jQuery( "form#contact-form" ).submit(function( event ) {
        name: jQuery('input[name="name"]').val();
        email: jQuery('input[name="email"]').val();
        message: jQuery('textarea[name="message"]').val();
        jQuery.ajax({
            url: ajax_object.url,
            data: nonce:ajax_object.nonce + 'action=send_email&name='+name+'&email='+email+'&message='+message,
            dataType: 'JSON',
            type: 'POST',
            success:function(data){
                jQuery('#sendMessage').text("Thanks for contacting us. We\'ll get back to you     shortly.");
            }
        });
    });
}(jQuery));

然后在您的funtions.php中包含以下代码，以便将脚本入队。并确保为form.js文件定义了正确的路径。

/* Enqueue Scripts */
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts', 99);
function custom_enqueue_scripts(){

    wp_register_script('custom-form', get_template_directory_uri() . '/js/form.js', 'jquery', '2.6.2');
    wp_enqueue_script('custom-form');
    // need to localize the script and add nonce because of spam submissions
    wp_localize_script('custom-form', 'ajax_object', array('url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce("ajax_form_nonce")));
}

同样，我在这里没有包含验证函数。您可以将它们包含在相同的form.js文件中。