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

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

"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
}

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

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

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

Tags:

Wordpress