Setting Up Form Columns

Aside from custom CSS, the Form Builder has built-in features that can help you create multi-column forms. This guide shows the options you can use when dealing with form columns.

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. 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 colums.
   Note: This option will only be available if there’s at least one shrunken element on your form.
8. Enter your desired number of columns.
9. Once you’re done, 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. 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.