JotForm User Guide / How to Create Better Forms /

Setting up Form Columns

Setting up Form Columns

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.

Regular Fields:

Shrank Fields:

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:

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.

Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support:

Send Comment


  • Kim_Sally

    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.

  • christovamccardell

    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.

  • ikyu72

    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.

  • fatcatmedia

    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!"

  • jtribbey

    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.

  • chefscape

    if you have a multi page form, how do you set it so the form columns apply only to one of the pages?

  • rayter76

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