Starting with version 4.9, Contact Form 7 (CF7) has made it 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.
Tip: Avoid Contact Form 7 validation errors by always giving radio buttons a default value.
[radio radio-123 default:1 "Option 1" "Option 2" "Option 3"]
Radio Button Default Values
If you add a radio button to your form using the CF7 tag generator, by default, it will mark an option for you.
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.
Avoid CF7 radio button validation errors
If you add your CF7 tags manually (without using the CF7 tag generator), you now need to make sure you always add a default option to all radio buttons.
Similarly if you cut & paste an existing radio button field, you may need to check & add a default option to any CF7 radio buttons. Also your existing Contact Form 7 forms may use radio buttons that are not set with a default value.
Because of this, you may see a CF7 validation error appear when your form is submitted & not understand why this happening.
Defining your own default values
To fix this, set a default value on each of your form’s radio buttons:
Choose a package: [radio cf7s-radio1 default:1 "Free" "Premium" "Plus"]
Tip: Check your existing forms now to ensure all the radio buttons have a default value.
Using checkboxes instead of radio buttons
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 checked or one checked.
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.
Example Form
The following form has a radio button field with a default value and a checkbox field that is not required.
Form Code
Further reading
- If you aren’t sure whether to use a checkbox or a radio button, check out the different cases and options in Better Checkboxes & Radio Buttons.
- For help with detailed semantics and tags, check out Contact Form 7’s Checkboxes, Radio Buttons, & Menus help article.
Tip: Want to save time & understand your radio buttons better? CF7 Skins has a drag & drop visual editor that does the hard work for you… and it’s free! Take a look at how the visual editor can help you.
