Creating Multi-Column Layouts for Multiple Choice and Checkboxes Choices

Updated:

Do you want to display Multiple Choice, Multiple Items, Checkboxes, or Checkbox Items field choices in multiple columns? A multi-column layout can improve the appearance of your form and make it easier for users to navigate.

This tutorial will show you how to configure the Multiple Choice, Multiple Items, Checkboxes, and Checkbox Items fields to display choices in 2-column or 3-column formats.

Multiple column checkbox field

Before you begin this tutorial, make sure WPForms is installed and activated on your WordPress site. Then create a new form or edit an existing one.

Adding a Multiple Selection Field to Your Form

First, add one of the following types of fields to your form:

  • Checkboxes
  • Checkbox Items
  • Multiple Choice
  • Multiple Items

Note: Need help deciding which field to use for your form? Check out our complete guide to choosing the right field in WPForms.

You can click on a field on the left side of the form builder or drag and drop it into the preview area to add it to your form.

Adding a Checkboxes field to a form

Note: The Multiple Choice and Multiple Items field allows users to select only one option at a time. If you’d like to allow users to choose multiple options at a time, we suggest using the Checkboxes or Checkbox Items field instead.

Once you’ve done so, click on the field in the preview area to access its field options. Customize the field however you’d like, and make sure to add all your choices. To speed up this process, you can use the Bulk Add option.

Bulk adding options to a Checkboxes field

Note: Not sure how to set up your field’s options? See our tutorial on customizing field options in WPForms for more guidance.

Selecting a Choice Layout

When you’re happy with your Multiple Choice, Checkboxes, Checkbox Items, or Multiple Items field, click on the Advanced tab in the Field Options panel.

Accessing the advanced field options for a Checkboxes field

Here, look for the Choice Layout dropdown. You can select from the following options:

  • One Column: Displays all choices in a single column. This is the default option.
  • Two Columns: Splits choices as evenly as possible between two columns.
  • Three Columns: Splits choices as evenly as possible between three columns.
  • Inline: Automatically places as many choices as possible in each row.

Selecting a Choice Layout for a Checkboxes field

Here’s an example of how a 2-column Checkboxes field might look on the frontend.

Please enable JavaScript in your browser to complete this form.
Try this Form Demo!
Please select which clubs you're interested in.

And here’s an example of the same Checkboxes field choices in a 3-column layout.

Please enable JavaScript in your browser to complete this form.
Try this Form Demo!
Please select which clubs you're interested in.

To ensure that your forms look great on all devices, the multi-column layouts of the Multiple Choice, Multiple Items, Checkboxes, and Checkbox Items fields automatically revert back to single columns when viewed on mobile devices.

That’s it! You can now create multi-column layouts for the Multiple Choices, Checkboxes, Multiple Items, and Checkbox Items fields in your forms.

Next, do you want to add images to the choices for your fields? Be sure to check out our tutorial on how to add image choices in WPForms.

Still stuck? How can we help?
Last Updated on May 21, 2024

The Best WordPress Drag and Drop Form Builder Plugin

Easy, Fast, and Secure. Join over 6 million website owners who trust WPForms.

Please enable JavaScript in your browser to complete this form.