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
You need to have a shrank field on your form to utilize the Form Columns feature. 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.
Related guide: 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.
NOTE: The ENABLE FORM COLUMNS option will only be displayed on the FORM LAYOUT section if you have at least 1 shrank field.
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:
🔘 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, 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.
LEFT ALIGNED LABEL (takes more space / width):
TOP ALIGNED LABEL (takes less space / width):
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.