Better Contact Form 7 Checkboxes & Radio Buttons

Checkboxes and radio buttons are preferred in many forms to show different options available to the users quickly. You can make better checkboxes & radio buttons for your Contact Form 7 (CF7) forms by understanding how to use them and the different types of modifications available.

In this article, we show you how to create better checkboxes & radio buttons for your CF7 forms using the Contact Form 7 Skins Visual Editor.

Checkbox vs. Radio button

When should I use a checkbox?

1. Select zero, one, or more choices
2. Select exactly one choice without providing a default value
3. Select or deselect a single choice

Tip: Even though checkboxes and radio buttons are common, people frequently misuse them. Your forms become easier to understand and use if you follow the rules of checkboxes and radio buttons.

Select zero, one, or more choices

Use a checkbox when you have a list of options where your users can select either none, single, or multiple choices.

For example, a list of dates a person is available, and the users can check all that applies to them.

Select exactly one choice without providing a default value

Starting with version 4.9, Contact Form 7 has made it mandatory to have a default option checked for radio buttons. However, depending on your form, it might not make sense to have a required option – for example, if you want to know if a user selected any of the radio button options.

If this is the case, you might want to use the checkbox tag instead of a radio button. A checkbox does not have a required default value.

To make a checkbox operate in the same way as a radio button you will need to set the exclusive option.

[checkbox checkbox-123 exclusive "Option 1" "Option 2" "Option 3"]

If you set the exclusive option when you check a checkbox in a group, others are unchecked – so it accepts zero or once choice.

For example, below is an example of a radio button field:

Choose an Add-on: [radio radio-001 default:1 "Logic" "Multi" "Plus"]

Now, it has become a checkbox field:

Choose an Add-on: [checkbox checkbox-001 exclusive "Logic" "Multi" "Plus"]

Tip: Using the exclusive option is implemented as a JavaScript gimmick, so it requires JavaScript to be active on your site with no JavaScript Conflicts preventing operation.

Select or deselect a single choice

Use checkboxes when you set a default choice and want to give users the option to deselect the default choice.

Tip: You cannot deselect all radio buttons, but you can deselect all checkboxes.

For example, you can check the box to subscribe to a newsletter via the default option & you can deselect it if you want.

Tip: You can re-create this exact styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. by selecting Sunshine as your CF7 Skins Style.

When should I use a radio button?

Use a radio button when there is a list of two or more options where your user must select exactly one.

Tip: Radio button options are mutually exclusive – which means clicking a radio button deselects any previously clicked radio button.

Starting with version 4.9, Contact Form 7 (CF7) has made it mandatory to have a default option checked for radio buttons

Creating checkboxes and radio buttons

1. In the Skins section of your Contact Form 7 form, go to the Form tab.
2. Select Checkbox (Option) or Radio Button (Option) from the FIELDS (CF7 TAGS) & add it to your form.

3. Click the Edit icon on the form field.

4. In the Checkbox (Option) or Radio Button (Option) panel, enter the necessary details.

5. Use the (+) button to add an extra option & (x) button to remove an option.

6. Once you are satisfied with your changes, click Save Visual.

Tip: This article is about creating better checkboxes & radio buttons using the CF7 Skins Visual Editor.

To learn about creating better checkboxes & radio buttons in the Contact Form 7 tag editor, see Better Contact Form 7 Checkboxes & Radio Buttons (with CF7 Form Editor).

Options for your checkbox and radio button

Default selections

To preselect one checkbox or radio button option in the form, in the Edit panel select the option you want.

Radio Button Default Values

In Contact Form 7 (CF7), it is mandatory to have a default option checked for radio buttons. If a radio button is not selected, a validation error will appear. In other words, it is now required to have a default radio button pre-selected.

The author of CF7, Takayuki Miyoshi, believes a radio button is a required field by default. And he’s not the only one. This follows W3C’s HTML specifications for radio buttons.

You can avoid Contact Form 7 validation errors by always giving radio buttons a default value. You can give a default value to radio buttons by using the default keyword as shown below:

[radio radio-123 default:1 "Option 1" "Option 2" "Option 3"]

Tip: Your existing Contact Form 7 forms may use radio buttons that are not set with a default value. You need to check your existing CF7 forms.

Label first

By default in Contact Form 7, checkboxes and radio buttons are displayed before their label.

Tip: You should add a label that explains each checkbox and radio button to the form user.

To change it so the label is first and the checkbox or radio button is second:
1. Click the Edit icon on the Radio button or Checkbox form field.

2. In the Checkbox (Option) or Radio Button (Option) panel, select the Put a label first, a checkbox last option.

Your checkbox or radio button now looks like this:

Tip: By default, CF7 Skins displays all checkbox and radio buttons in a vertical list.

Making checkbox exclusive

By default for checkboxes, a user can check multiple boxes – as many as they want. If you want only a single option to be chosen from your checkbox list by the form user, select the Make checkboxes exclusive option.

Tip: Adding the Make checkboxes exclusive option means a user can only be select a single date as their choice.