如何使用JavaScript修改WordPress Contact Form 7文本字段的值？

我来帮你一步步搞定这个问题，你的情况主要有两个核心问题：代码放置位置错误，以及部分ID设置方式无效，再加上可能的DOM加载顺序问题，下面详细拆解：

1. 先修正代码的放置位置 #

你把JS代码直接放在CF7的表单编辑器里是完全错误的——CF7的表单编辑器只会解析内置短代码（比如[text]），JS代码会被当作普通文本输出，根本不会执行。给你几个靠谱的放置方案：

• 新手友好方案：在WordPress后台「外观」→「自定义」→「额外代码」（大部分主题都有这个选项）里，把JS代码包裹在<script>标签里添加；或者用「Custom CSS & JS」这类轻量插件来管理脚本。
• 主题文件方案：打开主题的footer.php文件，在</body>标签之前插入：

<script>
// 这里放你的JS代码
</script>

• 开发者方案：通过主题的functions.php注册脚本，确保只在联系页面加载（避免全局加载浪费资源）：

function load_cf7_custom_script() {
    // 替换成你的联系页面ID或slug
    if ( is_page('contact-us') ) {
        wp_enqueue_script(
            'cf7-custom-js',
            get_stylesheet_directory_uri() . '/js/cf7-custom.js',
            array('jquery'), // 依赖WordPress默认加载的jQuery
            '1.0',
            true // 放在footer加载，避免DOM未就绪
        );
    }
}
add_action('wp_enqueue_scripts', 'load_cf7_custom_script');

然后在主题目录下创建js/cf7-custom.js文件，写入你的JS逻辑。

2. 修正ID设置方式的问题 #

你列出的三种ID设置方式，只有第一种和第三种是给输入框本身加ID的，第二种完全无效：

• 有效方式1：[text your-name id:poo]——CF7会直接给生成的<input>标签添加id="poo"
• 有效方式2：[text your-name html_id:poo]——这是id:的完整写法，和第一种效果完全一致
• 无效方式：<label id="poo"> [text your-name] </label>——这里的ID加在了<label>标签上，你用document.getElementById("poo")选中的是标签，不是输入框，自然修改不了value属性，这种写法直接放弃。

3. 确保JS在DOM加载完成后执行 #

即使ID正确、位置正确，如果JS在页面元素加载前执行，也会找不到目标元素。所以必须把代码放在DOM就绪的回调里：

原生JS写法 #

document.addEventListener('DOMContentLoaded', function() {
    // 先检查元素是否存在，避免控制台报错
    const targetInput = document.getElementById('poo');
    if (targetInput) {
        targetInput.value = 'Jonny';
    }
});

jQuery写法（WordPress默认自带jQuery） #

jQuery(document).ready(function($) {
    // 用ID选择器
    $('#poo').val('Jonny');
    // 或者用name属性选择（更稳妥，避免ID冲突）
    // $('input[name="your-name"]').val('Jonny');
});

额外排查点 #

如果还是无效，打开浏览器控制台（F12）检查：

• 有没有Cannot set property 'value' of null的报错？如果有，说明元素ID不对，右键检查输入框，看实际生成的ID是不是poo（有时候CF7会因为插件冲突或主题修改改变ID）
• 有没有其他JS报错？可能是其他脚本影响了你的代码执行

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