Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Checkboxes and Radio Buttons

Last Updated: January 10, 2022

Knowledge Base → Forms → Form Building → Field Types → Checkboxes and Radio Buttons

Checkboxes and Radio Buttons are very similar. They both display a list of options which a user can select from. Checkbox fields allow the user to select one or more options and boxes can be checked and unchecked. Radio Buttons fields will allow only one option to be selected. A Radio Button cannot be unchecked.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Checkboxes Radio Buttons

Standard field options

Checkbox and Radio Button fields have the following standard options:
Checkboxes Field OptionsCheckboxes Field Options

  • Field Type
  • Required
  • Field Key
  • CSS Layout Classes
  • Label position
— Premium Feature —
  • Read Only
  • Display format: Images
  • Visibility
  • Conditional logic
  • Dynamic default value

Field-specific options

In addition to the standard field options, Checkbox and Radio Button fields have several field-specific options. Browse the sections below to learn more about the options specific to Checkbox and Radio Button fields.

Add Option

Click this button to add a new option to your field.

Field Options Add Option

Reorder individual checkbox, radio, or dropdown select options by moving the drag and drop icon

Field Options Add Option Reorder

When a duplicate option value is added to the list of options, a popup message is displayed to avoid issues with duplicate option values getting added to a field.

Field Options Add Option Duplicate

Bulk Edit Options

Use the Bulk Edit link to add, edit, or remove a lot of options quickly.

Field Options Bulk Edit
Click the 'Bulk Edit Options' link and type or paste your options into the box that appears. You can also use this option to populate your field choices with a ready-made list of Countries, U.S. States, U.S. State abbreviations, age ranges, levels of satisfaction, importance, or agreement.
Field Options Bulk Edit Options

To bulk edit options with separate values, put the label, followed by a |,  followed by the value.  For example:

Excellent|10
Very Good|8
Fine|5
Not so great|3
Poor|1

Note: you need to check the separate values checkbox, as described below.


— Premium Feature —

Add Other

Allow users to enter free text with an 'Other' option. Click the 'Add Other' box to add this option.
Field Options Add Other

Use separate values

Check this box if you would like to store an entry as a value distinct from the selected value. For example, if your user selects 'black t-shirt', you can store the value as 'black t-shirt $25.00'.Field Options Separate Values
Read more about separate values.

Option Layout

By default, the option layout is set to 'One Column'. If you would like all the options on one line, change option layout to 'Inline Options'.
Field Options Option Layout Alignment

Limit Selections

Insert a number in the Limit Selections box to set a limit on the number of boxes that can be checked in one entry. When the maximum number of boxes are checked, any unchecked boxes will be disabled. No further boxes can be checked until a checked box is unchecked.
Field Options Option Limit Selections

Default values and field icons

Set a dynamic default value in your Checkbox or Radio Button field. If you would like to retrieve a value from an entry see the Get a Value From an Entry page. If you would like to set a default value, see the Default Values page.

Field action icons allows you to duplicate, delete, and/or move a field on the form builder page. See field action icons for more information.

Note: Do not leave the saved value blank on a radio or checkbox option. When the value is blank, it will be checked by default when the form is viewed, and there is no way of knowing if the user selected the option or not.

Field styling

Some checkbox and radio field-specific styling is available in Formidable → Styles → Check box & Radio Fields. You may adjust the styling of your option labels and adjust the default option alignment.
Checkboxes Style

To learn more about styling your form see the visual form styler page.

Add images to Checkboxes or Radios

Learn how to use radio buttons or checkboxes with images.

WordPress Checkboxes Images

See how to replace radio buttons with images in WordPress forms in the blog for an example.

Display options in a grid

If you would like to display your Checkbox or Radio fields in a grid as shown below, see how to create a grid.
CSS Layout Grid
Once you have a grid set up, you may add labels to the grid.

Edit checkbox options

If you would like to modify an individual Checkbox or Radio Button option, see the edit radio/checkbox options section.

Hide option labels

If you would like to hide your Checkbox or Radio Button option labels, see the hide option label section.

Include a link to agree to terms

