如何隐藏联系表格并显示“已发送！”成功发送后

Question

我在WordPress模板中使用Contact Form 7插件。我创建了表单和相关的CSS，所以一切正常。我需要执行以下操作，当我单击“发送”按钮并且我已成功发送电子邮件时。表格应该消失并显示“已发送！”而不是那个。我需要知道我需要更改的代码。请参阅显示我喜欢的内容的照片

Answer 1

为了隐藏联系表格7，您必须在联系表格7的设置部分添加以下代码

on_sent_ok:  "document.getElementById('contactform').style.display = 'none';"

'contactform'是“div”的id，其中包含联系表单的标签。

Answer 2

在联系表单7 admin的其他设置中添加此代码。

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/

Answer 3

有多种方法可以做到这一点，主要取决于您创建表单的方式，但这应该使用新的事件模式使用基本表单：

<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
  jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>

您可以将此代码放在主窗体中（不带空行，或者cf7将添加
和

标签），或者至少将加载窗体的任何js文件。

我个人在表单中使用它还包括调用分析和＆amp; adword转换代码。

Answer 4

on_sent_ok:  "$('.wpcf7-form.sent p').hide();"

由于一旦表单被提交，发送的消息就被放入表单中，我们需要隐藏所有段落以避免隐藏消息（标记为DIV）。

Answer 5

如果您只想隐藏表单而不想使用脚本，可以执行以下操作：

.wpcf7-form.sent
{
    display:none;
}

#thankYou
{
    font-size: 18px;
    display: none;
}

然后在Contact Form 7短代码后的HTML中，我把：

<div id="thankYou">Thank you</div>

最后在我的设置中我使用：

on_sent_ok:  "$('#thankYou').show()"

我最喜欢这种方法，因为它允许我实际显示一条消息（不同于其他只隐藏表单的答案）。这也似乎减少了我看到的一些“闪光”，因为纯粹的CSS会立即发生隐藏。

Answer 6

如果您想隐藏表单并显示感谢信息，可以使用下面的CSS。

.wpcf7-form.sent p
{
    display:none;
}

Answer 7

＆＃34; on_sent_ok：＆＃34;和＆＃34; on_submit＆＃34;从Contact Form 7 5.0中删除，因此需要使用2个可用选项之一。

1. wpcf7submit
2. wpcf7mailsent

要隐藏表单，需要在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
}

Answer 8

每个人都有点触及这一点，但没有人专门说过，所以我只会发布另一个答案，说明我现在是怎么做的。

您可以使用其他一些答案建议的内容，并在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做你想要的其他任何花哨的东西。

我这样做的原因是我可以准确定位我想要隐藏的内容，而不是依赖于在DOM中由CF7创建的任何元素。

我认为这可以回答您的问题，而不会与成功消息发生任何冲突。

Answer 9

我发现提供的各种答案没有按照我的要求行事。这是隐藏表单和提交按钮，但仍然允许显示表单发送消息。所以这是适用于我的解决方案。

注意：应该注意的是，开发者拥有depreciated on_sent_ok和on_submit个javascript函数，并打算在2017年底之前删除对它的支持。{{3}而是使用DOM事件。我不知道如何实现这些。

on_sent_ok:  "$('label').fadeOut();"
on_sent_ok:  "$('input').fadeOut();"
on_sent_ok:  "$('div#required-info').fadeOut();"

最后一次触发是特定于我的情况，其中我有信息说明“*指示必填字段”，我将其包裹在<div id="required-info"></div>

因此，如果您还在表单中引入了其他元素（除了LABELS和SUBMIT按钮），请删除第三行，或者修改它。

使用此解决方案，表单提交成功后，表单字段，提交按钮和其他文本都会淡出，并显示成功消息。

Answer 10

如果有人在寻找与当前版本的CF7稍有不同的方法，请尝试使用这种纯CSS解决方案。

    form.wpcf7-form {
      position: relative;
    }
    .wpcf7-response-output {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: white;
   }

该消息直接位于表单上方，将其隐藏。您可以进一步完善CSS以调整消息的样式，使其更加突出。

Answer 11

我发现由于某些奇怪的原因，并非所有段落都被隐藏在我的某些表单中，因此诸如此类的解决方案

.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;
}