PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Highlight entire form field, including label on focus

  1. Is it possible to highlight the entire form field and label on focus, similar to a lot of other form systems out there, like Wufoo? See this example: http://caferoka.com/contact.html

    I think this is a very useful feature from a user experience perspective, and I wish it was part of this plugin...or maybe it is, and I'm just missing it? Thanks for looking!

    Posted 9 years ago on Monday November 7, 2011 | Permalink
  2. Hi gluethje,

    Here is a very basic version of this functionality:

    http://pastie.org/2827349

    You would paste this in your theme's functions.php file and update the ".gfield.focus { background-color: #f7f7f7; }" style to your preference.

    Posted 9 years ago on Monday November 7, 2011 | Permalink
  3. waldhorn
    Member

    Important note: David's code snippet works except on radio buttons and check boxes within webkit (Safari and Chrome). jQuery focusin or focusout exhibit the same problem.

    It seems that we need to detect clicks in addition to David's solution of detecting focus and blur. My, albeit crude, solution is to enter the following code below David's snippet:

    $("input").click(function () {
    	$(".gfield").removeClass("focus");
    	$(this).parents(".gfield").addClass("focus");
    });
    Posted 9 years ago on Saturday January 14, 2012 | Permalink