Tabindex: how to fix when you’ve got two Gravity Forms

I’m a big fan of Gravity Forms, here’s a little trick I discovered when you’re using two forms on the one page.

It may be a small thing but from a user’s perspective, it’s pain when forms don’t work like they expect.

Most people expect to be able to hit the tab key when in a form to be able to jump to the next field. Gravity Forms handles this for you when you have one form but when you have two forms, there’s a little trick.

When placing the forms in your page or post, add the tabindex attribute to the form short code of the second form.

 tabindex=32

It can go anywhere along the short code as long as it’s after the gravityform code name, easiest is just place it at the end like this.

gravityform id="1" name="Foo Bar" tabindex=32

As for the number, 32 just make it a number bigger than the number of fields you’ve got in your first form and you’re done.

Comments

  1. Cheers for this, this was driving me mad!

  2. Just what i’ve been looking for. Thanks!

  3. Awesome! This was bugging me and what a quick fix. Just what I needed… gracias senor.

  4. thanks. It saved my time.

  5. Very nice trick! I was wondering how to solve it and i found your article.
    Cheers!

  6. Sandhya says:

    Thank You so much!!!!!!!

  7. What about if I’m not using the short code way? I’m using the forms through a widget.

    • When using the widget, there is some options in the widget, I think from memory, it’s ‘advanced’ or something like that in the widget. Click that and then put a tabindex of 100 in there – that should fix it.

  8. Thanks! This is an annoying bug.

Trackbacks

  1. [...] any more tab conflicts between forms in the main content area and my sidebar widget.** Props go to Shilling Blog for the solutionRelated posts:Quick Fix: Disqus Comment System Shows No Comment CountEasiest Way to [...]

Speak Your Mind

*