Contact Form 7表单首次点击提交时Ajax无法工作

以下是几个经过验证的可行解决方案，你可以逐一尝试：

• 手动触发CF7初始化
  部分主题或自定义脚本的DOM加载逻辑可能导致CF7的JS未正确绑定首次点击事件。在主题自定义JS中添加以下代码，强制在DOM加载完成后初始化CF7：

  document.addEventListener('DOMContentLoaded', function() {
    if (typeof wpcf7 !== 'undefined') {
      wpcf7.init();
    }
  });
  

  若你的网站仍依赖jQuery，可改用：

  jQuery(document).ready(function($) {
    if (typeof wpcf7 !== 'undefined') {
      wpcf7.init();
    }
  });
  

• 处理动态加载的表单
  如果表单是通过AJAX加载到弹窗、标签页这类动态容器中的，CF7默认不会检测到新加载的表单。添加监听代码，在表单加载完成后重新初始化：

  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length > 0) {
        const cf7Form = document.querySelector('.wpcf7-form');
        if (cf7Form && typeof wpcf7 !== 'undefined') {
          wpcf7.init(cf7Form);
          observer.disconnect();
        }
      }
    });
  });
  // 替换成你的表单容器ID
  observer.observe(document.getElementById('form-container'), { childList: true, subtree: true });
  

• 强制阻止默认提交行为
  若存在脚本冲突导致默认提交未被拦截，可手动绑定点击事件，强制触发CF7的AJAX提交：

  document.addEventListener('DOMContentLoaded', function() {
    const cf7SubmitBtn = document.querySelector('.wpcf7-submit');
    if (cf7SubmitBtn) {
      cf7SubmitBtn.addEventListener('click', function(e) {
        e.preventDefault();
        const targetForm = this.closest('.wpcf7-form');
        if (targetForm && typeof wpcf7 !== 'undefined') {
          wpcf7.submit(targetForm);
        }
      });
    }
  });
  

• 检查CF7设置与缓存

  1. 进入CF7表单编辑页面，确认「使用AJAX提交表单」选项已勾选（新版本默认开启，但建议手动确认）；
  2. 清除网站缓存插件及浏览器缓存，旧的JS缓存可能残留冲突代码。

• 调整CF7脚本加载位置
  在主题的functions.php中添加代码，强制CF7的JS在页脚加载，避免与头部脚本冲突：

  add_action( 'wp_enqueue_scripts', 'cf7_load_footer_scripts', 99 );
  function cf7_load_footer_scripts() {
    wp_deregister_script( 'contact-form-7' );
    wp_enqueue_script( 'contact-form-7', plugins_url( '/js/scripts.js', WPCF7_PLUGIN_FILE ), array( 'jquery' ), WPCF7_VERSION, true );
  }
  

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