[Solved] How to hide the success message from Contact Form 7

I like using Contact Form 7. I like the control I get when creating my forms. I like being able to structure the outgoing mail and the myriad of extensions.

I like the automation of success and error messages. I also hate (formerly) the success and error messages. They were always pushing the rest of my content around and breaking my layouts.  I had to leave extra space around the form so the content wouldn’t break.

I fixed some of the problems by adding a couple of statements to my stylesheet:
.wpcf7-form{position: relative;}
.wpcf7-response-output {margin:0 !important; bottom:0 !important; position: absolute;}

This made the error and success messages lay on top of the page content rather than pushing it around. Then the problem was, the success message just camped there on top of my other content — until I learned how to make it fade out.

The Solution

In the “Additional Settings” box, at the very bottom of the dashboard when you’re editing a form, add this in one line. (I added the ↵ to signify a forced wrap. Take that out.)

on_sent_ok: "$('.wpcf7-mail-sent-ok').ajaxComplete(function() ↵ {$(this).delay(1000).fadeOut('slow');});"

It should look like this:

hide-success-contact-form-7The javascript does this: When the message was sent OK, it waits until the success message is created (ajaxComplete) then waits for 1 second (delay(1000)) then fades the success message out slow.

Now, the success message does its thing then fades once its been read and I like Contact Form 7 even more!

Web Design, Development and Consulting
WordPress Themes, Plugins and Custom Coding

More posts by
Follow the author on Facebook  |   |  Twitter