Contact form 7 gives the error message on submit but when we try to correct contact form 7 validation error don’t disappear. Usually, when someone tries to click back into the form field that has an error, the validation message disappears. The validation boxes stay in place and the user can’t see the form field to fix his error. I’ve had this work automatically on most of the sites.
There are various jquery and css options are available to resolve this type of problem.
jQuery fixes:
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 dissapears when the user focus out of the control.
1 2 3 4 5 6 7 8 | jQuery(document).ready(function() { jQuery('.wpcf7-form').on('focusout','.wpcf7-form-control',function(){ if(jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).length && jQuery(this).val() != ''){ jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).remove(); } }) }) |
2. This jQuery fix makes sure the CF7 validation error dissapears when it’s getting a click of the user.
1 2 3 | jQuery( ".wpcf7-form-control-wrap" ).click( function() { jQuery('.wpcf7-not-valid-tip', this ).hide(); }); |
This is same as focus on input box like :
1 2 3 4 5 6 7 8 9 10 11 12 | jQuery(document).ready(function() { jQuery('.wpcf7-form').on('focus','.wpcf7-form-control',function(){ if(jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).length){ jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).remove(); //or //jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).hide(); //or //jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).css('display','none'); } }) }) |
3. This jQuery fix makes sure the CF7 validation error dissapears when the user hovers over the error.
1 2 3 | jQuery( ".wpcf7-form-control-wrap").hover( function() { jQuery('.wpcf7-not-valid-tip', this ).hide(); }); |
CSS fix
1. This CSS fix does not completely hide the validation error like the jQuery fixes, but this is very simple fix. This peace of code hides the error when someone focusses on the input field.
1 | .wpcf7-form-control:focus + .wpcf7-not-valid-tip { display:none; } |
+ is used here for referring next control of wpcf7-form-control
2. This peace of code hides the error when someone hovers over it
1 | .wpcf7-form-control-wrap:hover .wpcf7-not-valid-tip{ display:none; } |
This is exactly what I need, but i don’t know where to place this unfortunately. I use a child theme. Can you please tell me where i can add this?
Hello Hamid,
You can use either JS or CSS fix but not both. You can write CSS fix into your child theme’s style.css file.
JS solution is quite tricky and and you have to find <head> section in your theme files and put before closing head. Or you can write code in functions.php as per mentioned in the article:
http://www.stevendobbelaere.be/how-to-put-javascript-in-the-footer-in-wordpress/
If you like us to do it for you then mail us to support@fellowtuts.com