Contact Form7升级后SweetAlert2功能失效问题排查求助

问题核心原因 #

• Contact Form 7 5.3之后的版本重构了提交逻辑，不再触发全局ajaxComplete事件，你原来绑定的监听逻辑完全无法捕获表单提交结果，这是功能失效的最主要原因
• 原有代码存在重复绑定问题：每次点击提交按钮都会给document新增一次ajaxComplete监听，多次点击后会重复触发弹窗
• 表单状态判断逻辑不严谨：全局选择form.wpcf7-form取的是页面第一个表单，页面存在多个表单时会判断错误
• 新版本Contact Form 7默认不再强制加载jQuery，若主题未主动引入jQuery会导致整段脚本不执行

修复后的代码 #

把你原来的PHP挂载脚本替换成以下内容即可：

add_action( 'wp_footer', 'swal_contact', 999 );
function swal_contact() {
    $title_success = get_option('swal_cf7_title_success');
    $duration_success = get_option('swal_cf7_duration_success');
    $title_error = get_option('swal_cf7_title_error');
    $duration_error = get_option('swal_cf7_duration_error');
    ?>
    <script>
    document.addEventListener('wpcf7mailsent', function(event) {
        // 提交成功弹窗
        Swal.fire({
            icon: 'success',
            title: 'Done!',
            html: 'Thank you for your message.<br>We will contact you shortly.',
            showCancelButton: false,
        });
        // 清除错误样式
        document.querySelectorAll('.input-error').forEach(el => el.classList.remove('input-error'));
    }, false);

    document.addEventListener('wpcf7invalid', function(event) {
        // 验证失败弹窗
        Swal.fire({
            icon: 'warning',
            title: 'Error',
            html: 'One or more fields have an error.<br>Please check and try again.',
            showCancelButton: false,
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            }
        });
        // 给错误字段加样式
        event.detail.form.querySelectorAll('[aria-invalid="true"]').forEach(el => el.classList.add('input-error'));
    }, false);

    // 输入时清除错误样式
    document.addEventListener('input', function(e) {
        if (e.target.closest('form.wpcf7-form') && e.target.matches('input, textarea')) {
            e.target.classList.remove('input-error');
        }
    }, false);
    </script>
    <?php
}

优化说明 #

• 直接使用Contact Form 7官方提供的自定义DOM事件监听提交结果，兼容所有5.3+版本
• 去掉了jQuery依赖，不管是否加载jQuery都可以正常运行
• 修复了多表单场景下的判断错误问题，自动匹配当前提交的表单
• 去掉了重复绑定的逻辑，整段脚本只绑定一次事件，不会出现多次弹窗的问题

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