Hide Contact Form 7 after successful send

In WordPress Contact Form 7 plugin, after form is submited and data is sent successful, visitor gets the message about it bellow the form. Sometimes you may want actual form fields to get hide after sending. Here is pretty easy way how you can do that:

Wrap whole form in new div:

<div id="asaphide">
 
... contact form fields ...
 
</div>

At the bottom of form page in WP admin, enter this into Additional Settings:

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

That’s it.

Here is example how that can look like:

empty contact form 7

form sent hiden fields

Facebooktwittergoogle_plusredditpinterestlinkedinmail

20 comments for “Hide Contact Form 7 after successful send

  1. March 23, 2015 at 7:53 pm

    Hiya
    Thanks for this. Works great. I did it but added a fade as well. You wont see it unfortunately as I took it off because it just sits on the ‘message sent’ and so I have to refresh the browser. Is there any way I can auto refresh back to the form again say after 3 or so seconds?
    Thank you

    • October 26, 2017 at 1:51 am

      i need this!

  2. admin
    March 23, 2015 at 8:44 pm

    Hi Scott,

    That would be neat. I didn’t experimented with that, maybe it could be done with Jquery but I’m not so sure. I will try when I get time, and if someone who read this have an idea it would be glad if we can read it in comments.

  3. April 17, 2015 at 6:37 pm

    Thank you, it worked great! you rule πŸ™‚

  4. Anonymous
    June 6, 2015 at 3:41 am

    Awesome solution – Thanks a lot πŸ™‚

  5. Kamrul
    August 9, 2015 at 7:18 am

    Thanks mate. Exactly what I am looking for. Works like a charm πŸ™‚

  6. Famke
    August 24, 2015 at 7:00 pm

    Sooo this isn’t working for me… neither is anything I have tried so far. Any idea what it could be? I basically copy-pasted your code so I don’t see what the problem could be.

    • admin
      August 26, 2015 at 7:29 pm

      Hi Famke,

      Maybe some plugin is making issue. Can you try deactivate one plugin by one and see if this will work without some of them?

      • Famke
        August 27, 2015 at 8:39 am

        Hi,

        Thanks! I don’t have any other plugins installed though, so I don’t think that could be the problem.

  7. Ann
    September 28, 2015 at 10:59 am

    How do you show/hide more than one div?

    • admin
      September 28, 2015 at 8:08 pm

      Hi Ann. Did you tried to wrap whole content you want to show/hide into one wider div?
      Or if you want to hide/show several div’s that are not one next to another, to give all of them one new ID and place that in on_sent_ok?

  8. Ronald Maier
    September 19, 2016 at 11:14 am

    Hi Friend, nice solution but on issue: After submit should be display send confirm information for short moment. Its possible display non extend with delay?

    regards ron

  9. January 23, 2017 at 6:52 pm

    As you know that contact form 7 provides diffenent action hooks.Here, you can simply use on_sent_ok Javascript action hook.
    Through this hook, you can add a JavaScript code which you want to execute after the form is successfully submitted. You can add code through Additional Settings field at the bottom of the contact form page.

    Please enter the below mentioned code into Additional Settings field

    on_sent_ok: “document.getElementById(‘Enter the id to hide’).style.display = ‘none’;”

  10. March 16, 2017 at 5:00 pm

    Thank you for tutorial, this is was I looking for, instead of created redirect page, it will be good if hide contact form after submit. Thank you very much

  11. Man2K
    April 4, 2017 at 11:58 am

    This used to work for me, but it’s broken with the new CF7 plugin updates. I have tried to convert the code to a DOM event (as suggested in Cf7 documentation) but without success πŸ™

    document.addEventListener( ‘wpcf7submit’, function( event ) {
    getElementById(“asaphide”).style.display = ‘none’;
    }, false );

  12. deejaynamo
    June 1, 2017 at 4:15 pm

    Beautiful. This works on the latest contact form 7 – 4.8

  13. Peter
    November 24, 2017 at 9:35 am

    did you found solution to adjust this script for new Contact Form 7 – otherwise Contact Form 7 plugin is complaining about: “1 configuration error detected ; Deprecated settings are used.”

  14. Teddy
    June 20, 2018 at 10:08 pm

    Agreed – I really need this solution, but functionality has been removed from CF7.

    Can we use DOM to achieve similar results? https://contactform7.com/dom-events/

Leave a Reply

Your email address will not be published. Required fields are marked *