How can I hide the contact form and show "sent!". after sending successfully

Question

I am using the Contact Form 7 plugin in a WordPress template. I created the form and the corresponding CSS, so everything works fine. I need to do the following when I click the submit button and I have a successful sent email. the form should disappear and display "Submitted!". instead of this. I need to know the code that I need to change. Please see the photo that shows what I like to do.

Answer 1

To hide contact form 7, you must add the following code, in the settings section of contact form 7 you have already generated it

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

"contactform" is the identifier for the "div" that contains the tags for your contact form.

Answer 2

Add this code to Advanced settings in the contact form 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>');" 

or you can see the link below

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

Answer 3

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

Since the sent message is placed on the form after the form is submitted, we need to hide all paragraphs so as not to hide the message (which is marked as DIV).

Answer 4

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

 .wpcf7-form.sent { display:none; } #thankYou { font-size: 18px; display: none; } 

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

 <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 the message (unlike other answers that just hide the form). It also seems to reduce the portion of flash that I saw since hiding happens instantly thanks to pure CSS.

Answer 5

Everyone touched it, but no one said it, so I’ll just post another answer, as I do now.

You can use what some other answers suggested and use on_sent_ok in the CF7 Advanced Settings section. But first, in the "form" field, you need to wrap the contents of the entire form in a div, which we will discuss later:

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

We will use # form-container "for the link in the parameters.

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

I like to use fadeOut(); due to the animation, but you can add a class or do whatever you need through jQuery.

My reason for this is that I can configure exactly what I want to hide, rather than relying on any element created by CF7 in the DOM.

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

Answer 6

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

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

Answer 7

I found that the answers provided did not help me. To hide the form and submit button, but still allow the display of the sent message. So here is a solution that worked for me.

NOTE. It should be noted that the developer has depreciated the on_sent_ok and on_submit javascript functions and intends to remove support for it by the end of 2017. He recommends using DOM events instead. I do not know how to implement them.

 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 information indicating "* Indicated required field", and I wrapped it in <div id="required-info"></div>

So, delete this third line or change it if you also added other elements to the form (besides the LABELS and SUBMIT buttons).

With this solution, the form fields, submit button and my additional text disappear when the form message is completed successfully and a success message is displayed.

Answer 8

There are several ways to do this, it mainly depends on how you created your form, but this should work with the base 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 in the main form (without empty lines or cf7 will add tags and tags

) or with any js file that will be loaded with the form at least.

I personally use it in the form to also include a call for analytic and conversion code.