Overview #

When creating two-column forms, users often report two common issues:

1. TAB Key Navigation – Pressing the TAB key does not always move to the field on the right but instead moves downward.
2. Mobile Field Order – On smaller devices, two-column forms collapse into a single column, and fields sometimes appear out of order.

This documentation explains why these issues occur and how you can set up your form so that both desktop and mobile views work smoothly.

TAB Key Navigation in Two-Column Forms #

By default, the TAB key follows the order in which fields were added to the form—not the visual column layout.

Behavior Example #

• Two fields per row → TAB moves left → right, then goes to the next row.
• More than two fields per row → TAB completes all fields in the first column, then moves to the next column.

Best Practice #

• Use two fields per row to ensure smooth navigation: left → right → next row.

Mobile Field Order #

On mobile devices, two-column forms automatically convert into a single column. This means fields that are side by side on desktop will appear stacked vertically on mobile.

Why this happens #

• Mobile devices use a single-column layout for readability.
• The order of fields follows the top-to-bottom sequence in which they were added in the form builder, not the visual column layout.

Best Practice #

• Add fields in the top-to-bottom order you want them to appear on mobile.
• Use columns only for design, not for field order.
• Preview on mobile to make sure the fields look correct.

This way, mobile users will see the fields in a logical order that is easy to follow.