使用wp_mail()时AJAX表单无法发送邮件的问题解决

你的WordPress表单在非AJAX模式下正常发送邮件，但添加AJAX后仅提示成功却未收到邮件，核心原因是AJAX请求未触发后端的邮件发送逻辑，同时存在多处代码错误，具体问题和修复方案如下：

核心问题点 #

1. AJAX参数传递错误：JS代码中hiddenInput是未定义变量，导致后端isset($_POST['contact_form'])判断不成立，跳过邮件发送逻辑。
2. 函数职责混乱：原display_contact_form同时负责渲染表单和处理AJAX提交，AJAX请求时会冗余输出整个表单HTML，干扰逻辑执行。
3. 邮件内容错误：邮件中误将管理员邮箱当作用户邮箱输出，应该使用用户提交的$email变量。
4. HTML语法错误：表单隐藏字段缺少闭合引号和有效值，无法触发后端判断。
5. AJAX URL硬编码：固定路径/wp-admin/admin-ajax.php在子目录安装的WordPress中会失效。

修正后的完整代码 #

1. 前端AJAX代码

$("#contact-form-submit").click(function(event) {
  event.preventDefault();
  var userName = $('#full-name').val();
  var userEmail = $('#email').val();
  var userMessage = $('#message').val();

  $.ajax({
    type: "POST",
    dataType: "json",
    url: ajax_object.ajax_url, // 通过WordPress全局变量获取正确路径
    data: {
      action: "handle_contact_form_submit", // 使用独立的AJAX处理函数
      contact_form: 1, // 传递有效值触发后端逻辑
      full_name: userName,
      email: userEmail,
      message: userMessage,
    },
    success: function(response) {
      if (response.success) {
        alert("留言发送成功");
        $('#contact-form')[0].reset(); // 清空表单
      } else {
        alert("发送失败：" + response.errors.join("\n"));
      }
    },
    error: function() {
      alert("网络错误，请稍后重试");
    }
  });
});

2. 后端functions.php代码

// 短码仅负责渲染表单
add_shortcode( 'contact-form', 'display_contact_form' );
function display_contact_form() {
    ?>
    <div id="validation-messages-container"></div>

    <form id="contact-form" action="<?php echo esc_url( get_permalink() ); ?>" method="post">
        <input type="hidden" name="contact_form" value="1"> <!-- 修正隐藏字段语法 -->
        <div class="form-section">
            <label for="full-name"><?php echo esc_html( '姓名'); ?></label>
            <input type="text" id="full-name" name="full_name">
        </div>
        <div class="form-section">
            <label for="email"><?php echo esc_html( '邮箱' ); ?></label>
            <input type="email" id="email" name="email"> <!-- 改为email类型增强验证 -->
        </div>
        <div class="form-section">
            <label for="message"><?php echo esc_html( '留言'); ?></label>
            <textarea id="message" name="message"></textarea>
        </div>
        <button type="submit" id="contact-form-submit">提交</button>
    </form>
    <?php
}

// 注册AJAX处理钩子
add_action('wp_ajax_handle_contact_form_submit', 'handle_contact_form_submit');
add_action('wp_ajax_nopriv_handle_contact_form_submit', 'handle_contact_form_submit');

// 独立处理AJAX提交逻辑
function handle_contact_form_submit() {
    $validation_messages = [];

    // 验证请求合法性
    if ( !isset( $_POST['contact_form'] ) ) {
        wp_send_json_error(['errors' => ['无效请求']]);
    }

    // 清理用户输入
    $full_name = isset( $_POST['full_name'] ) ? sanitize_text_field( $_POST['full_name'] ) : '';
    $email     = isset( $_POST['email'] ) ? sanitize_email( $_POST['email'] ) : '';
    $message   = isset( $_POST['message'] ) ? sanitize_textarea_field( $_POST['message'] ) : '';

    // 字段验证
    if ( empty( $full_name ) ) {
        $validation_messages[] = esc_html__( '请输入有效的姓名。' );
    }
    if ( empty( $email ) || !is_email( $email ) ) {
        $validation_messages[] = esc_html__( '请输入有效的邮箱地址。' );
    }
    if ( empty( $message ) ) {
        $validation_messages[] = esc_html__( '请输入有效的留言内容。');
    }

    // 验证失败返回错误
    if ( !empty( $validation_messages ) ) {
        wp_send_json_error(['errors' => $validation_messages]);
    }

    // 发送邮件
    $admin_mail = get_option( 'admin_email' );
    $subject = '来自' . $full_name . '的新留言';
    $mail_content = $message . ' - 用户邮箱：' . $email; // 修正用户邮箱变量

    // 检查邮件发送状态
    $mail_sent = wp_mail( $admin_mail, $subject, $mail_content );

    if ( $mail_sent ) {
        wp_send_json_success(['message' => '你的留言已成功发送。']);
    } else {
        wp_send_json_error(['errors' => ['邮件发送失败，请检查服务器邮件配置']]);
    }

    wp_die(); // 必须终止输出，避免多余内容
}

// 加载JS并传递AJAX路径
function enqueue_contact_form_scripts() {
    wp_enqueue_script('contact-form-script', get_template_directory_uri() . '/js/contact-form.js', ['jquery'], '1.0', true);
    wp_localize_script('contact-form-script', 'ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'enqueue_contact_form_scripts');

额外提示 #

• 如果仍无法发送邮件，大概率是服务器未配置邮件服务，可安装SMTP类插件（如WP Mail SMTP）替代默认wp_mail()函数。
• 前端JS建议放在主题的js/contact-form.js文件中，通过wp_enqueue_script加载，避免直接嵌入模板。

内容的提问来源于stack exchange，提问作者yanksi_