WordPress中Contact Form 7模态表单字段无法自动填充求助

方法一：通过PHP钩子直接给字段赋值（推荐） #

利用Contact Form 7的wpcf7_form_tag钩子，在后台给目标字段设置默认值，无需前端操作。

1. 打开主题的functions.php文件，添加以下代码：

add_filter( 'wpcf7_form_tag', 'populate_choice_title_field', 10, 2 );
function populate_choice_title_field( $tag, $unused ) {
    // 匹配表单中定义的choice_title字段
    if ( 'choice_title' === $tag['name'] ) {
        // 全局化$choice_title变量，确保在当前上下文可访问
        global $choice_title;
        // 给字段设置默认值，同时做转义处理
        $tag['values'] = array( esc_attr( $choice_title ) );
        $tag['raw_values'] = array( esc_attr( $choice_title ) );
    }
    return $tag;
}

注意：如果$choice_title是模板局部变量，需要在渲染模态框前将其声明为全局变量，或者通过WordPress的set_query_var传递值。

方法二：通过JavaScript前端填充 #

适合需要依赖前端交互触发填充的场景，比如模态框弹出时同步值。

1. 修改页面上的隐藏字段ID，避免和CF7字段ID冲突：

<input type="hidden" id="choice_title_page" name="choice_title_page" value="<?php echo $choice_title; ?>" readonly>

2. 添加以下JavaScript代码（可放在主题footer.php的</body>标签前，或通过WordPress脚本注册功能加载）：

document.addEventListener('DOMContentLoaded', function() {
    // 监听模态框打开事件（以Materialize框架的modalopen事件为例，根据你的模态框插件调整）
    document.addEventListener('modalopen', function(e) {
        if (e.target.id === 'modal-contact-form') {
            const sourceValue = document.getElementById('choice_title_page').value;
            const targetField = document.getElementById('choice_title');
            if (targetField) {
                targetField.value = sourceValue;
            }
        }
    });
});

如果你的模态框没有自带事件，也可以监听触发模态框的按钮点击事件，配合setTimeout确保表单已渲染完成。

方法三：通过短码属性传递值 #

如果$contact_form是你自定义的CF7短码，直接将$choice_title作为属性传递给短码，再通过钩子读取。

1. 修改模板中的短码调用：

<?php echo do_shortcode( sprintf( '[contact-form-7 id="%d" choice_title="%s"]', 123, esc_attr( $choice_title ) ) ); ?>

（将123替换为你的CF7表单ID）

2. 在主题functions.php中添加钩子代码：

add_filter( 'wpcf7_form_tag', 'populate_choice_title_from_shortcode_attr', 10, 2 );
function populate_choice_title_from_shortcode_attr( $tag, $unused ) {
    if ( 'choice_title' === $tag['name'] ) {
        // 获取当前CF7实例的短码属性
        $current_form = WPCF7_ContactForm::get_current();
        $choice_title = $current_form->shortcode_attr( 'choice_title' );
        
        if ( !empty( $choice_title ) ) {
            $tag['values'] = array( esc_attr( $choice_title ) );
            $tag['raw_values'] = array( esc_attr( $choice_title ) );
        }
    }
    return $tag;
}

原方法失效原因 #

页面上的隐藏字段与CF7渲染的表单字段是独立DOM元素，CF7不会自动读取页面其他元素的值；且两个元素使用相同ID会导致DOM选择冲突，无法正常赋值。

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