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