Support » Plugins » Hacks » Contact Form 7 Highlight Fields (NotValidTip)

  • My changes allow for highlighting fields rather than overlaying error messages for inputs.

    Change:

    $.fn.wpcf7NotValidTip = function(message) {
    		return this.each(function() {
    			var into = $(this);
    			into.append('<span class="wpcf7-not-valid-tip">' + message + '</span>');
    			$('span.wpcf7-not-valid-tip').mouseover(function() {
    				$(this).fadeOut('fast');
    			});
    			into.find(':input').mouseover(function() {
    				into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
    			});
    			into.find(':input').focus(function() {
    				into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
    			});
    		});
    	};

    To:

    $.fn.wpcf7NotValidTip = function(message) {
    		return this.each(function() {
    			var into = $(this);
    
    			$theParent = into.parent("span");
    			$parentInp = $theParent.parent("input");
    
    			into.find(':input').css('border-color', '#ff0000');
    
    			into.find(':input').mouseover(function() {
    				into.find(':input').css('border-color','#cccccc');
    			});
    			into.find(':input').focus(function() {
    				into.find(':input').css('border-color','#cccccc');
    			});
    		});
    	};

    Now when a field is validated the input border changes colour (error red) which you can change easily for your own use. Let me know if it works for you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • For me this works great !! Thx for this very tiny and beautiful snippet.

    Short question, did you know a way to use this snippet instead of editting the style.js, so this will stay after updating the plugin?

    greatz

    Hi! smile-a-byte makes a good point there.

    Is there a way of editing our theme’s function.php so that this hack stays after plugin updates?

    Martin!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Contact Form 7 Highlight Fields (NotValidTip)’ is closed to new replies.