Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

wordpress

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

enter image description here

like image 792
HTML Man Avatar asked Jun 07 '12 13:06

HTML Man


People also ask

How to hide success message in contact form 7?

Soltution to hide the success message Next, edit form you want to change and go to bottom of it. You will get box named as “Additional Settings”. In the “ Additional Settings ” box, add following line of code. Thats it.

How do you show success message after submitting HTML form?

There are 2 general ways to show a message after submitting an HTML form: Use Javascript AJAX to submit the form and show a message when the processing is complete. Submit the form as usual, and have the server-side script pass back a flag to show the message. Just how exactly does each of these work?

How do I turn off contact form?

Go to Dashboard > Plugins > Installing plugins, find Contact Form 7 in the list y click on Deactivate. Best regards, Yordan.

How do I stop Contact Form 7 from sending emails?

If you set demo_mode: on in the Additional Settings field, the contact form will be in the demo mode. In this mode, the contact form will skip the process of sending mail and just display “completed successfully” as a response message.


2 Answers

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

  1. wpcf7submit
  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:

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
}
like image 92
Akshat Avatar answered Oct 21 '22 18:10

Akshat


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

.wpcf7-form.sent p
{
    display:none;
}
like image 42
Bibisha Jacob Avatar answered Oct 21 '22 17:10

Bibisha Jacob