Contact Form 7提交下拉选择后无法跳转下载PDF问题排查

云上老周

2026-7-18

Contact Form 7提交后无法根据下拉选项跳转PDF的修复方案

核心问题定位

你当前代码的关键错误是：JS中使用下拉框的ID（menu314）获取值，但Contact Form 7的event.detail.inputs是通过表单字段的name属性索引的，而你的下拉框name是menu-312，导致无法正确获取选中值，自然不会触发跳转。

修复步骤及代码

1. 修正值的获取逻辑

将JS中获取选中值的代码从event.detail.inputs['menu314']改为匹配字段name的方式，推荐用数组遍历（适配不同CF7版本的inputs结构，更稳妥）。

2. 修复后的完整主题文件代码

add_action('wp_footer', 'redirect_page');

function redirect_page()
{
?>
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function(event) {
    console.log(event.detail);
    if ('95' == event.detail.contactFormId) {
        // 遍历数组获取选中值，兼容更多CF7版本
        let selectedValue = '';
        event.detail.inputs.forEach(item => {
            if (item.name === 'menu-312') {
                selectedValue = item.value;
            }
        });

        console.log('选中的指南：', selectedValue);
        if (selectedValue == 'Download Guide for DFG teams') {
            window.location.assign('https://你的域名/dfg-guide.pdf'); // 替换为实际完整PDF路径
        } else if (selectedValue == 'Download Guide for Non-specialists') {
            window.location.assign('https://你的域名/non-specialist-guide.pdf');
        } else if (selectedValue == 'Download Guide for Managers') {
            window.location.assign('https://你的域名/manager-guide.pdf');
        }
    }
}, false);
</script>
<?php
}