Do you have an existing terms and conditions page on your site that you would like to link to and require agreement from within your form?

  1. Add a checkbox field to your form
  2. Add a new option that looks like this:
    I agree to the <a href="URL_of_your_terms.com" target="_blank">user agreement terms</a>.
  3. In the field settings, mark the field required and set the label position to "none".
  4. Select the "save separate values" option and change the saved value to something without HTML for best results ie "I agree".
    Checkboxes Agree to Terms

If you would prefer to include the terms within the form, read more about how to create a terms and conditions field.

Display Checkbox and Radio fields

Display the value submitted in a Checkbox or Radio Button field in a form's confirmation message, email, or View.

  • Display submitted options: Display the value submitted in a Checkbox or Radio Button field.
    [x]

    Replace x with the ID or key of the Checkbox or Radio Button field.

  • Display saved value: If using separate values and you would like to display the Saved Value use show="value":
    [x show="value"]

    Replace x with the ID or key of the Checkbox or Radio Button field.

  • Separator: Use a different separator for Checkbox field values. By default, this will be a comma.
    [x sep=", "]

    Replace x with the ID or key of the Checkbox field.

Display unchecked options

To display the unchecked checkbox or radio options in a form's confirmation message, email, or View, you can use conditional statements. The following example will display an option when the checkbox or radio field does NOT contain a specific word or phrase.

[if x not_like="Easy"]Easy[/if x]
[if x not_like="Moderate"]Moderate[/if x]
[if x not_like="Challenging"]Challenging[/if x]

Replace x with the ID or key of the checkbox or radio field. Replace Easy, Moderate, Challenging with the field options. If field x does NOT contain the checkbox or radio option, then the content between the opening and closing If statements will be displayed.

Related customizations

Display text in between options

If you would like to display text in between checkbox or radio options, follow the steps below.

  1. Go to your Form Settings → Customize HTML tab.
  2. Find the box for your checkbox button or radio field.
  3. Look for the [input] shortcode in the HTML code.
    WordPress Checkboxes Images Text in between options
  4. Change [input] until you have separated each option in the field. Then you can add any text you would like between the options.
    [input opt=1]
    [input opt=2]
    [input opt=3]
    ...

Display values checked in a View

Replace the field ID of your checkbox field in the view you are using with:

<div>
☑-[x sep="</div><div>☑-"]
</div>

Where x is the field ID of your checkbox field.

Display values checked in columns

In the example below, you'll be displaying the values checked in three columns by adding a class and some CSS styling.

In the View Content box, add the following:

<div class="frm-three-columns">[100 sep="<br>"]</div>

Replace 100 with the ID or key of the Checkbox field.

In the Formidable → Styles → Custom CSS, add the following:

.frm-three-columns {
  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3; /* Firefox */
  columns: 100px 3;
}

Display checkbox items in a list

Use the example below to display values checked in a bulleted list.

<ul>
<li>[100 sep="</li><li>"]</li>
</ul>

To display the values checked in a numbered list, use this instead.

<ol>
<li>[100 sep="</li><li>"]</li>
</ol>

Replace 100 with the ID or key of the Checkbox field.

Related developer hooks

  • Dynamically populate checkbox fields with the frm_setup_new_fields_vars hook.
  • Remove used options with the frm_setup_new_fields_vars hook.
  • Order field options with the frm_setup_new_fields_vars hook.
  • Add user list to checkboxes or radio buttons with the frm_setup_new_fields_vars hook.
  • Create a new set of preset Bulk Edit options with the frm_bulk_field_choices hook.
  • Require a minimum number of checked values with the frm_validate_field_entry hook.
  • Standard field options
  • Field-specific options
    • Add Option
    • Bulk Edit Options
    • Add Other
    • Use separate values
    • Option Layout
    • Limit Selections
  • Default values and field icons
  • Field styling
  • Add images to Checkboxes or Radios
  • Display options in a grid
  • Edit checkbox options
  • Hide option labels
  • Include a link to agree to terms
  • Display Checkbox and Radio fields
    • Display unchecked options
  • Related customizations
    • Display text in between options
    • Display values checked in a View
    • Display values checked in columns
    • Display checkbox items in a list
  • Related developer hooks
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form. Maybe you need to log in?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews