提交Contact Form 7后替换div内容的实现方案求助

第一步：设置初始隐藏样式 #

先给div2添加CSS样式，确保页面加载时它默认隐藏：

.div2 {
    display: none;
}

第二步：利用Contact Form 7的AJAX事件处理切换 #

Contact Form 7默认采用AJAX方式提交表单，不能直接监听普通的submit事件。当表单提交成功（邮件发送完成）时，CF7会触发wpcf7mailsent专属事件，我们可以在这个事件里实现div的显示切换。

基础实现代码 #

document.addEventListener( 'wpcf7mailsent', function( event ) {
    // 获取目标div元素
    const formDiv = document.querySelector('.div1');
    const thankYouDiv = document.querySelector('.div2');
    
    // 切换显示状态
    formDiv.style.display = 'none';
    thankYouDiv.style.display = 'block';
}, false );

多表单场景优化（可选） #

如果页面存在多个CF7表单，只想让该效果作用于特定表单，可以通过事件对象中的表单ID判断：

document.addEventListener( 'wpcf7mailsent', function( event ) {
    // 替换为你的CF7表单ID（可在CF7后台查看）
    if ( '123' === event.detail.contactFormId ) {
        const formDiv = document.querySelector('.div1');
        const thankYouDiv = document.querySelector('.div2');
        formDiv.style.display = 'none';
        thankYouDiv.style.display = 'block';
    }
}, false );

关键注意事项 #

• 替换静态表单为CF7短代码：你的原始代码是静态表单结构，实际使用CF7时需要替换为插件生成的短代码，示例如下：

  <div class="form padtop25 div1">
      <?php echo do_shortcode('[contact-form-7 id="123" title="自定义表单"]'); ?>
      <p class="mandatory"><?php echo('*Mandatory')?></p>
  </div>
  
  <div class="div2">
      <p class="headline"><?php echo('感谢您填写表单！')?> </p>
      <p class="subhead"><?php echo('我们会尽快与您取得联系。')?></p>
      <p class="subhead"><?php echo('如有疑问，请随时联系我们 :)')?></p>
  </div>
  

• JS代码放置位置：建议将JS代码放在主题的footer.php文件（</body>标签之前），或者使用自定义JS插件添加，避免与其他脚本冲突。

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