我在 WordPress 模板中使用 Contact Form 7 插件。我创建了表单和相关的 CSS，所以一切正常。当我单击发送按钮并成功发送电子邮件时，我需要执行以下操作。表格应该消失并显示“已发送！” 而不是那个。我需要知道我需要更改的代码。请查看显示我喜欢做什么的照片
问问题
46901 次
11 回答
7
“on_sent_ok:”和“on_submit”已从联系表 7 5.0 中删除，因此需要使用 2 个可用选项之一。
- wpcf7提交
- wpcf7邮件已发送
要隐藏表单，需要在您的 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
}
于 2018-05-08T21:52:02.153 回答
4
如果您想隐藏表单并显示感谢信息，您可以使用下面的 CSS。
.wpcf7-form.sent p
{
display:none;
}
于 2015-10-22T06:58:38.583 回答
3
在联系表格 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/
于 2015-04-08T06:14:45.527 回答
3
为了隐藏联系表格 7，您必须添加以下代码，在联系表格 7 的设置部分中，您已经生成了它
on_sent_ok: "document.getElementById('contactform').style.display = 'none';"
'contactform' 是“div”的 id，其中包含您的联系表单的标签。
于 2012-06-15T14:44:48.100 回答
3
有多种方法可以做到这一点，这主要取决于您如何创建表单，但这应该适用于使用新事件模式的基本表单：
<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>
您可以将此代码放在主窗体中（没有空行或 cf7 将添加
和
标签），或至少与表单一起加载的任何 js 文件。
我个人在表单中使用它还包括调用分析和广告词转换代码。
于 2017-09-12T09:15:18.927 回答
1
如果您只想隐藏表单并且不想使用脚本，您可以这样做：
.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，隐藏会立即发生。
于 2014-02-20T21:59:35.270 回答
1
on_sent_ok: "$('.wpcf7-form.sent p').hide();"
由于一旦提交表单，发送的消息就会被放入表单中，因此我们需要隐藏所有段落以避免隐藏消息（标记为 DIV）。
于 2013-09-20T17:20:35.810 回答
1
我发现由于某些奇怪的原因，并非所有段落都隐藏在我的某些表单中，因此解决方案如下
.wpcf7-form.sent p {
display:none;
}
...没有完全起作用。
我发现最可靠的解决方案是在表单配置的“表单”选项卡中，添加一个自定义 DIV 环绕您的所有内容。IE
<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;
}
于 2020-10-08T13:04:19.193 回答
0
每个人都对此有所了解，但没有人具体说过，所以我将发布另一个答案，说明我目前是如何做的。
您可以使用其他一些答案的建议并on_sent_ok在 CF7 的“附加设置”部分中使用。但首先在“表单”字段中，您需要将整个表单内容包装在一个 div 中，我们稍后将引用该 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 中创建的任何元素。
我认为这可以回答您的问题，而不会与成功消息产生任何冲突。
于 2014-10-02T00:41:44.510 回答
0
我发现提供的各种答案没有达到我的要求。这是隐藏表单和提交按钮，但仍然允许显示表单发送的消息。所以这是对我有用的解决方案。
注意：需要注意的是，开发人员已经弃用了on_sent_ok和on_submitjavascript 函数，并打算在 2017 年底之前取消对它的支持。他建议改用 DOM 事件。我不知道如何实现这些。
on_sent_ok: "$('label').fadeOut();"
on_sent_ok: "$('input').fadeOut();"
on_sent_ok: "$('div#required-info').fadeOut();"
最后一个触发器特定于我的情况，其中我有信息说明“*指示必填字段”，我将其包装在<div id="required-info"></div>
所以删除第三行，或者如果您还向表单中引入了其他元素（除了标签和提交按钮），请修改它。
使用此解决方案，表单提交成功后，表单字段、提交按钮和我的附加文本都会消失，并显示成功消息。
于 2017-05-23T03:36:56.090 回答
0
如果有人正在寻找与当前版本的 CF7 一起使用的稍微不同的方法，请尝试这个纯 CSS 解决方案。
form.wpcf7-form {
position: relative;
}
.wpcf7-response-output {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: white;
}
消息直接位于表单上方，将其隐藏。您可以进一步细化 CSS 以调整消息的样式，使其更加突出。
于 2020-04-18T15:13:42.253 回答