Are you on the hunt for a form field that lets your visitors pick one or more options featuring the square boxes display? If so, your quest ends here, because Ninja Forms has you covered with a Checkbox List as demonstrated below:
If you are looking for the terms and conditions checkboxes instead of checkbox list, head over to our guide on Single Checkbox field. Now let’s take a look at the Checkbox List field!
While we will cover the basics such as how to add a checkbox list to your WordPress form, we’ll also show you when to use it and how to place checkbox list options in a two-column layout.
Additionally, we’ll show you a trick to restrict the number of checkboxes that can be selected using the Condiitonal Logic add-on. Let’s begin!
Table of contents
- How to add a Checkbox List to WordPress
- When to use a Multi-Select Checkbox field in your form
- How to place Checkbox List options in two column layout
- Restrict the number of checkboxes that can be selected
1. How to add a Checkbox List to WordPress form
In contrast to certain other WordPress form builders out there, Ninja Forms gives you full access to all existing form fields including the Checkbox List field. This grants you the freedom to fully enjoy your WordPress form project and make the most of your overall form-building experience!
If you want to add a Checkbox List to your form, you’ll find it under the Common Fields. With our contact form plugin, you have the flexibility to either drag and drop the Checklist box field directly onto your form or simply click on it, and it will automatically show up on your form.
Once you add a Checkbox List field to your form, you’ll discover a range of settings this form field provides. If you don’t have a developer mode enabled, you won’t be able to see all the existing features. But don’t worry you can unlock it for free!
To learn more about each Checkbox List setting, visit our documentation page. Now that you know how to add a Checkbox List field to your form, let’s look at when to use a Multi-Select Checkbox List, along with the essential rules for adding it to your form.
2. When to use a Multi-Select Checkbox field in your form
Unlike a Radio List field, a Checkbox list, or, in other words, a Checklist, is a square box that allows users to select multple choices from the predefined list of tickable checkboxes. It can be selected and unselected, to minimize the likelihood of selection errors.
You should use a checkbox list if you have a small to medium number of list options that you want to display all at once, and you want the form visitor to select one or more options However, if you have many optios, it is best to choose the Dropdown List with Multi-selection instead.
A very common ways to use a multi-select Checkbox List in WordPress is if you are a school where students are selecting what extracurricular activities they want to sign up for after school. Another example is if you have a job application form and potential recruiters for the job can select the list of skills they have for the job.
When using the Checkbox List field on your form, it’s essential to adhere to basic practices for your list options. Consistency is key, so be deliberate in choosing whether to use single words, phrases, or complete sentences for your Checkbox List options.
When crafting your list options, determine whether you’ll conclude with a period, especially if you’re using sentences and phrases. Lastly, adhere to the rule of capitalization—decide on the case for your list options and the label of your Checkbox List field.
3. How to place Checkbox List options in two column layout
Let us start first with saying you don’t need any styling plugin. That’s right! With a simple trick in the form of helper classess, you can add some extra styles to your forms like columns and show Checkbox List options in two-column layout just like shown below:
To display the Checklist field in two columns, first add the Checkbox List field to your WordPress form.
Please note, you can add as many list options as you like, but the more options you’ll add to your list, it will alter the responsive design of your list options, especially when displaying on a mobile device.
Navigate to Display > Custom Class Names Container, add two-col-list to this field and save your modifications.
That’s it. Your Checkbox List will now show list options in two columns. If you would like your Checkbox List formatted into columns, you can use the following rules:
- two-col-list
- three-col-list
- four-col-list
- five-col-list
- six-col-list
Please note, if you don’t see the Custom Class Names setting, enable the Dev Mode. This will allow advanced options to appear within your form.Congrats on learning how to place your checkbox list options horizontally in your forms!
If you’re interested in further customizing the appearance of your Checkbox List field or planning to alter the overall style of your form, you can effortlessly achieve this by using the Layout & Styles add-on.
Want to learn more about our styling plugin? Check these favorite Ninja Forms tutorials for styling your WordPress forms!
4. Restrict the number of checkboxes that can be selected
What if you have 10 items in your Checkbox List but you only want your users to be able to select a maximum limit of 4 items? The good news is, you can easily restrict the number of checkboxes that can be selected using the Conditional Logic add-on from Ninja Forms. Let’s look at how we can accomplish this step-by-step!
Step 1: Add a Checkbox List and set the Calc Value
Add a Checkbox List with 10 list options to our form and add the number 1 to the Calc Value of each list option.
Step 2: Create a calculation from the Checkbox List
Step 3: Add a Hidden field to your form
Step 4: Set up trigger conditions with the conditional logic
Lastly, head over to the Advanced tab > Conditional Logic and click Add New Condition. Here you can select the Hidden field wich presents the Checkbox List calculation. We selected trigger condition to Greater than 4, as we don’t want to allow users to select more than 4 options from the checklist.
Another step you want to take is select Submit button field and set the condition to hide field. This will prevent users from submitting the form if they select more than 4 checkbox options.
You can also display a message about the maximum number allowed for the checkbox selection using the HTML field when user selects more than 4 options from the Checklist.
Here is a virtual high five for mastering the Checkbox field! 🖐🏼
You’ve just learned how to create a multi-select checkbox list in WordPress. Well done! What do you say about learning more about field types and exploring some of the most popular WordPress form fields?
If we got your attention, check the following guides below and get inspired for your next form-building project with Ninja Forms!
- How to Add a Radio Button in WordPress
- Add Image Choices in WordPress Forms
- How to Use a Single Checkbox Field in WordPress
- 5 Ways to Use an HTML Field in Your WordPress Form
- Dropdown Select Field in WordPress Forms (Quick Guide)
- 5 Ways to Use a Single Line Text Field in WordPress
- How to Add a Multi-Select Dropdown Field in WordPress
- How to Add a Call-To-Action Button in WordPress
- How to Create a Date Time Picker Field in WordPress
Just stepping into the form-building business? Download Ninja Forms free core plugin and unlock a range of complimentary features our users love. Take our contact form plugin for a test drive and discover why it is amongs the best free WordPress form plugins on the market!
