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!
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!
This can be done with some CSS - do you have a link to your form?
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.
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...
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.
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.
Went with CSS3 animations for now. See it in action here:
http://caferoka.com/dev/contact/
Right on man, looks good.