If you’ve ever had two Gravity Forms on the same page of your WordPress website – you’ve probably seen the frustration of not being able to easily navigate the fields with your tab key. There’s a simple fix for that. Kori Ashton will show you in this simple video tutorial.
Video Transcript
Hey, y’all! Welcome to another WordPress Wednesday. My name is Kori Ashton, here at Webtegrity in San Antonio, Texas. You know it, every single week I’m producing some sort of video, just like this, for you to improve your online marketing around the world of WordPress. If you’re running a WordPress website, you also probably know of any of our videos here, I’m a super huge fan of this…Gravity Forms. It is a contact kind of form, drag and drop, builder plugin. It’s amazing and mind-blowing.
If you want to learn more about it, we’ve got a whole playlist over here of videos that we’ve created on how to set up condition logic, how to use it as a job board, how to set up payments with it. All sorts of cool stuff. So, check out this playlist. I’ll put the link to that in the description box below. Let’s get to why you’re watching this video. It probably is because you might have two forms on your single page or post inside your website and you’re trying to get people to be able to easily tab (using their tab option on their keyboard) to tab through the fields. You know that this is best practice. This is also for usability and accessibility. We want people to be able to click in a field and click their tab button and click over to this next field. It’s really, really helpful for people. But, if you’re running two different forms on the same page, you’re going to see the error that just happening right now. As I click here….
Look, check this out. I’ve got two different forms happening on this one page. This form here and then you see the “Submit” button. Then, a line and you see that I’m running a totally separate form. These two forms are on the same page. They’re both Gravity Forms. If I click “Tab” it, unfortunately, takes me all the way down here. It does not take me over to my next field, which would be my last name. So, again, I’m in the first field and I click “Tab” and it takes me all the way down here to my second form and it’s super frustrating.
What is the fix? Is it super complicated? Do you have to write a lot of nerd code? Super easy, y’all. Check out this cool fix. This is all you have to do. You’re gonna go into your form that you’re going to see here, and I’ll let you see the visual side of it. There’s our shortcode for the first form and then our line. The different form starts here and that’s our second form. What we need to do is give this one particular form it’s own tab index identifier. Woo. Sounds cool and it’s pretty simple.
Here’s what we’re going to do. I’m going to delete this for a second and I want to add in that form again. We’re just gonna click “Add Form” and it’s the test for now and I don’t want the title and I don’t need the description; but, here’s the trick…I want you to click this right here that says “Advanced Options”. This tab index, for now, we’re just gonna put number “99” in there.
Just throw that in there for now and this is basically not important. We’re not going to worry about the action. You’re just going to type in the “99” and click “Insert Form”. It’s adding in this extended bit of nerd code here into the shortcode. It’s gonna give this one form its own unique identifier. I’m gonna click “Update”. You don’t have to give the other form one, you can just give it to this one. I’m gonna click “Refresh” over here and now if my field is here and I click “Tab”, I’m simply able to tab through the entire form beautifully and easily. The same thing with that one. That’s it. It’s called “Tab Index”. Check it out, throw it into your Gravity Forms and rock and roll.
I hope y’all are enjoying this and if you are, be sure to subscribe to our YouTube channel. Every week, every Wednesday I’m producing some video just like this. If you need help, you can tweet me over at @koriashton on Twitter or at @WebTegrity on Twitter. If you need anything else, be sure to send us an email. We’d love to be your nerd team support for all things WordPress. See you next week. Bye y’all.
Gravity Forms Playlist – more videos
Find more video tutorials on Kori’s blog
