Shopify自定义联系表单提交异常：reCAPTCHA卡住及跳转问题求助

1. reCAPTCHA相关问题排查 #

• 确认reCAPTCHA的data-sitekey与Shopify后台配置的站点密钥完全匹配，且密钥未过期、未被误修改
• 检查前端提交逻辑：是否错误触发了reCAPTCHA的显式验证流程（原本应为隐式v3评分或v2自动验证），比如grecaptcha.execute()的触发时机写死在提交事件里，导致强制弹出挑战页
• 验证reCAPTCHA回调函数：挑战完成后是否正确将token插入表单隐藏字段（如g-recaptcha-response），且后续执行了表单submit()动作——若回调未触发提交，就会出现挑战后无响应的情况

2. 禁用reCAPTCHA后提交失效排查 #

• 检查表单提交事件绑定：是否将提交逻辑完全依赖reCAPTCHA回调，禁用后无原生提交的 fallback 逻辑
• 查看浏览器控制台错误：按下F12打开控制台，点击提交按钮时检查是否有JS报错（如未定义的grecaptcha变量、DOM元素找不到），这类报错会直接阻塞表单提交
• 确认表单action属性：自定义表单的action是否指向正确的Shopify联系表单处理端点（/contact），是否被JS动态修改为空值或错误地址

3. 快速修复方案 #

方案1：修正reCAPTCHA v3集成逻辑 #

<!-- 页面头部加载reCAPTCHA脚本 -->
<script src="https://www.google.com/recaptcha/api.js?render=你的站点密钥"></script>

<!-- 表单隐藏字段 -->
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">

<!-- 提交按钮绑定逻辑 -->
<script>
document.querySelector('#contact-submit').addEventListener('click', function(e) {
  e.preventDefault();
  grecaptcha.ready(function() {
    grecaptcha.execute('你的站点密钥', {action: 'contact_submit'}).then(function(token) {
      document.querySelector('#g-recaptcha-response').value = token;
      // 手动触发表单提交
      document.querySelector('#contact-form').submit();
    });
  });
});
</script>

方案2：恢复原生提交逻辑（禁用reCAPTCHA时） #

移除所有依赖grecaptcha的代码，添加原生提交绑定：

document.querySelector('#contact-submit').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('#contact-form').submit();
});

4. 额外检查点 #

• 查看Shopify后台第三方应用：是否新安装了表单/反垃圾应用，干扰了自定义表单的提交流程
• 检查主题更新：若昨日更新过主题，主题全局JS可能覆盖了自定义表单的提交事件
• 验证Cookie同意机制：若站点有Cookie弹窗，reCAPTCHA可能需用户同意后才加载，导致未加载完成时提交出错

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