Hide Contact Form 7 and show message after successful send using DOM Events

https://contactform7.com/dom-events/

but your issue can be related to this
https://contactform7.com/faq/dom-event-doesnt-work/

let me know!

No I already read those articles and they do not help. I have tried what is suggested and the form is not cleared.

I am not a techie and would love it if someone could send me some <script> that works.

Thanks!

Juts to clarify, not being a technie I am not sure what <script> to write to hide the form after submition, and to get/allow the confirm message to be displayed on its own.

I found the below on a search and tried it (remembering to wrap the form shortcode in a div with id=”hideform”) but it does not work. I wish I knew enough php and DOM to make it work.

<?php
add_action( ‘wp_footer’, ‘contact_form_sent’ );

function contact_form_sent() {
?>
<script type=”text/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
document.getElementById(‘hideform’).style.display = ‘none’;
}
}, false );
</script>
<?php
}

all the form with the ID #hideform (so only one for page) on submit will disappear

this what it means

Hi Erik,

Are you saying that this code should work to make the form disappear and shown only the success submit message?

For me, this code does not work as it does not make the form disappear.

no, it will hide everything else inside the #hideform.

to use correctly this code, you must create inside the mail template a <div id="hideform"> that wraps the element you want to hide after submit.

I haven’t tried the code, i’m assuming that is working

I believe Erik means that <div id=”hideform”> must be in the form template, not the mail template.

But I found another way that seems to work better:
Add this to your css file:

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

@mjohnhorning, great solution. Works nicely. Thank you for sharing it.

@mjohnhorning
Hello,
Where did you add that css file?
I tried to add it to my theme CSS and it didn’t work.
Thank you.

@mjohnhorning simply, elegant, really good and more importnat it work.

Thank you very much.

@partopia1 if it didn’t work try: Appearance ? Theme editor ? Style sheet css and… add code.

you can also use the following methods: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

• This reply was modified 2 years, 7 months ago by -EO.