The Column Layout element lets you arrange form elements side by side. Each column can contain one or more elements, and the layout can stack vertically on smaller screens.
Adding a column layout
Add a Column Layout element to the form, then drag elements into its columns.
Open the Column Layout settings to change the number of columns, their widths, and when they stack on smaller screens.
For a simple two-column layout, use Fixed width and set Number of columns to 2. To make the fields fill their columns, set their Field width to 100%.
Settings
Basic
Column size
Choose how the columns are sized:
- Fixed width gives each column a share of the available width. By default, the columns have equal widths.
- Float lets columns size according to their content, up to their allocated share of the available width. This is useful when arranging narrower fields side by side.
Number of columns
Sets the number of columns, from 1 to 20.
If you reduce the number of columns, elements from the removed columns are moved into the rightmost remaining column.
Customize column widths
Enter a percentage width for each column without the percent sign. For example, enter 30 and 70 for a two-column layout with a narrower first column.
Leave a width empty to use the default equal share. The combined widths must not exceed 100%.
This setting is available for layouts with up to 8 columns.
Responsive columns
Choose the screen width at which the columns should stack vertically:
- Inherit uses the inherited responsive column setting.
- Off keeps the columns side by side.
- Phone portrait (479px) stacks the columns at screen widths of 479px or less.
- Phone landscape (767px) stacks the columns at screen widths of 767px or less.
- Tablet landscape (1024px) stacks the columns at screen widths of 1024px or less.
- Custom… lets you enter your own screen width.
Responsive columns custom
If Responsive columns is set to Custom…, enter the screen width at which the columns should stack, using a CSS unit such as 600px.
Advanced
Unique ID
The unique layout identifier is displayed here. You may need this for advanced usage.
Working with columns
Drag elements between columns to change their position. A column can contain multiple elements, which appear one below another.
Configure labels, field sizes, and other element settings on the individual elements. To show or hide an entire section using conditional logic, place the Column Layout inside a Group and configure the Group’s logic.
After saving the form, check it on both a wide and a narrow screen to confirm that the field widths and stacking behavior work as intended.