WordPress中如何用一个表单的数据预填充另一个表单的对应字段

以下是两种可直接落地的实现方案，适配绝大多数WordPress站点场景：

方案1：用主流表单插件实现（零/少量代码，推荐） #

如果你现有的独立页咨询表单是用Contact Form 7、WPForms、Gravity Forms这类主流插件搭建的，直接用插件自带的动态填充功能即可，5分钟就能配置完成：

• 首页新增的短表单设置提交方式为GET，提交目标地址填写你独立咨询页的URL，两个字段的name属性统一设置为fullname、useremail（命名可自定义，前后保持一致即可）
• 给独立页咨询表单的对应字段绑定URL参数映射：
  • 用Contact Form 7的话，直接修改字段短码添加default:get参数即可，比如姓名字段写[text* your-name default:get fullname]，邮箱字段写[email* your-email default:get useremail]
  • 用WPForms/Gravity Forms的话，在对应字段的「高级设置」里找到「动态填充」选项，选择填充来源为「URL参数」，参数名填入之前设置的fullname、useremail即可
• 测试验证：首页填写内容提交后，跳转的咨询页URL会自动带上参数?fullname=xxx&useremail=xxx@xx.com，对应字段会自动完成预填充

方案2：自定义代码实现（适合自研表单的场景） #

如果你的表单是自定义开发的，可以直接用下面的代码实现：

• 首先在首页模板/自定义HTML模块里加入短表单代码：

<form action="/你的咨询页固定链接后缀" method="get">
  <div>
    <label>姓名</label>
    <input type="text" name="fullname" required>
  </div>
  <div>
    <label>邮箱</label>
    <input type="email" name="useremail" required>
  </div>
  <button type="submit">继续</button>
</form>

• 给咨询页表单加预填充逻辑，二选一即可：
  1. 后端PHP实现（性能更稳定）：在咨询页表单字段的value属性里加取值逻辑，务必做XSS过滤，示例：

  <input type="text" name="your-name" value="<?php echo isset($_GET['fullname']) ? esc_attr($_GET['fullname']) : ''; ?>" required>
  <input type="email" name="your-email" value="<?php echo isset($_GET['useremail']) ? esc_attr($_GET['useremail']) : ''; ?>" required>
  

  2. 前端JS实现（无需改后端代码）：在咨询页页脚插入一段JS即可：

  document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const fullname = urlParams.get('fullname');
    const useremail = urlParams.get('useremail');
    if (fullname) document.querySelector('input[name="your-name"]').value = fullname;
    if (useremail) document.querySelector('input[name="your-email"]').value = useremail;
  });
  

• 如果你不想让用户信息暴露在URL里，可以把提交方式改成POST，用PHP Session或者WooCommerce自带的Session功能临时存储提交的内容，跳转到咨询页读取后销毁Session值即可，安全性更高。

注意事项 #

• 所有读取用户提交内容的位置都要做转义过滤，避免XSS安全漏洞
• 如果站点开了页面缓存，需要给咨询页设置带参数访问时跳过缓存，避免预填充失效
• 没有匹配到参数时表单会保持空白，不会影响原有咨询表单的正常使用

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