Contact Form 7 实现邮件发送后隐藏表单并显示带成功提示的Div

Hey there! 你已经搞定了表单隐藏的CSS部分，接下来咱们只需要两步就能实现自定义成功消息的显示效果：

1. 在CF7表单中添加默认隐藏的成功消息Div #

打开你的Contact Form 7表单编辑器，在表单内容的末尾（或者你希望消息显示的位置）插入这段HTML代码：

<div class="wpcf7-custom-success" style="display: none;">
  <h3>消息发送成功！</h3>
  <p>我们已经收到你的留言，会尽快回复你，感谢你的联系😊</p>
</div>

这里的display: none是让这个Div默认隐藏，只有在邮件发送成功后才触发显示。你可以完全自定义里面的文字内容，匹配你的网站风格。

2. 用JavaScript监听发送成功事件 #

Contact Form 7提供了官方的DOM事件来监听邮件发送成功的动作，我们可以利用这个事件来显示自定义的成功Div。你可以通过以下几种方式添加这段代码：

• 主题的「自定义JavaScript」设置（大部分现代主题都自带这个功能）
• 主题的functions.php文件（通过wp_enqueue_script或wp_add_inline_script添加）
• 自定义HTML插件（直接插入到表单所在页面的自定义HTML区块中）

代码示例：

// 监听CF7邮件发送成功的事件
document.addEventListener('wpcf7mailsent', function(event) {
  // 找到我们的自定义成功Div并设置显示
  const successElement = document.querySelector('.wpcf7-custom-success');
  if (successElement) {
    successElement.style.display = 'block';
  }
}, false);

因为你已经有.wpcf7-form.sent { display:none; }这段CSS，所以表单会自动被隐藏，这段JS只负责触发成功消息的显示就够了。

（可选）给成功消息添加美化样式 #

为了让成功消息更贴合你的网站设计，你可以添加一些CSS样式：

.wpcf7-custom-success {
  padding: 1.5rem;
  background-color: #f0fdf4;
  border-left: 4px solid #22c55e;
  border-radius: 6px;
  margin-top: 1rem;
}

.wpcf7-custom-success h3 {
  margin: 0 0 0.5rem 0;
  color: #166534;
}

.wpcf7-custom-success p {
  margin: 0;
  color: #15803d;
}

把这段CSS放到主题的自定义CSS区域，或者子主题的style.css文件里就行。

为什么只靠CSS搞不定？ #

CF7发送成功后会给表单添加.sent类，你用CSS隐藏表单是没问题的，但CSS没法直接触发显示另一个独立的Div（除非成功Div是表单的直接子元素或相邻元素，这种结构限制太大）。用官方提供的wpcf7mailsent事件监听是最可靠的方式，能确保只有在邮件真正发送成功后才显示消息。

内容的提问来源于stack exchange，提问作者Mary X Nabors