Setting Up Form Columns

Multi-column forms are ideal for longer forms that might be overwhelming in a single-column layout. By breaking up the form into multiple columns, users can easily navigate and complete it with ease. Aside from custom CSS, the Form Builder has built-in features that allow you to create multi-column forms.

Shrinking Form Fields

By default, each field you add occupies a row on your form. Shrinking allows you to display at least two form fields in a row. To shrink a field:

1. In Form Builder, select your form element’s Gear icon to open its properties.

1. In the properties panel on the right, go to the Advanced tab at the top.
2. Toggle Shrink to On.

Setting Up Three or More Columns

To display your form fields in three or more columns:

1. In Form Builder, select at least three elements on your form with Ctrl+Click or Command+Click.
2. Right-click on one of the highlighted elements.
3. Select Shrink from the Context menu.

4. On the upper right side of the page, click on the Paint roller icon.

5. In the Form Designer panel on the right, click on Advanced Designer at the bottom.

6. In Advanced Designer, select Form Layout on the right.
7. Check the Enable form columns box. 

8. Enter your desired number of columns.
9. After completing your changes, click on the Diskette icon in the upper-left corner to save.

Moving a Shrunken Field to a New Line

Suppose you have a three-column form and you need to display only two fields in a specific row instead of three; you can use the Move to a new line option. To move a shrunken field to a new line:

1. In Form Builder, click on your form element’s Gear icon to open its properties.

2. In the properties panel on the right, go to the Advanced tab at the top.
3. Toggle Move to a new line option to On.

Here are a few more things to consider when setting up form columns:

• Form width– Ensure that your form’s width is wide enough to accommodate the columns.
• Field width– If you need to create a two-column form and one field just won’t budge, you might want to try reducing its width. Due to the responsive nature of the form, a relatively long field would occupy too much space for the other field to be rendered right beside it.
• Field label position– A field with a left-aligned label will be wider than a field with a top-aligned label.