https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it Gravity Support Forums Topic: Highlighting the active field in the form, similar to how Wufoo does it en-US Sun, 19 Apr 2026 20:27:17 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it#post-71224 Wed, 15 Aug 2012 19:25:44 +0000 Rob Harrell 71224@https://legacy.forums.gravityhelp.com/ <p>Right on man, looks good. </p> https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it#post-71223 Wed, 15 Aug 2012 19:15:20 +0000 gluethje 71223@https://legacy.forums.gravityhelp.com/ <p>Went with CSS3 animations for now. See it in action here:<br /> <a href="http://caferoka.com/dev/contact/" rel="nofollow">http://caferoka.com/dev/contact/</a> </p> https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it#post-71162 Wed, 15 Aug 2012 13:11:28 +0000 gluethje 71162@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>OK, after some playing around I figured it out:</p> <pre><code>$(&quot;input&quot;).focus(function() { $(this).closest(&quot;li&quot;).addClass(&quot;curFocus&quot;) }); $(&quot;input&quot;).blur(function() { $(this).closest(&quot;li&quot;).removeClass(&quot;curFocus&quot;) });</code></pre> <p>Now I need to do some CSS formatting and figure out how to get the backgrounds to fade in. </p> https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it#post-71158 Wed, 15 Aug 2012 12:23:07 +0000 Rob Harrell 71158@https://legacy.forums.gravityhelp.com/ <p>This jQuery snippet worked for me: <a href="http://pastie.org/4494466" rel="nofollow">http://pastie.org/4494466</a></p> <p>You can just change the IDs of the inputs and fields accordingly and just chain them together with commas. </p> https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it#post-71156 Wed, 15 Aug 2012 12:08:38 +0000 gluethje 71156@https://legacy.forums.gravityhelp.com/ <p>As usual, I found an answer on CSS Tricks:<br /> <a href="http://css-tricks.com/improved-current-field-highlighting-in-forms/" rel="nofollow">http://css-tricks.com/improved-current-field-highlighting-in-forms/</a></p> <p>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 &gt; div &gt; span &gt; input. I want to able to highlight the li.</p> <p>I guess it's time to get a little better with my jQuery... </p> https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it#post-71154 Wed, 15 Aug 2012 11:56:02 +0000 gluethje 71154@https://legacy.forums.gravityhelp.com/ <p>Here's a link to the form: <a href="http://caferoka.com/dev/contact/" rel="nofollow">http://caferoka.com/dev/contact/</a></p> <p>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.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it#post-71061 Tue, 14 Aug 2012 16:34:45 +0000 Rob Harrell 71061@https://legacy.forums.gravityhelp.com/ <p>This can be done with some CSS - do you have a link to your form? </p> https://legacy.forums.gravityhelp.com/topic/highlighting-the-active-field-in-the-form-similar-to-how-wufoo-does-it#post-71058 Tue, 14 Aug 2012 16:17:00 +0000 gluethje 71058@https://legacy.forums.gravityhelp.com/ <p>I would love to duplicate the highlighting that Wufoo does with the active/focused form fields. See this example:</p> <p><a href="http://caferoka.com/contact.html" rel="nofollow">http://caferoka.com/contact.html</a></p> <p>Does this exist in Gravity forms, has anyone done it, or would it be hard to implement? Thanks! </p>