我在 WordPress 模板中使用 Contact Form 7 插件。我创建了表单和相关的 CSS，所以一切正常。当我单击发送按钮并成功发送电子邮件时，我需要执行以下操作。表格应该消失并显示“已发送！”而不是那个。我需要知道我需要更改的代码。请查看显示我喜欢做什么的照片
【问题讨论】：
标签： wordpress
“on_sent_ok:”和“on_submit”已从 Contact Form 7 5.0 中删除，因此需要使用 2 个可用选项之一。
要隐藏表单，需要在您的 js 文件中添加事件侦听器，或者可以使用提到的脚本在页脚中添加作为操作：
add_action( 'wp_footer', 'contact_form_sent' );
function contact_form_sent() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( 'FORM_ID' == event.detail.contactFormId ) { //Use this only when targeting specific form.
document.getElementById('DIV_ID_OF_FORM').style.display = 'none';
} //Use this only when targeting specific form.
}, false );
</script>
<?php
}
【讨论】：
如果您想隐藏表单并显示感谢信息，您可以使用下面的 CSS。
.wpcf7-form.sent p
{
display:none;
}
【讨论】：
.wpcf7-form.sent 容器内，据我所知（目前，但可能不在 10 月可用的版本中2015）该容器中没有 p 标记。
为了隐藏联系表单 7，您必须添加以下代码，在联系表单 7 的设置部分中您已经生成了它
on_sent_ok: "document.getElementById('contactform').style.display = 'none';"
'contactform' 是“div”的 id，包含您的联系表单的标签。
【讨论】：
在联系表单 7 管理员的附加设置中添加此代码。
on_sent_ok: "var name = $('.wpcf7 input[name=your-name]').val();
var email = $('.wpcf7 input[name=your-email]').val();
$('.wpcf7').hide();
$('.head_er').hide();
$('.conversations').show();
$('.conversations').html('<p>Thank you.</p>');
$('.conversations').html('<p>We will respond to your email shortly.</p>');"
或者你可以看下面的链接
http://ravinderrathore.herobo.com/contact-form-7-thank-you-success-messages/
【讨论】：
有多种方法可以做到这一点，这主要取决于您如何创建表单，但这应该适用于使用新事件模式的基本表单：
<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>
你可以把这段代码放在主窗体里面（没有空行或者cf7会添加
和
标签），或者任何 js 文件，至少可以与表单一起加载。
我个人在表单中使用它还包括调用分析和广告词转换代码。
【讨论】：
on_sent_ok: "$('.wpcf7-form.sent p').hide();"
由于一旦提交表单，发送的消息就被放入表单中，我们需要隐藏所有段落以避免隐藏消息（标记为 DIV）。
【讨论】：
，这也会被删除。
如果您只想隐藏表单而不想使用脚本，您可以这样做：
.wpcf7-form.sent
{
display:none;
}
#thankYou
{
font-size: 18px;
display: none;
}
然后在我的联系表格 7 短代码之后的 HTML 中，我输入：
<div id="thankYou">Thank you</div>
最后在我使用的设置中：
on_sent_ok: "$('#thankYou').show()"
我最喜欢这种方法，因为它允许我实际显示一条消息（与其他只隐藏表单的答案不同）。这似乎也减少了我看到的一些“闪光”，因为由于纯 CSS，隐藏会立即发生。
【讨论】：
我发现由于一些奇怪的原因，并非所有段落都隐藏在我的某些表单中，因此解决方案像
.wpcf7-form.sent p {
display:none;
}
...没有完全起作用。
我发现最可靠的解决方案是在表单配置的“表单”选项卡中添加自定义 DIV 包裹所有内容。即
<div class="formWrapper">
<label> Name (required)
[text* your-name] </label>
<label> Email (required)
[email* your-email] </label>
[submit "Send"]
</div>
然后在您的主题的自定义 css 中添加
.wpcf7 form.sent .formWrapper{
display: none;
}
【讨论】：
每个人都谈到了这一点，但没有人具体说过，所以我将发布另一个答案，说明我目前是如何做的。
您可以使用其他一些答案的建议，并在 CF7 的“其他设置”部分中使用 on_sent_ok。但首先在“表单”字段中，您需要将整个表单内容包装在一个 div 中，我们稍后将引用它：
<div id="form-container">
<h4>Form title</h4>
<p>some text, etc</p>
...form fields...
</div>
我们将使用#form-container" 来引用选项。
on_sent_ok: "$("#form-container").fadeOut();"
我喜欢使用 fadeOut(); 因为动画，但是你可以添加一个类，或者通过 jQuery 做任何其他你想做的事情。
我这样做的原因是，我可以准确定位我想要隐藏的内容，而不是依赖 CF7 在 DOM 中创建的任何元素。
我认为这回答了您的问题，而不会与成功消息产生任何冲突。
【讨论】：
我发现提供的各种答案没有达到我的要求。这是隐藏表单和提交按钮，但仍然允许显示表单发送的消息。所以这是对我有用的解决方案。
注意：需要注意的是，开发人员拥有depreciated、on_sent_ok 和on_submit javascript 函数，并打算在 2017 年底之前取消对它的支持。He recommends 改用 DOM 事件。我不知道如何实现这些。
on_sent_ok: "$('label').fadeOut();"
on_sent_ok: "$('input').fadeOut();"
on_sent_ok: "$('div#required-info').fadeOut();"
最后一个触发器特定于我的情况，其中我有说明“* 指示必填字段”的信息，我将其包装在 <div id="required-info"></div>
所以删除第三行，或者如果您还在表单中引入了其他元素（除了标签和提交按钮），请修改它。
使用此解决方案，表单提交成功后，表单字段、提交按钮和我的附加文本都会消失，并显示成功消息。
【讨论】：
如果有人正在寻找一种与当前版本的 CF7 稍有不同的方法，请尝试这个纯 CSS 解决方案。
form.wpcf7-form {
position: relative;
}
.wpcf7-response-output {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: white;
}
消息直接位于表单上方，将其隐藏。您可以进一步细化 CSS 以调整消息的样式，使其更加突出。
【讨论】：