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
- Why does my image on the form shrink in preview and live form
- Image Radio Button Widget - Enforce & Center-Align 2 Columns
- How can I position two fields into the same line?
- How to change form formatting only for mobile devices?
- Alighnment & spacing
- How to create columns on my form?
- Otimizar os espaços
- Is there a way to combine form data from two or more columns in Google Spreadsheet?
- How can I divide a form into 2 separate columns?
- How can I shrink fields in JotForm 4?
Setting up Form ColumnsLast Update: April 20, 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: 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.