Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

Fix Gravity Form Tabindex Conflicts

Avoid the annoying issue where tabbing from a field in one form tabs you to a field in another form. This is caused by conflicting tab indexes.

Last updated | Written by 49 Comments

  • January 2nd, 2014: Updated to fix tabindex issues with forms added via the Gravity Forms widget.

Stop! This method is no longer recommended.

For accessibility reasons, adjusting the tabindex for Gravity Forms should be avoided. Giving the form priority over other interactive content is detrimental to users that rely on keyboard navigation.

Gravity Forms 2.3 removes the tabindex property by default. Unless a custom tabindex is specified, this fix will no longer be needed.

This is most common when loading a Gravity Form on a page which is loading a non-GF form (like the WordPress comment form). You’re typing away on your Gravity Form and tab to the next field. Awesome. Except the next field is a completely different form. This snippet sets the starting index of your Gravity Form inputs ridiculously high so such conflicts never happen again.

{Gist removed. This article has been deprecated.}

How do I install this snippet?

Easy peasy. Just copy and paste the code above into your theme's functions.php file.

How to I use this functionality?

This snippet is plug-n-play. No changes needed (unless you’re still seeing tabindex conflicts which is highly unlikely). If you are, just update the 1000 in the snippet to a higher number until the conflict disappears.

Comments

  1. Guido Pettinari says

    Hi!

    Nice snippet of code, thanks!

    If there are n>1 Gravity Forms on the same page, it might be useful to assign a different tabindex value to each of them. I achieved this by adding a line to the if block:

    function gform_tabindexer( $tab_index, $form = false ) { $starting_index = 1000; // if you need a higher tabindex, update this number if( $form ) { add_filter( ‘gform_tabindex_’ . $form[‘id’], ‘gform_tabindexer’ ); $starting_index *= min( $form[‘id’], 10 ); } return GFCommon::$tab_index >= $starting_index ? GFCommon::$tab_index : $starting_index; }

    [updated snippet can be found on gist: https://gist.github.com/31b7e1a2d874dc41d4a6%5D

    Cheers, Guido

    Reply

  2. Simon says

    Maybe this is a new feature since you originally posted this article, but I found that adding a tabindex specification to the shorcode worked … like this: [gravityform id="1" tabindex="1000"]

    Reply

    • David Smith says

      Hi Simon, nope. You can set the tabindex from the shortcode since the early days of Gravity Forms. The benefit of this method is that you don’t have to set it on each shortcode. It works automatically for every form. Install and forget about it. :)

  4. Steve says

    Does this snippet also prevent tabbing jumping from one Gravity form to the next?

    (If so, i can’t get it to work).

    Thank you very much! Steve

    Reply

    • David Smith says

      Hi Steve, no, this snippet actually helps with tabbing from one field to the next by avoiding issues where other elements on the page might have a tabindex that breaks the visual sequence of fields.

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.