[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

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

  • Hi! Thanks for the tip! Is it possible to do the same thing for when the user has filled out the form incorrectly? So that the error message pops up and then fades out/disappear.

    • Hi Lars,
      I didn’t test it, but I would try this instead:

      $('.wpcf7-response-output').ajaxComplete(function(){this.delay(1000).fadeOut('slow');});

      This doesn’t ask if the form was sent ok, it just says — make the ‘.wpcf7-response-output’ box fade whether the form was sent or not.

  • I have done the above but think I may have updated the styles.css wrong. I have updated it by literally adding:
    .wpcf7-form{position: relative;}
    .wpcf7-response-output {margin:0 !important; position: absolute;}

    It does not seem to have had an effect on the position of the message. Do I need to remove the . at the beginning or put the line in a specific place. I am a newbie to CSS :-) Also this is in the contact form 7 CSS .
    caroline recently posted..Social Media and SEO working togetherMy Profile

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CommentLuv badge