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

Question

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

Answer 1

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

Answer 2

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