Set Tabindex

Summary

Having an issue where pressing tab on your keyboard brings your user to another form on your page? That is because Gravity Forms assumes its tabindex values, and you can overlap them. You need to change the tabindex on your forms to work as expected.

Note: For accessibility reasons, you shouldn’t set the tabindex. For more information about accessibility, refer to this article.

Embed Code

In your embed code in Gravity Forms, you can set the initial tabindex value of the first field. Gravity Forms will then auto-increment the value from that starting number.

 [gravityform id="1" title="false" description="false" tabindex="10"]

Using this code, you can expect the first form element to be later in the tab order. If you have used tabindex one through nine, then the first element would be the tenth tab selection.

Widget

Forms that are in widgets have a control option for tabindex. Change the number based on where you want it to appear in order. If you change it to a number higher than the number of fields on any other form, then it you will notice that it will only tab over to your widget based form after all other form fields.

Code

We have a filter called gform_tabindex that allows you to set the tabindex of all forms or a single form using PHP.

 add_filter( 'gform_tabindex', 'change_tabindex' , 10, 2 );
 function change_tabindex( $tabindex, $form ) {
 return 10;
 }

This is similar to the embed code version, except it would set all forms to have a starting tabindex of ten.