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

How can I hide the contact form and shows "sent!" after successful sending

提问by HTML Man

I'm using Contact Form 7 plugin in a WordPress template. I created the form and the related CSS, so everything is working fine. I need to do the following, when I click the send button and I have a successful sent email. the form should disappear and shows "Sent!" instead of that. I need to know the code that I need to change. Please see the photo that shows what I like to do

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

采纳答案by HTML Man

In order to hide contact form 7 you have to add the following code, in the setting section of the contact form 7 you already generate it

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

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

'contactform' is the id of the "div" that includes the tags of your contact form.

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

回答by Ravinder Kumar

Add this code in Additional Settings in contact form 7 admin.

在联系表单 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>');"

or you can see below link

或者你可以看到下面的链接

http://ravinderrathore.herobo.com/contact-form-7-thank-you-success-messages/

http://ravinderrathore.herobo.com/contact-form-7-thank-you-success-messages/

回答by Bibisha Jacob

If you want to hide the form and display the thank you message, you can use the CSS below.

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

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

回答by silmaril

There are multiple ways to do this, it depend mostly of how you created your form, but this should work with a basic form using the new event mode :

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

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

You can put this code inside the main form (without blank lines or cf7 will add
and

您可以将此代码放在主窗体中（没有空行或 cf7 将添加
和

tags), or with any js file that would be loaded with the form at least.

标签），或至少与表单一起加载的任何 js 文件。

I personnaly use it in the form to also include call to analytics & adword conversion code.

我个人在表单中使用它，还包括调用分析和 Adword 转换代码。

回答by Akshat

"on_sent_ok:" and "on_submit" are removed from Contact Form 7 5.0 so need to use one of the 2 available options.

“on_sent_ok:”和“on_submit”已从联系表 7 5.0 中删除，因此需要使用 2 个可用选项之一。

1. wpcf7submit
2. wpcf7mailsent

1. wpcf7提交
2. wpcf7mailsent

To hide the form, need to add the event listener either in your js file or can add as action in footer using the script mentioned:

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

回答by jplozano

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

Since the sent message is placed into the form once the form is submited, we need to hide all paragraphs to avoid hiding the message (which is marked up as a DIV).

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

回答by ProVega

If you just want to hide the form and don't want to use script you can do this:

如果您只想隐藏表单并且不想使用脚本，您可以这样做：

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

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

Then in my HTML after the Contact Form 7 short code, I put:

然后在联系表格 7 短代码之后的 HTML 中，我输入：

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

Finally in my settings I use:

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

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

I like this approach best because it allows me to actually show a message (unlike other answers that just hide the form). This also seems to reduce some of the "flash" I was seeing as the hide happens instantly thanks to pure CSS.

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

回答by Jeremy Miller

Everyone has kind of touched on this, but no one has specifically said it, so I'll just post another answer with how I am doing it currently.

每个人都对此有所触及，但没有人具体说过，所以我将发布另一个答案，说明我目前的做法。

You can use what some of the other answers have suggested and use on_sent_okin the "additional settings" section of CF7. But first in the "form" field you need to wrap your entire form contents in a div that we will reference later:

您可以使用其他一些答案所建议的内容，并on_sent_ok在 CF7 的“其他设置”部分中使用。但是首先在“表单”字段中，您需要将整个表单内容包装在我们稍后将引用的 div 中：

<div id="form-container">
     <h4>Form title</h4>
     <p>some text, etc</p>
     ...form fields...
</div>

We'll use #form-container" to reference in the options.

我们将使用 #form-container" 在选项中引用。

on_sent_ok:  "$("#form-container").fadeOut();"

I like to use fadeOut();because of the animation, but you can add a class, or do whatever other fancy stuff you want there via jQuery.

我喜欢使用fadeOut();因为动画，但你可以添加一个类，或者通过 jQuery 做任何你想要的其他花哨的东西。

My reason for doing it this way is so that I can target exactly what I want to hide instead of relying on whatever element that is created by CF7 in the DOM.

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

I think this answers your question without causing any conflicts with the success message.

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

回答by Alfred Armstrong

Should anyone be looking for a slightly different approach that works with the current version of CF7, try this pure CSS solution.

如果有人正在寻找适用于当前版本的 CF7 的略有不同的方法，请尝试这个纯 CSS 解决方案。

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

The message is positioned directly over the form, hiding it. You can further refine the CSS to adjust the styling of the message to make it more prominent.

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

回答by inspirednz

I found the various answers provided didn't do what I required. Which is to hide the form and the submit button, but to still permit display of the form sent message. So here is the solution that worked for me.

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

NOTE: It should be noted that the developer has depreciatedthe on_sent_okand on_submitjavascript functions, and intends to remove support for it by the end of 2017. He recommendsusing the DOM Events instead. I have no idea how to implement those.

注意：需要注意的是，开发者已经对和javascript 函数进行了折旧，并打算在 2017 年底之前取消对它的支持。他建议改用 DOM 事件。我不知道如何实现这些。on_sent_okon_submit

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

The last trigger is specific to my case, in which I have info stating "* Indicated required field", and I wrapped that in <div id="required-info"></div>

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

So remove that third line, or modify it if you have also introduced other elements to the form (besides the LABELS and SUBMIT button).

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

With this solution, the form fields, the submit button, and my additional text all fade when form submission is successful, and the success message displays.

使用此解决方案，表单字段、提交按钮和我的附加文本在表单提交成功时都会消失，并显示成功消息。