Form in content modal not tabbing fields correctly on mobile devices

[Jmot]

Hi,

I have several Gravity Forms in a site that are displayed in a content model activated by clicking specific buttons. The forms all work great and tabbing between the inputs works great until the forms are viewed on a mobile device (i.e. the issue doesn’t appear on a desktop browser that has been reduced in size, only on actual mobile devices). When viewed in a mobile device, using the next and previous (tab) links jumps the cursor all over the screen and causes abrupt movement of the screen itself.

Here are a couple images for reference. In the first one I’ve circled the tab buttons I’m referring to. In the second one you’ll see how I’ve tabbed/navigated to the “last name” input (yellow bottom border) but the blue cursor has jumped down near the “phone” input.

I’m pretty confident it’s not the form itself because in one of the instances I’m using the identical form on 2 different pages, 1 in a modal and 1 embedded in the page – the embedded one works properly.

Here are some URLs for reference, the first 2 are the same form, one in a modal and one embedded.

1. Business Value Form in Modal - http://texbizbuy.wpengine.com/valuations-appraisals/ (click the “GET YOUR FREE VALUATION” button)
2. Business Value Form embedded in page - http://texbizbuy.wpengine.com/ (scroll down to the “What’s Your Business Worth?” area to view the form)
3. VIP Form in Modal - http://texbizbuy.wpengine.com/marketplace/ (scroll down and click the “SIGN UP AS A VIP” button), also on http://texbizbuy.wpengine.com/buy/ (scroll down and click the “SIGN UP AS A VIP” button)
4. Additional Information Modal - http://texbizbuy.wpengine.com/business/engineering-development-company/ (scroll down and click the “VIEW FULL DETAILS” button near the bottom)

If you can take a look at this it will be greatly appreciated.

Thanks,
Josh

[ruenel]

Hello There,

Thanks for writing in! Since you are using two forms in a page, you must set a tab index for each form. This should prevent the cursor from jumping to the other field or form. For further details, please check this documentation:

Set Tabindex - Gravity Forms Documentation

Hope this helps.

[Jmot]

Hi RueNel,

I hope you’re doing well.

Unfortunately, what you proposed is not the solution. I tried pretty hard to explain the scenario in precise detail, and the issue is not having 2 forms on the same page. The issue is how tabbing between fields on a mobile device functions improperly. Please read my initial post again with care—I was very specific with my wording to make clear the issue.

When I mention “tabbing between the inputs” I’m referring to using the Tab key (or the link I circled in the image attachment) to move the focus from 1 input to the next. This is a basic accessibility 101 function with html but I’m mentioning it now just in case there was confusion there.

I also provided an example of the same form used on 2 SEPARATE pages where the one that opens in the modal does not work properly on a mobile device, but the one embedded does work properly. I provided those links to help with troubleshooting as it points to a conflict with the modal and mobile devices, and not just the form and screen size.

So, please, do read the initial description and try again. I appreciate it.

Thank you,
Josh

[christopher]

Hi there,

It seems that the modal responsive functionality interferes with the tab indexing of the form. I tried different scenarios here and this is happening in all cases when the form is in the modal.

I did my best to find out a way to fix the issue on mobile but with no result. As this is an edge case scenario I suggest that you avoid using the modal for the mobile view. You can use the Hide During Breakpoint function to do so.

Try to find an alternative solution for your forms on mobile screen.

Thank you.

[Jmot]

Thank you for the reply Christopher,

Will this be reported as a bug? I do realize it’s an edge-case but it is also undesirable functionality as it means any form in a PRO modal won’t work properly on mobile devices, and I’m sure I’m not the only one wanting to use forms in modals.

I will find another solution in the meantime, though.

[christian]

Hey @Jmot,

The Content Modal element currently has an issue with forms so this might be related. Please stay tuned for updates.

Thanks.