如何在WordPress自定义CRM表单中强制reCAPTCHA v2验证？

核心思路 #

通过JavaScript拦截表单提交事件，强制验证用户是否完成reCAPTCHA勾选，验证通过后再允许表单提交，同时保留原CRM表单的所有字段和提交逻辑，确保数据正常导入CRM。

具体修改步骤 #

1. 为表单添加唯一ID（方便JS定位）

找到你的表单标签，添加id="crm-lead-form"（可自定义，只要和JS里对应即可），示例：

<form action="你的CRM提交地址" method="POST" id="crm-lead-form">
  <!-- 原表单的所有输入字段 -->
  <!-- 已添加的reCAPTCHA复选框 -->
  <div class="g-recaptcha" data-sitekey="你的站点密钥"></div>
  <button type="submit">提交</button>
</form>

2. 添加表单提交验证的JavaScript

在页面底部（或表单之后）添加以下脚本，拦截提交动作并验证reCAPTCHA：

document.getElementById('crm-lead-form').addEventListener('submit', function(e) {
  // 获取reCAPTCHA的响应值
  const recaptchaResponse = grecaptcha.getResponse();
  
  // 检查是否完成验证
  if (!recaptchaResponse || recaptchaResponse.length === 0) {
    // 阻止表单提交
    e.preventDefault();
    // 提示用户完成验证（可自定义提示内容）
    alert('请勾选"我不是机器人"验证框后再提交');
    // 可选：滚动到验证框区域
    document.querySelector('.g-recaptcha').scrollIntoView({ behavior: 'smooth' });
    return;
  }
  
  // 验证通过，允许表单正常提交（保留原CRM提交逻辑）
});

3. 确认reCAPTCHA脚本引入正确

确保页面头部的reCAPTCHA脚本是官方的，且站点密钥正确：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

关键注意事项 #

• 不要修改原表单的action、method以及任何CRM要求的输入字段，避免破坏数据导入流程。
• 如果表单是通过WordPress插件生成的，可通过自定义HTML模块、主题functions.php或自定义JS插件注入上述代码。
• 若需要更友好的提示样式，可将alert替换为页面内的自定义提示元素（比如在表单上方添加隐藏的错误提示div，验证失败时显示）。

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