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 the Form Builder, select your form element’s gear icon to open properties.
2. In the properties panel on the right, go to Advanced at the top.
3. Turn on Shrink.

You can also highlight multiple elements on your form and select Shrink from the context menu.

Setting Up Three or More Columns

To display your form fields in three or more columns

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

4. Select the paint-roller icon in the upper-right corner to open the Form Designer.
5. In the Form Designer panel on the right, select Advanced Designer at the bottom.

6. In Advanced Designer, select Form Layout on the right.
7. Turn on Enable form columns. Note that this option is available only if there’s at least one shrunken element on your form.
8. Enter your desired number of columns.
9. Once finished, select the diskette icon in the upper-left corner to save your changes.

To return to the Form Builder, select the Jotform logo in the upper-left corner.

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 the Form Builder, select your form element’s gear icon to open properties.
2. In the properties panel on the right, go to Advanced at the top.
3. Turn on Move to a new line.

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.