On this page
Unleash your genius.
Get genius ideas, actionable tips, and smart solutions in your inbox once a month.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Blog

Here to Help: Building Multi-Column Online Forms

Jessica Haas
December 7, 2016
|
Min Read

"Here to Help" is a support column written especially for Formstack's awesome, loyal customers.

The appearance of your online form can make or break its performance. And I’m not just talking about the fancy online form design elements like fonts, colors, and images. I’m talking about the overall structure of your form fields.Did you know that you can tweak your form layout by adding up to four columns? It’s true! Organizing fields into multiple columns can help you condense your form and streamline its overall appearance for a better user experience.By default, Formstack online forms are one column. But it’s super easy to change that! Just follow the brief steps below to create an online form with a multi-column layout:

Step 1: Set Number of Columns

To select the number of columns you want your online form to have, go into your form and take the following actions:

  1. Scroll to Form Extras on the left side of the builder.
  2. Locate the Columns area and choose your desired number of columns from the dropdown list.

Note: Your form cannot have more than four columns.

Online Form Columns Options

Step 2: Organize Form Fields Accordingly

Once you’ve set your desired number of columns, you may need to move your form fields around or update them a bit for the best visual outcome. There are two common reasons to reorganize your form fields after setting up columns:

  1. To even things up if a long form field (like an Address field) is used next to a short form field (like an Email Address field)
  2. To stretch one field across multiple columns if you have less fields than columns in an area of your form (or to even things up as described above)

For example, adding columns to your online form might leave you with something that looks like this:

Uneven Online Form Columns

To even things up a bit, you can simply drag and drop the fields until you get a more desirable look:

Even Online Form Columns

You can also stretch fields across columns to improve symmetry. To do this, simply click on the field you want to stretch, find the Column Span dropdown list in the Field Options section of the builder, and select how many columns you want the field to cover.

Online Form Field Column Span

Using the example above, we can stretch the Name and Address fields across our two columns to improve the overall look of our form:

Stretching Online Form Fields Across Columns

Step 3: Add Sections to Vary Number of Columns

If you want to vary the number of columns in your online form (so that, for instance, some fields are organized into two columns by default while others are organized into three columns by default), you can set this up using Sections.When you add a new Section to your form, you will see a Columns area in your Section options on the left side of the builder. Use the Columns dropdown list to set a specific number of columns for that section.

Online Form Section Column Options

Here’s an example of how an online form can look with multiple sections and a multi-column layout:

Online Form Multi-Column Layout

That’s all there is to it! As you can see, Formstack makes it easy for you to design custom online forms. And our Theme Editor offers even more form design capabilities. Click here to learn more.

Blog

Formstack '23 Fall Release: Your Questions Answered

We’ve compiled answers to commonly asked questions during the Fall ‘23 Release webinar.
Read more
Jessica Haas
Jessica is the Director of CX & Professional Services at Formstack and has been with the company since 2012. Most of the time, her brain is consumed by thoughts of service design, customer happiness, and creative solutions. She wants to make a difference for people and hopes to someday become a master of zen.
More Articles