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:
- Select at least three elements on your form with ctrl+click.
- Right-click on one of the highlighted elements.
- Select Shrink from the context menu.
- Open the Form Designer panel.
- Click the Advanced Designer button at the bottom of the Colors or Styles tab.
- Expand the Advanced Designer’s Form Layout section.
- Tick on the Enable Form Columns option.
- Set the Number of Columns.
- 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.
The Enable Form Columns option will only be available if there’s at least one shrunken element on the form.
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.
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.
Absolutely love this! Looks like many of the previous issues were resolved. My only wish is you could customize the number of columns per row.
The advanced Designer ' Enable form Columns' does not show up ...
Shrink columns work but they won't let you stack multiple questions.. it's only one for one paired.
Wow why is it so hard to do easy things. Been here 2 days trying to figure out how to simply mimic elements in a template to add more Sections. the Cmd+c should work better than it currentky does.
Have to agree with other comments, the shrink column feature isn't enough. You need to be able to have multiple columns often.
The lack of support for this feature has me going to another provider, sorry.
Why only 2 columns!! For the price you charge, you would think your team could handle this. Your slogan should be... "Jotform, build forms the way we want you to!"
You really need a lay person answering these questions. Your CSS capabilities don't show any of the text, so that's pointless because you can't find the line you want to edit. You say if one field "just won't budge," to widen the column, BUT YOU DON'T SAY HOW TO WIDEN THE COLUMN. Again and again, I can never find a simple two-second answer to aligning columns in these forms so that they're not all over the place. It drives me crazy.
if you have a multi page form, how do you set it so the form columns apply only to one of the pages?
On my version, there is no enable form columns. Below "Make this form responsive" there is nothing.