Hide form using DOM Events

Solved:

<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
document.getElementById(‘asaphide’).style.display = ‘none’;
}, false );
</script>

I copy and pasted your script into the Additional Settings of my form. It did not hide the contact form after submission. Thoughts?

be sure to wrap your form in:
<div id=”asaphide”>

</div>

@jrtoy
Unfortunately, that did not work for me either. Can you think of why that would happen?

Check the opening and closing apostrophe in the pasted code is correct and not special characters.

this won’t work (copied and pasted from the above code)
document.getElementById(‘asaphide’).style.display = ‘none’;

this will
document.getElementById('asaphide').style.display = 'none';

@lilyput007,
So what is the full code?
Also is it to be posted inside the Additional Settings” ?

Here you go. It doesn’t work if put inside additional settings, so put it in the footer – it works for me.

<script>  
    document.addEventListener( 'wpcf7mailsent', function( event ) {
    document.getElementById('hideform').style.display = 'none';
}, false );

</script>

Other DOM events here
https://contactform7.com/dom-events/

• This reply was modified 6 years, 8 months ago by lilyput007.

Thanks,
Now, im having total CF7 meltdown.
The Form sends the email, but user dont see success, the wheel keeps spinning

Did you change the id ‘hideform’ to the id of your containing div ?

This is my div which contains my form

<div id="hideform" class="form-group-res">

Make sure you have the latest version of contact7. I’m running version 5.0

I havent even used this before I had the problem.
I dont know if its related to having multiple popups with forms or the updates.
And I have gone back to 4.7 as many suggested, yet its broken

I had the same problem and couldn’t update past 4.7 but eventually got it working. If you reverted back to 4.7, have you put the original code back in additional settings and removed the javascript from the footer?

Well, im not a top techie, so im not sure I did anything related to javascript
About the code, the plugin still sends the email very well, its just that its stock on the spinning wheel

You would of needed to put the javascript I posted earlier in your template file or maybe at the end of your contact7 form for it to work.

• This reply was modified 6 years, 8 months ago by lilyput007.

@lilyput007

Thanks for posting this script and instructions. It works well.
The only issue I have is that using the previous method (which doesn’t work due to depreciated functionality mentioned by OP), the success message would still display. The form would fade away, and success message would show.
Using the method you have suggested, the success message also gets hidden after submission.
Is there a way to get around that, and still display a success message?

@lilyput007
Actually, ignore the above message. I realised I can simply hide the “form-container” div instead. This way the form hides, and the message displays.