Setting Up Form Columns

June 13, 2024

Multi-column forms are ideal for longer forms that might be overwhelming in a single-column layout. By breaking up the form into multiple columns, users can easily navigate and complete it with ease. Aside from custom CSS, the Form Builder has built-in features that allow you to create multi-column forms.

Youtube Embed Poster: f4dyCN2iy5o

Shrinking Form Fields

By default, each field you add occupies a row on your form. Shrinking allows you to display at least two form fields in a row.

To shrink a field

  1. In the Form Builder, select your form element’s gear icon to open properties.
  2. In the properties panel on the right, go to Advanced at the top.
  3. Turn on Shrink.
Steps to shrink an element in Jotform Form Builder

You can also highlight multiple elements on your form and select Shrink from the context menu.

Setting Up Three or More Columns

To display your form fields in three or more columns

  1. In the Form Builder, select at least three elements on your form with Ctrl+Click.
  2. Right-click on one of the highlighted elements.
  3. Select Shrink from the context menu.
The Shrink option in Jotform Form Builder's context menu
  1. Select the paint-roller icon in the upper-right corner to open the Form Designer.
  2. In the Form Designer panel on the right, select Advanced Designer at the bottom.
Steps to open Advanced Designer
  1. In Advanced Designer, select Form Layout on the right.
  2. Turn on Enable form columns. Note that this option is available only if there’s at least one shrunken element on your form.
  3. Enter your desired number of columns.
  4. Once finished, select the diskette icon in the upper-left corner to save your changes.
Steps to enable form columns

To return to the Form Builder, select the Jotform logo in the upper-left corner.

Moving a Shrunken Field to a New Line

Suppose you have a three-column form and you need to display only two fields in a specific row instead of three, you can use the Move to a new line option.

To move a shrunken field to a new line

  1. In the Form Builder, select your form element’s gear icon to open properties.
  2. In the properties panel on the right, go to Advanced at the top.
  3. Turn on Move to a new line.

Here are a few more things to consider when setting up form columns:

  • Form width. Ensure that your form’s width is wide enough to accommodate the columns.
  • Field width. If you need 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 occupy too much space for the other field to be rendered right beside it.
  • Field label position. A field with a left-aligned label will be wider than a field with a top-aligned label.
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:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Aimann Rasheed - Profile picture
  • Tay Gondek - Profile picture
  • Kim_Sally - Profile picture
  • christovamccardell - Profile picture
  • ikyu72 - Profile picture
  • fatcatmedia - Profile picture
  • jtribbey - Profile picture
  • chefscape - Profile picture
  • rayter76 - Profile picture