Setting up Form Columns

Added: March 19, 2017

We understand the frustration behind building forms, where spacing and layout has always been a struggle, when it comes to normal users who have no HTML/CSS background.

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

1. Shrinking a field

What does this mean? It means you're shrinking the width of a field to its bare minimum. By default, each and every field you add in your form eats up the entire width of the form. So, shrinking a field (or fields) would result into having more fields displayed in a single line as opposed to having fields rendered on a line-by-line fashion.

Regular Fields:

Shrank Fields:

Related guide: https://www.jotform.com/help/90-Form-field-positioning

2. Moving a shrank field to a new line

Why would you need to move a shrank field to a new line? Well, suppose you want to create a two-column form - And after shrinking all fields, a line suddenly displayed three or four fields instead of just two, that's the time you would need to move a shrank field to a new line. 

3. Enabling form columns

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.

To set the Shrink and Move to a new line options per field, just click the Gear icon of the selected field > Advanced tab > then scroll down until you see the respective options.

To enable Form Columns, click the Form Designer icon on the right > scroll all the way down to the bottom > then click the Advanced Designer button.

And once the Advanced Designer window loads up, go to the Design tab > expand the Form Layout section > tick Enable Form Columns > then set the number of columns you want.

That's all you need to do to enable Form Columns.


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

1. The entire form width

Ensure that your form's width is wide enough to accommodate the columns.

2. 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, general rule of thumb is if you want two columns, ensure both fields are evenly sized to fit in one line.

3. 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.

Left-aligned label:

Top-aligned label:

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

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


1 Comment...


   
rayter76 (March 24, 2017 at 08:01 PM)

On my version, there is no enable form columns. Below "Make this form responsive" there is nothing.

View Answer


Send Comment