In order to create responsive Forms, it is best practice to use a combo of view layouts and wrap settings rather than column layouts. This article is going to guide you through creating a best-practice version of a form, which is responsive across all devices and screen sizes.
To begin with, you'll need to:
Drag in your Empty form from the Palette > Components > Form
Then you'll need to drag in your view layouts to build out your desired structure
(ensuring parent view layouts are set to Wrap and child view layouts are set to Grow if possible/Stretch - more on this further down...)
Drag and drop your form inputs into the correct view layouts
Customize the copy of the form input label and placeholder
Adjust settings in the Toolbar > Components
Ensure you're happy with the margins/padding and you're ready to launch!
With the first two rows of questions, you'll want to have:
A parent view layout set to Row content direction and set to Wrap (see screenshot below):
Two child view layouts inside the parent view layout set to Grow if possible and the form inputs set to Stretch horizontal alignment:
With the final two rows of questions, you'll want one view layout with the form input added in and set the child view layout behavior to Grow if possible:
With our final version of the form, you can see that in the desktop view, the content sits nicely next to each other. You get the same experience in tablet view, just slightly condensed, and then on mobile view, the content stacks neatly on top of each other:
ℹ️ Watch this 4-minute video guiding you through creating a responsive form.
Still need help? Reach out to our customer success team who will be happy to help ✨