Setting up Form Columns

We understand the frustration behind building forms. Spacing and layout can especially be a struggle if you don’t have a background in CSS or HTML.

To help with designing a multi-column form, we have deployed some built-in features that will come in handy when dealing with Form Columns.

Shrinking a Field

See also: Side by Side Form Field Positioning

Before you use the Form Columns feature, you need to shrink the fields on your form. What does this mean? It means you need to shrink the width of a field down to the smallest size possible. By default, each and every field you add to your form eats up the entire width of the form. So, shrinking fields would result in more fields displayed in a single line as opposed to having one field per line.

Setting up Three or More Columns

The following example will create a three column form layout:

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. Open the Form Designer panel.
5. Click the Advanced Designer button at the bottom of the Colors or Styles tab.

6. Expand the Advanced Designer’s Form Layout section.
7. Tick on the Enable Form Columns option.
8. Set the Number of Columns.
9. Click on the diskette icon to save the changes.

Without this option, you’d have to manually key in CSS codes to align your forms properly into columns. But now, all you have to do is just tick a checkbox in the Advanced Designer section of the Form Builder.

Moving a Shrunken Field to a New Line

Why would you need to move a shrunken field to a new line? Well, suppose you want to place a pair of fields in a single row – and after shrinking all fields, the row suddenly displayed three or four fields instead of just two, that’s the time you would need to move a shrunken field to a new line. 

Notes

Now, there are a few more factors you need to consider:

• The entire form width – ensure that your form’s width is wide enough to accommodate the columns.
• The field’s width – if you want 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 eat up too much space for the other field to be rendered right beside it. So, a general rule of thumb is if you want two columns, ensure both fields are evenly sized to fit in one line.
• Field label position – a field with a left-aligned label will be wider than a field with a top-aligned label. So keep that in mind too when designing your form.

Here’s a quick example of a form with two columns: https://www.jotform.com/220358719726059

We’d like to hear from you! If you have comments or suggestions, post them below. Questions? Go to our Support Forum so we can help.