When I’m browsing the web and come to a form, I usually move between fields using the “tab” keyboard button.
But I recently ran into an issue when I had two forms on my page. I was using Gravity Forms (affiliate link) and had a form in the sidebar and one within the page content. The gif below shows what happened when I tried tabbing between fields:
You can see the issue. I start with the name field in the sidebar form, but when I click tab, it goes to the name field in the “In Page Form”. And then back to the message field in the “Sidebar Form”.
How can we fix this issue? Luckily, there is an HTML attribute called Tabindex that will fix this…and Gravity Forms (affiliate link) makes it easy to change a form’s tabindex.
What Is Tabindex?
The tabindex attribute specifies the tab order of an element (when the “tab” button is used for navigating).
In other words, it allows you to specify what order different elements should be focused on as you press the tab button while on an HTML page.
In the gif with the two forms, the issue is that both froms have the same tabindex. So, as I tab through the forms on the page, there is a conflict and I am transported between forms.
In basic HTML, the tabindex attribute looks like this:
<a href="http://www.google.com/" tabindex="1">Google</a>
The tabindex attribute starts with 1, and moves up from there. So an element with tabindex 2 will be tabbed to before an element with tabindex 3.
So now that we know about tabindex, how do we fix the tabindex of a form in Gravity Forms?
How To Change Tabindex In Gravity Forms?
Adjusting the tabindex in Gravity Forms is actually incredibly simple.
There are 3 ways to do it:
1. Advanced Settings in “Add Form” Popup
When adding a form to a page or post, you’ve probably used the “Add Form” button.
In the pop-up that appears, where you select the form you want to appear and select a few options, you’ll see a link for advanced options.
When you click it, the screen will look like what you see below:
You’ll then see the Tabindex option, which I’ve highlighted with the pink arrow.
Just enter the Tabindex number for which this form should be tabbed to.
2. Advanced Settings in Gravity Forms Widget
Similarly, you can make this adjustment in the Gravity Forms widget.
The screenshot below shows the advanced options for the widget:
3. Add Tabindex Value in Embed Code
Finally, you can add a Tabindex value using the embed code. As described in the Gravity Forms documentation, your embed code will look like this:
[gravityform id="1" title="false" description="false" tabindex="10"]
The Final Result
So, using the example in the first gif I added, I went through and adjusted the Tabindex of each of the forms so that when I tab, it works correctly.
Below, you’ll see it working correctly:
Hope this helps you as you build forms on you site!