基于WordPress+Gantry5，如何提交JS动态添加的HTML表单至后台设置邮箱？

没问题，这个需求完全可以搞定！因为前端JS没法直接发送邮件（浏览器的安全限制），所以得结合WordPress的AJAX机制来处理表单提交，同时适配Gantry5的环境，下面是一步步的具体实现步骤：

1. 前端表单构建与提交逻辑 #

你用innerHTML插入的表单得有正确的结构，还要带上WordPress要求的安全验证字段（nonce），防止恶意请求。比如你的JS代码可以这么写：

// 先拿到你要插入表单的容器
const formContainer = document.getElementById('your-target-container-id');
// 构建表单HTML，替换成你需要的字段就行
const customForm = `
<form id="site-custom-form" method="POST">
    <!-- 告诉WordPress要调用哪个AJAX处理函数 -->
    <input type="hidden" name="action" value="submit_site_custom_form">
    <!-- 安全验证用的nonce，后面后端会验证这个 -->
    <input type="hidden" name="custom_form_nonce" value="${window.customFormNonce}">
    
    <div class="form-group">
        <label for="user-name">你的姓名:</label>
        <input type="text" id="user-name" name="user_name" required>
    </div>
    <div class="form-group">
        <label for="user-email">联系邮箱:</label>
        <input type="email" id="user-email" name="user_email" required>
    </div>
    <div class="form-group">
        <label for="user-message">留言内容:</label>
        <textarea id="user-message" name="user_message" rows="5" required></textarea>
    </div>
    <button type="submit" class="submit-btn">提交表单</button>
    <!-- 用来显示提交结果的区域 -->
    <div id="form-submit-status"></div>
</form>
`;
// 把表单插入到目标容器里
formContainer.innerHTML = customForm;

// 监听表单提交事件
document.getElementById('site-custom-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认的表单跳转
    const formData = new FormData(this);
    const statusDiv = document.getElementById('form-submit-status');

    // 用fetch发送AJAX请求到WordPress的后台接口
    fetch(window.ajaxurl, {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            statusDiv.innerHTML = '<p style="color:#2ecc71;">提交成功！我们会尽快通过邮件联系你~</p>';
            this.reset(); // 重置表单
        } else {
            statusDiv.innerHTML = `<p style="color:#e74c3c;">提交失败：${data.data.message}</p>`;
        }
    })
    .catch(err => {
        statusDiv.innerHTML = '<p style="color:#e74c3c;">网络出问题啦，请稍后再试~</p>';
        console.error('提交出错:', err);
    });
});

这里要注意：window.ajaxurl和window.customFormNonce这两个变量需要从后端传递过来，JS自己拿不到，后面会说怎么弄。

2. 后端PHP处理（主题/子主题的functions.php） #

接下来要在WordPress的后台写处理逻辑，主要做三件事：给前端传必要的全局变量、验证表单的合法性、发送邮件到指定邮箱。

2.1 把AJAX地址和验证密钥传给前端 #

你可以通过wp_localize_script来传递这些变量，如果你是把JS写在单独文件里，就这么做：

function load_custom_form_assets() {
    // 如果你有单独的JS文件，先注册再加载，比如：
    // wp_enqueue_script('custom-form-script', get_stylesheet_directory_uri() . '/js/custom-form.js', array('jquery'), '1.0', true);
    
    // 把AJAX地址和nonce传给前端JS
    wp_localize_script('jquery', 'customFormData', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('custom_form_security_check')
    ));
}
add_action('wp_enqueue_scripts', 'load_custom_form_assets');

如果你的JS是直接写在Gantry5的自定义JS区块里，也可以直接在模板或者Gantry的自定义HTML区块里输出这些变量：

<script>
window.ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
window.customFormNonce = '<?php echo wp_create_nonce('custom_form_security_check'); ?>';
</script>

2.2 编写AJAX处理函数 #

然后添加处理表单提交的核心函数，这里会验证请求的合法性，处理表单数据，最后发送邮件：

function process_custom_form_submission() {
    // 第一步：验证安全nonce，防止恶意请求
    if (!wp_verify_nonce($_POST['custom_form_nonce'], 'custom_form_security_check')) {
        wp_send_json_error(array('message' => '安全验证失败，请刷新页面重试。'));
    }

    // 第二步：过滤并验证表单字段，确保数据安全
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);
    $user_message = sanitize_textarea_field($_POST['user_message']);

    if (empty($user_name) || empty($user_email) || empty($user_message)) {
        wp_send_json_error(array('message' => '请填写所有必填字段哦~'));
    }

    // 第三步：获取后台设置的邮箱
    // 这里用WordPress默认的管理员邮箱，如果你自己在后台加了自定义设置项（比如联系邮箱），就换成get_option('你的自定义设置键名')
    $target_email = get_option('admin_email');

    // 第四步：构建邮件内容
    $email_subject = '网站新表单提交：' . $user_name;
    $email_content = "提交人姓名：{$user_name}\n";
    $email_content .= "联系邮箱：{$user_email}\n\n";
    $email_content .= "留言内容：\n{$user_message}";

    // 设置邮件头，让你回复邮件时直接回复到用户的邮箱
    $email_headers = array('From: ' . $user_name . ' <' . $user_email . '>');

    // 第五步：发送邮件（用WordPress自带的wp_mail函数，兼容性更好）
    $mail_sent = wp_mail($target_email, $email_subject, $email_content, $email_headers);

    if ($mail_sent) {
        wp_send_json_success(array('message' => '邮件已成功发送！'));
    } else {
        wp_send_json_error(array('message' => '邮件发送失败，请稍后再试。'));
    }
}
// 让登录和未登录的用户都能触发这个AJAX请求
add_action('wp_ajax_submit_site_custom_form', 'process_custom_form_submission');
add_action('wp_ajax_nopriv_submit_site_custom_form', 'process_custom_form_submission');

3. Gantry5环境下的注意事项 #

• 如果是在Gantry5的自定义区块里加JS，记得在「页面设置」→「资源」里确认jQuery已经加载（如果你的代码用到了jQuery的话）。
• 如果你想让后台可以自定义接收邮件的地址，可以用Gantry5的自定义字段功能，或者用WordPress的设置API在「设置」页面加一个自定义选项，这样不用改代码就能改邮箱。
• 测试的时候要注意：有些服务器默认禁用了邮件函数，导致wp_mail发不出邮件，这种情况可以装个WP Mail SMTP插件来配置SMTP发送，成功率更高。

4. 调试小技巧 #

• 提交失败时，打开浏览器开发者工具的「网络」标签，查看AJAX请求的返回内容，里面会有具体的错误信息。
• 可以在服务器的邮件日志里查一下邮件有没有被发送或者被拦截。
• 确保表单里的action字段值和后端add_action里的名称完全一致（这里是submit_site_custom_form），不然WordPress找不到处理函数。

内容的提问来源于stack exchange，提问作者J.Furmanek