How to Set Up Form Columns

Jotform makes it easy to organize your form by displaying fields side by side in multiple columns. Using form columns can help reduce scrolling, save space, and create a cleaner layout for your form fillers.

Before using columns, you’ll need to shrink the fields you want to display on the same row. You can also choose how many columns to show and control where specific fields start on a new line.

Shrinking Your Form Fields

Before you can create multiple columns, you’ll need to shrink the fields you want to display side by side. Here’s how:

1. In Form Builder, select the element you want to shrink, and then click on the Gear icon.
2. Then, in the menu that opens on the right side of the page, under the Advanced tab, toggle on Shrink, and you’re good to go.

Repeat these steps for any additional fields you want to display in the same row. Once you’re done, you can proceed to enable columns for your form layout.

Enabling Form Columns

Once your fields have been shrunk, you can choose how many columns to display on your form. Here’s how to set it up: 

1. In Form Builder, in the upper-right side of the page, click on the Paint Roller icon.

2. Then, in the Form Designer menu that opens, click on Advanced Designer.

3. Now, in the Advanced Form Designer, in the upper-right side of the page, click on the Paint Roller icon.

4. Next, in the Advanced Designer menu, under the Design tab, click on the Form Layout section to expand.
5. Then, tick the Enable Columns checkbox.

6. Now, click on the Dropdown menu under the Columns section, and select the number of columns you want to use for your form layout and you’re done.

And that’s it! Shrunk form fields will automatically be arranged into the selected number of columns, helping you create a more compact and organized form layout. Here’s how it’ll look:

Move a Field to a New Line

If you’re using multiple columns but want a specific field to start on a new row, you can use the Move to a New Line option. Here’s the quick way to do it:

1. In Form Builder, select the element you want to shrink, and then click on the Gear icon.
2. Then, in the menu that opens on the right side of the page, under the Advanced tab, scroll down and toggle on Move to a New Line and you’re all set.

The selected field will start on a new row, even when form columns are enabled.