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.

Highlighting the active field in the form, similar to how Wufoo does it

  1. I would love to duplicate the highlighting that Wufoo does with the active/focused form fields. See this example:

    http://caferoka.com/contact.html

    Does this exist in Gravity forms, has anyone done it, or would it be hard to implement? Thanks!

    Posted 11 years ago on Tuesday August 14, 2012 | Permalink
  2. This can be done with some CSS - do you have a link to your form?

    Posted 11 years ago on Tuesday August 14, 2012 | Permalink
  3. Here's a link to the form: http://caferoka.com/dev/contact/

    I know I can highlight the fields themselves with :focus. But to get the effect I'm looking for, I need to highlight the entire div/row that contains each field.

    I know this will require some js/jQuery, and I was wondering if anyone had already done something similar. I looked at Wufoo's js and could see the part that did this behavior, but I'm not good enough with scripting to reverse engineer it.

    Posted 11 years ago on Wednesday August 15, 2012 | Permalink
  4. As usual, I found an answer on CSS Tricks:
    http://css-tricks.com/improved-current-field-highlighting-in-forms/

    The only issue is that in his example the input fields are only nested one deep iside of a div, and in GF they are nested several elements deep: li > div > span > input. I want to able to highlight the li.

    I guess it's time to get a little better with my jQuery...

    Posted 11 years ago on Wednesday August 15, 2012 | Permalink
  5. This jQuery snippet worked for me: http://pastie.org/4494466

    You can just change the IDs of the inputs and fields accordingly and just chain them together with commas.

    Posted 11 years ago on Wednesday August 15, 2012 | Permalink
  6. EDIT: saw yours after I posted mine. Thanks for the reply. Looks like we we're going similar routes. I think mine may be more universally useful, since it's not relying in specific field IDs.

    OK, after some playing around I figured it out:

    $("input").focus(function() {
        $(this).closest("li").addClass("curFocus")
    });
    $("input").blur(function() {
        $(this).closest("li").removeClass("curFocus")
    });

    Now I need to do some CSS formatting and figure out how to get the backgrounds to fade in.

    Posted 11 years ago on Wednesday August 15, 2012 | Permalink
  7. Went with CSS3 animations for now. See it in action here:
    http://caferoka.com/dev/contact/

    Posted 11 years ago on Wednesday August 15, 2012 | Permalink
  8. Right on man, looks good.

    Posted 11 years ago on Wednesday August 15, 2012 | Permalink

This topic has been resolved and has been closed to new replies.