contact-form-7-validation-error-dont-dissapearSince v3.6 of Contact Form 7 the validation errors don’t dissappear when you hover over the error. For many website’s this will not be a problem, but for some it will be. I was one of the persons this was a problem for, so I went and created 3 fixes.

Reason Contact Form 7 validation errors doesn’t dissappear

In version 3.6 Contact Form 7 made an change to the style of the plugin. There no longer use floating style error messages for better accessibility reasons.

Contact Form 7 validation error dissappearing fixes

On to the fixes, I’ve made three fixes available for you to use. Two use the jQuery library and one is a CSS fix.

jQuery fix 1

This code should be placed within you <head> and some <script type=”text/javascript”> tags. This jQuery fix makes sure the CF7 validation error dissappears when the user hovers over the error.

jQuery( ".wpcf7-form-control-wrap" ).hover( function() {
	jQuery( this ).children( ".wpcf7-not-valid-tip" ).css( "display", "none" );
});

 jQuery fix 2

This fix is similar to the previous, only difference is that the validation error dissapears when it’s getting a click of the user.

jQuery( ".wpcf7-form-control-wrap" ).click( function() {
	jQuery( this ).children( ".wpcf7-not-valid-tip" ).css( "display", "none" );
});

CSS fix

Although this fix does not completely hide the validation error like the other fixes, I still like this fix as much as the fixes. This peace of code hides the error when someone hovers over it, and when the person focusses on the input field.

.wpcf7-form-control-wrap:hover .wpcf7-not-valid-tip, .wpcf7-form-control:focus + .wpcf7-not-valid-tip { display:none; }

Jeroen Sormani

I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

Interested in talking about a WordPress project? Get in touch!

Follow me on Twitter

2 thoughts on “Contact Form 7 validation errors don’t dissapear”

Eno Thiemann October 29, 2014 at 3:21 pm

Hey there,

your tip #3 just helped me out a lot, very good indeed! I only improved it by letting it watch the focus of the input field and let it clear the message then, just like this:

`jQuery( “.wpcf7-form-control-wrap input” ).focus( function() {
jQuery( this ).next( “.wpcf7-not-valid-tip” ).css( “display”, “none” );
});

Hope this might help others as well ;).

Best
Eno

Reply
Chris Pink February 7, 2017 at 7:18 pm

I agree, best to remove on focus. I get of all the error flags like this;

jQuery( “.wpcf7 input, .wpcf7 textarea” ).focus( function() {
jQuery( “.wpcf7-response-output, .wpcf7-not-valid-tip” ).hide(‘slow’);
});

Reply

Leave a Reply