WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7 Highlight Fields (NotValidTip) (3 posts)

  1. Marc Fovargues
    Member
    Posted 2 years ago #

    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.

  2. smile-a-byte
    Member
    Posted 2 years ago #

    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

  3. Martin Césare
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic