Contact Form7提交页面刷新，无法使用AJAX提交问题求助

• 检查自定义按钮的事件逻辑
  自定义提交按钮的点击事件大概率没正确触发CF7的AJAX流程，反而触发了表单默认提交。正确的处理逻辑应该是：

  // 替换成你的自定义按钮选择器
  document.querySelector('#your-custom-btn').addEventListener('click', function(e) {
    // 先阻止表单默认提交行为
    e.preventDefault();
    if (confirm('确定提交表单吗？')) {
      // 找到对应的CF7表单
      const cf7Form = document.querySelector('form.wpcf7-form');
      if (cf7Form) {
        // 调用CF7内置的AJAX提交方法
        wpcf7.submit(cf7Form);
      }
    }
  });
  

  注意：如果你的按钮是type="submit"类型，必须通过e.preventDefault()阻止默认提交，否则会直接刷新页面。

• 排查JS错误与CF7核心文件加载
  打开浏览器控制台（F12），查看Console标签下的报错信息——任何JS错误都可能打断CF7的AJAX逻辑。同时在Network标签里搜索contact-form-7.js，确认该文件是否成功加载。

• 排除主题/插件冲突

  1. 临时切换到WordPress默认主题（如Twenty Twenty-Three），测试表单AJAX提交是否恢复正常，排查主题代码的干扰。
  2. 禁用所有其他插件，只保留Contact Form7，测试功能。如果正常，再逐个启用插件，定位冲突插件后针对性处理。

• 检查CF7表单设置
  进入CF7表单编辑页面，确认“附加设置”里没有添加disable_ajax: on这类禁用AJAX的代码；同时确认提交后行为设置为“显示消息（不刷新页面）”。

• 确认按钮与表单的关联
  自定义按钮最好放在CF7表单内部，若在外部，需确保JS代码能准确获取到目标表单元素，避免因DOM选择错误导致提交失败。

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