Quick Fix: Gravity Forms Multiple Forms Tabindex Conflict

Gravity Forms

I love using Gravity Forms. It’s a great plugin and is well worth the money. I used to use cForms II, which is also a great plugin, but not as polished as G-Forms.

The Tabindex Issue

Today I ran into an issue with multiple Gravity forms on one page. I had a newsletter sign up widget in the sidebar and a contact form within the page content. When a user would start filling out the contact form and use the tab key to jump to the next form field it would incorrectly jump over to the sidebar widget. This isn’t always easy to catch if you’re not doing in depth QA, but the fix is pretty easy.

The Fix

When you are inserting a form into your page add the “tabindex” attribute to your form shortcode. Specify a number that’s higher than the number of fields on the second form and you should be good to go.

Standard shortcode:

Oops! We could not locate your form.

I figured, rather than adding this attribute to ALL my forms I would rather just add it to my sidebar widget form. This way I wouldn’t have to worry about adding this tabindex attribute to all new forms I add to my content. I’m not using the Gravity Forms widget to insert the form but rather the do_shortcode function.

Do_shortcode Function:

After adding the tabindex attribute to my shortcode I didn’t have any more tab conflicts between forms in the main content area and my sidebar widget.

** Props go to Shilling Blog for the solution