WP Contact Form 7：按提交按钮分向两个URL提交表单

嘿，我来帮你搞定这个双提交按钮的难题！你的核心问题是要区分两个按钮的点击动作，分别跳转到不同页面并传递表单值，下面分两种方案来解决：

方案一：用CF7附加设置+重定向插件（推荐，更稳定） #

既然你已经在用Contact Form 7 Redirection插件，咱们可以直接利用它的条件重定向功能，配合给提交按钮加唯一标识来实现：

1. 修改表单里的提交按钮，添加name和ID
   给两个按钮分别设置不同的name（让插件能区分点击的是哪个），也可以加ID方便调试，修改后的CF7表单代码：

   <label class="input"> [date* arrival] </label>
   <label class="input"> [date* departure] </label>
   <label class="input"> [number* occupants] </label>
   <p>[submit submit-request id:submit-request "Request: Target URL 1"]</p>
   <p>[submit submit-booking id:submit-booking "Booking: Target URL 2"]</p>
   

2. 在重定向插件里设置两条规则
   打开CF7表单的重定向设置页面（插件会在CF7编辑页加一个「Redirect」标签）：

   • 第一条规则：
     • 触发条件：选择「Submit Button Name」，值填submit-request
     • 目标URL：填写http://targeturl1/?arrival=[arrival]&departure=[departure]&occupants=[occupants]
     • （插件会自动把[arrival]这类短代码替换成用户填写的表单值）
   • 第二条规则：
     • 触发条件：选择「Submit Button Name」，值填submit-booking
     • 目标URL：填写http://targeturl2/?arrival=[arrival]&departure=[departure]&occupants=[occupants]

3. 目标CF7表单接收值
   对于目标URL1的CF7表单，用你已经安装的Contact Form 7 - Dynamic Text Extension插件，添加动态文本字段来接收GET参数：

   [dynamictext arrival "get_param('arrival')"]
   [dynamictext departure "get_param('departure')"]
   [dynamictext occupants "get_param('occupants')"]
   

   这样就能自动获取传递过来的值了。

方案二：修复你的DOM事件JS代码 #

你之前的JS只做了跳转，没有携带表单数据，所以值传不过去。修改后的代码会收集表单字段值，拼接成URL参数再跳转：

1. 先给提交按钮加ID（和方案一一样，修改CF7的按钮代码）
2. 替换成下面的JS代码：

   // 监听第一个按钮点击
   document.getElementById("submit-request").addEventListener('click', function(e) {
     e.preventDefault(); // 阻止默认表单提交行为
     const form = this.closest('form');
     // 收集所有表单数据
     const formData = new FormData(form);
     // 转成URL参数格式
     const urlParams = new URLSearchParams(formData).toString();
     // 跳转到目标URL并携带参数
     window.location.href = `http://targeturl1/?${urlParams}`;
   });
   
   // 监听第二个按钮点击
   document.getElementById("submit-booking").addEventListener('click', function(e) {
     e.preventDefault();
     const form = this.closest('form');
     const formData = new FormData(form);
     const urlParams = new URLSearchParams(formData).toString();
     window.location.href = `http://targeturl2/?${urlParams}`;
   });
   

为什么之前的JS不行？ #

你原来的代码只是单纯跳转页面，没有把用户填写的arrival、departure等值打包传递过去。上面的代码通过FormData收集表单所有字段，转成URL参数后拼在目标地址后面，这样目标页面就能通过GET参数拿到这些值了。

如果目标URL2的第三方表单需要用POST接收数据，那可以改成用JS创建隐藏表单提交，而不是跳转，不过大部分第三方表单都支持GET参数接收，上面的方法应该够用。

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