WPCF7集成Google reCAPTCHA v3后表单提交刷新问题求助

方案1：修复自定义reCAPTCHA v3集成（绕过WPCF7默认集成） #

问题核心是你手动调用form.submit()会直接触发浏览器默认提交，跳过WPCF7的Ajax处理流程，按以下步骤调整：

• 在WPCF7表单编辑器中添加一个隐藏字段，用于存储reCAPTCHA验证token：

  [hidden g-recaptcha-token id:g-recaptcha-token]
  

• 替换你当前的reCAPTCHA脚本，改为在表单提交前自动获取token并填充，再触发WPCF7原生提交：

  <script src="https://www.google.com/recaptcha/api.js?render=你的站点密钥"></script>
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const targetForm = document.getElementById('homepage-form');
    targetForm.addEventListener('submit', function(e) {
      e.preventDefault();
      grecaptcha.ready(function() {
        grecaptcha.execute('你的站点密钥', {action: 'submit'}).then(function(token) {
          document.getElementById('g-recaptcha-token').value = token;
          // 触发WPCF7原生提交事件
          const nativeSubmitEvent = new Event('submit', {bubbles: true, cancelable: true});
          targetForm.dispatchEvent(nativeSubmitEvent);
        });
      });
    });
  });
  </script>
  

• 修改提交按钮，移除g-recaptcha类和data-callback等自定义属性，恢复为普通提交按钮：

  <button class="orange-btn border-0 mt-3" type="submit">Send Message</button>
  

• 在主题的functions.php中添加后端验证逻辑，确保token有效：

  add_filter('wpcf7_validate_hidden', 'verify_recaptcha_token', 10, 2);
  function verify_recaptcha_token($result, $tag) {
    if ($tag->name !== 'g-recaptcha-token') return $result;
    
    $token = $_POST['g-recaptcha-token'] ?? '';
    $secretKey = '你的reCAPTCHA密钥';
    $verifyResponse = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
      'body' => [
        'secret' => $secretKey,
        'response' => $token,
        'remoteip' => $_SERVER['REMOTE_ADDR']
      ]
    ]);
    
    $responseData = json_decode(wp_remote_retrieve_body($verifyResponse), true);
    if (!$responseData['success']) {
      $result->invalidate($tag, 'reCAPTCHA验证失败，请重试');
    }
    return $result;
  }
  

方案2：修复WPCF7默认reCAPTCHA v3集成的重复提交问题 #

如果你想用WPCF7自带的集成，按以下步骤排查：

• 完全移除所有自定义的reCAPTCHA脚本和按钮属性，避免冲突。
• 在WPCF7设置页面正确填写reCAPTCHA v3的站点密钥、密钥，确保版本选择为v3。
• 排查冲突：
  • 暂时禁用所有其他插件，测试表单是否正常提交。
  • 切换到WordPress默认主题（如Twenty Twenty-Three），确认是否是主题JS干扰。
• 添加防重复提交脚本，避免多次触发提交事件：

  <script>
  document.addEventListener('wpcf7submit', function() {
    const submitBtn = document.querySelector('#homepage-form [type="submit"]');
    submitBtn.disabled = true;
    setTimeout(() => submitBtn.disabled = false, 3000);
  }, false);
  </script>
  

关键注意事项 #

• 不要同时启用自定义reCAPTCHA集成和WPCF7默认集成，会导致逻辑冲突。
• 确保主题的header.php和footer.php中正确保留wp_head()和wp_footer()，WPCF7的Ajax脚本依赖这两个钩子加载。

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