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

Updated 19th of June 2015

As users have pointed out below, my original fix doesn’t work anymore.

I didn’t realize it until I re-built my web site and completely reloaded Contact Form 7. I suppose there was some code from the old plugin that was allowing my original fix to work

I have found a solution, though it isn’t as elegant as the original fix.

See the fix below.


 

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');});"

I’m now using this javascript in my site. Here’s a stand alone version:

<script>
(function($) {
$(document).ajaxComplete(function() {
setTimeout(
function()
{
$('.wpcf7-mail-sent-ok').slideUp('slow');
}, 2000);
});
})(jQuery);
</script>

You’ll have to add this script in your theme admin panel, if there’s a place to add scripts, or add it manually to the footer.php file

If this is too complicated, I saw a new plugin in the repository that may be useful but I haven’t tried it:  Contact Form – 7 : Hide Success Message

Enjoy!

View Comments

9 Responses to [Updated] 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.

  • Right Clik

    I was wondering how to cancel the success message after displaying, Thank you so much, now I am loving contact 7 form more!

  • 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 .

  • Hi Caroline,
    I looked at your site and these styles put the error over the comment textarea:
    div.wpcf7-validation-errors {
    bottom: 0 !important;
    position: absolute !important;
    }
    I edited my post to reflect this.

    Thanks,

  • OK, so do I need a different solution in the style sheet. Sorry I am green under the gills on this as you can tell.

Leave a Reply