发送成功后隐藏Contact Form 7并显示DIV的实现问题

把表单包裹在自定义DIV里确实是更简便、更可靠的方案——Contact Form 7自带的DOM结构可能随版本更新变化，自定义容器能让你精准控制目标元素，避免依赖插件自带的类/ID失效。

具体实现步骤： #

1. 修改表单短码的包裹结构
   给CF7短码套一个自定义容器，同时准备好默认隐藏的成功提示DIV：

   <!-- 自定义表单容器 -->
   <div class="cf7-custom-container" id="cf7-9a5f5ae-container">
       [contact-form-7 id="9a5f5ae" title="你的表单标题"]
   </div>
   
   <!-- 成功提示DIV，默认隐藏 -->
   <div class="cf7-success-message" style="display: none;">
       表单提交成功！我们会尽快与你联系。
   </div>
   

2. 编写修正后的JS事件监听代码
   监听wpcf7mailsent事件（CF7发送成功后的官方事件），隐藏表单容器并显示成功提示：

   document.addEventListener('wpcf7mailsent', function(event) {
       // 匹配目标表单的ID（和短码里的id一致）
       if (event.detail.contactFormId === '9a5f5ae') {
           const formContainer = document.getElementById('cf7-9a5f5ae-container');
           const successMsg = document.querySelector('.cf7-success-message');
           
           if (formContainer && successMsg) {
               // 隐藏表单容器
               formContainer.style.display = 'none';
               // 显示成功提示
               successMsg.style.display = 'block';
           }
       }
   }, true);
   

为什么你原来的代码不生效？ #

• 原代码仅尝试设置某个元素的visibility: visible，未处理表单的隐藏逻辑，方向错误；
• getElementsByClassName返回元素集合，若页面有多个同类别名元素，可能取到错误目标；
• visibility仅控制可见性，元素仍会占据页面空间，无法让成功DIV“替换”原表单位置（display: none才会让出空间）。

可选优化：用CSS类控制显示隐藏（推荐） #

为了让样式和JS分离，也可以通过添加/移除CSS类实现：

/* CSS样式 */
.cf7-hidden {
    display: none;
}
.cf7-success-shown {
    display: block;
}

对应的JS代码修改为：

document.addEventListener('wpcf7mailsent', function(event) {
    if (event.detail.contactFormId === '9a5f5ae') {
        const formContainer = document.getElementById('cf7-9a5f5ae-container');
        const successMsg = document.querySelector('.cf7-success-message');
        
        if (formContainer && successMsg) {
            formContainer.classList.add('cf7-hidden');
            successMsg.classList.add('cf7-success-shown');
        }
    }
}, true);

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