What the Gravity Forms tab index is and how to use it

Gravity Forms - for your WordPress form needs

You’re so used to it that you may not even realise that when you fill out forms, you can just tab between the fields (hit the tab key and you’re automatically sent to the next field).

Gravity Forms automatically adds tab values to each field so that when you hit the tab key, you are correctly sent to the next field, rather than jumping about the form in a disorderly fashion.

By default, Gravity Forms starts each form with the first field having a tab index of 1. And that’s perfectly normal and works fine. Until you have two forms on the same page.

When you have two forms on the same page, the first field in each is assigned a tab index of 1, and the second fields get a tab index of 2, etc.

So when you complete the first field in the first form and hit tab, you’re taken to the the first field in the second form. Hit tab again and you’re taken back to the second field in the first form. Not exactly the desired behaviour. You want to be able to complete one form uninterrupted. As such, you need to adjust the tab index so that they don’t overlap.

Tab index is an arbitrary number, and the browser will start with the lowest number present on the page. So, to ensure that one form does not interfere with another, you just need to set the tab index of the second form to a number greater than the number of fields in the first form. If the first form has 8 fields, you could use the number 9. Or 10. Or 10,000. Just so long as it’s more than 8.

Bear in mind that if you have forms in your sidebars (maybe a newsletter signup form), that you’ll want to adjust their tab indexes as well.

How to use it

When you add your Gravity Form to your page/post, it inserts a shortcode which will automatically display the form when it is called. All you need to do is add an argument to the shortcode to adjust the tab index. So if your previous form shortcode was:

Then you can just add a tabindex argument to alter the starting tab value of that form, like this:

Adjusting the tab index in a Gravity Forms widgetIf you’re using the Gravity Forms widget to display a form in a sidebar, the advanced options section for the widget has a field for changing the tab index for that form.

And that’s all there is to it. It’s just a usability thing, and stops your users from jumping around the page and getting confused when they’re completing forms.

Get started with Gravity Forms

One thought on “What the Gravity Forms tab index is and how to use it”

  1. Thanks. Just what I was looking for.

Leave a Reply