Checkboxes and radio buttons are preferred in many Contact Form 7 forms to show the users their available options. However, you may sometimes be confused about whether to add a checkbox or a radio button for a particular form field.
In this article, we show you the differences between radio buttons and checkboxes and provide general advice on what to use in your form fields.
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.
1. 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, in a list of dates a person may be available, the users can check all that applies to them.
2. 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.
3. 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, your can check the box to subscribe to a newsletter via the default option & users can deselect it if they 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.
Radio button options are mutually exclusive – which means clicking a radio button deselects any previously clicked radio button.
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.
Further Reading
- Creating checkboxes and radio buttons
- Use default values for Contact Form 7 Radio Buttons
- Better Contact Form 7 Checkboxes & Radio Buttons
Have questions or need help?
If you are using the free version of CF7 Skins, you can get help via the CF7 Skins community and also the Contact Form 7 Support forum.
If you are using any of our Add-ons, we provide Premium Email Support to help with your questions and problems.
