非WordPress站点Divi联系表单提交后如何显示成功提示消息

Divi Contact Form 是WordPress生态专属组件，原生成功提示的显示完全依赖WordPress核心的表单处理接口、主题内置前端脚本的事件触发。脱离WordPress环境后提示不生效的核心原因有三个：

• 现有代码中.et-pb-contact-message提示节点默认被Divi内置CSS设置为隐藏状态
• 无对应逻辑在表单提交成功后为容器添加状态类、触发提示显示
• 当前表单直接提交到contact.php的整页跳转逻辑，和Divi原生的AJAX提交触发逻辑不匹配，无法触发提示显隐。

第一步：添加CSS控制提示显隐规则 #

将以下代码加入站点全局样式中，定义提示默认隐藏、不同状态下的显示样式：

/* 默认隐藏提示框 */
.et-pb-contact-message {
    display: none;
    padding: 15px 20px;
    margin: 0 0 20px 0;
    border-radius: 4px;
}
/* 提交成功时的提示样式 */
.et_pb_contact_form_container.form-success .et-pb-contact-message {
    display: block;
    background: #e8f7ee;
    border: 1px solid #b7e4c7;
    color: #1d7d42;
}
/* 提交失败时的提示样式（可选） */
.et_pb_contact_form_container.form-error .et-pb-contact-message {
    display: block;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #b32d25;
}

第二步：添加AJAX提交逻辑，无刷新触发提示 #

将以下代码加入页面底部（需放在jQuery引入代码之后，Divi默认自带jQuery，未手动移除即可直接使用），拦截原生表单提交事件，通过AJAX发送请求并根据返回结果控制提示显示：

jQuery(document).ready(function($){
    $('#et_pb_contact_form_0 .et_pb_contact_form').on('submit', function(e){
        e.preventDefault();
        const $form = $(this);
        const $container = $form.closest('.et_pb_contact_form_container');
        const $msgBox = $container.find('.et-pb-contact-message');
        const $submitBtn = $form.find('.et_pb_contact_submit');
        
        // 提交前禁用按钮防止重复提交
        $submitBtn.prop('disabled', true).text('提交中...');
        // 清除之前的状态
        $container.removeClass('form-success form-error');

        $.ajax({
            type: 'POST',
            url: $form.attr('action'),
            data: $form.serialize(),
            dataType: 'json',
            success: function(res){
                if(res.success) {
                    $msgBox.find('p').text(res.msg || '提交成功，感谢您的留言！');
                    $container.addClass('form-success');
                    $form[0].reset();
                } else {
                    $msgBox.find('p').text(res.msg || '提交失败，请稍后重试');
                    $container.addClass('form-error');
                }
            },
            error: function(){
                $msgBox.find('p').text('网络异常，请检查连接后重试');
                $container.addClass('form-error');
            },
            complete: function(){
                // 恢复按钮状态
                $submitBtn.prop('disabled', false).text('Submit');
            }
        })
    })
})

第三步：修改后端contact.php返回格式 #

前端AJAX需要接收JSON格式的返回结果，因此需要调整后端处理逻辑，不要直接输出HTML或做页面跳转，处理完表单逻辑后返回结构化JSON数据，参考逻辑如下：

<?php
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    exit(json_encode([
        'success' => false,
        'msg' => '非法请求'
    ]));
}

// 表单字段校验
$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$subject = trim($_POST['subject'] ?? '');
$message = trim($_POST['message'] ?? '');

if (empty($name) || empty($email) || empty($subject) || empty($message)) {
    http_response_code(400);
    exit(json_encode([
        'success' => false,
        'msg' => '请填写所有必填字段'
    ]));
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    http_response_code(400);
    exit(json_encode([
        'success' => false,
        'msg' => '请填写正确的邮箱地址'
    ]));
}

// 此处替换为你实际的邮件发送、数据存储逻辑
$sendResult = mail('你的留言接收邮箱', $subject, "来自{$name}({$email})的留言：\n{$message}");

if ($sendResult) {
    exit(json_encode([
        'success' => true,
        'msg' => 'Thanks' // 可自定义成功提示文本
    ]));
} else {
    http_response_code(500);
    exit(json_encode([
        'success' => false,
        'msg' => '消息发送失败，请稍后重试'
    ]));
}

• 若坚持使用整页跳转提交而非AJAX无刷新提交，只需在contact.php处理完逻辑后跳转回表单页并携带状态参数，例如跳转至/contact?submit=success，再在表单页加少量JS读取URL参数，检测到成功参数时为表单容器添加form-success类即可，缺点是提交后页面会刷新，体验弱于AJAX方案。
• 代码中_wpnonce、_wp_http_referer是WordPress专属的安全校验字段，非WordPress环境下无实际作用可直接删除，建议自行在后端增加字段校验、频率限制、验证码等逻辑，防止垃圾留言提交。
• 如需修改成功提示文案，直接调整后端返回的msg字段值即可，无需改动原有HTML结构。

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