如何为同一页面多个Contact Form 7表单绑定DOM触发事件

问题根源 #

你代码中使用的document.querySelector('.wpcf7')仅会返回页面中第一个匹配.wpcf7类名的DOM元素，只有第一个表单完成了事件绑定，其余表单没有绑定对应事件，自然无法触发逻辑。

解决方法1：遍历所有表单逐个绑定事件 #

使用document.querySelectorAll获取页面全部CF7表单，遍历后逐个绑定事件即可，完整代码如下：

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
    ?>
    <script type="text/javascript">
        // 获取页面所有CF7表单元素
        var wpcf7Elms = document.querySelectorAll( '.wpcf7' );
        // 遍历每个表单绑定提交事件
        wpcf7Elms.forEach(function(elm) {
            elm.addEventListener( 'wpcf7submit', function( event ) {
                var idform = event.detail.contactFormId;
                alert (idform);
                // 原有按表单ID判断的逻辑可以直接复用
                //if ('563' == event.detail.contactFormId) {
                //    自定义业务逻辑
                //}
            }, true );
        });
    </script>
    <?php
}

解决方法2：使用事件委托（更推荐，支持动态加载的表单） #

直接将事件绑定到全局document对象，依赖事件冒泡机制触发逻辑，无需提前绑定每个表单，后续动态插入的表单也能正常触发：

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
    ?>
    <script type="text/javascript">
        document.addEventListener( 'wpcf7submit', function( event ) {
            var idform = event.detail.contactFormId;
            alert (idform);
        }, true );
    </script>
    <?php
}

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