Browse Article by Topicsfield positioning shrink new line columns form columns positioning
- Form Field Positioning
- Pass Value to Another Form with URL Encoding
- How to position fields in JotForm
- Setting up Form Columns
Related Forum Questions
- There is no enable columns option in the designer for my form
- Show checkbox entries in different columns (Google Sheets)
- Form Builder 4.0: Unable to move shrink form fields on the horizontal.
- Multiple Columns on Form
- On my form, the text of the questions looks like I've set it to "shrink" when I haven't
- Random space on third column of form
- How to create 3 columns table in my form?
- How can I use the rows and columns names in my notification emails?
- How do I split my form in two columns for easy navigation?
- Pay Invoice Form
Setting up Form ColumnsAdded: 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.
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.
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.