Wordpress Contact Form 7 radio not required

Question

I have a form with few fields along with a radio button. This radio button is an optional field. But I am not able to submit form if I do not select any option from the radio button.

<div class="input-field-outer">
    [text* your-name class:name placeholder "Name or business name*"]
</div>
<div class="input-field-outer">
    [email* email placeholder "Email*"]
</div>
<div class="input-field-outer">
    [text* contact-number id:telno class:hs-phone-number placeholder "Contact number*"]
    <span id="errmsg"></span>
</div>
<div class="input-field-outer">
    <div class="radio-outer">
        [radio customer_type "New Customer" "Old Customer"]
    </div>
</div>

It will work when I make any of them selected default:

[radio customer_type default:1 "New Customer" "Old Customer"]

Any ideas about using radio button with no items default.

Solution 1

A workaround would be to use a checkbox and add the exclusive parameter. This allows you to submit the form without selecting a customer type.

[checkbox customer_type exclusive "New Customer" "Old Customer"]

Solution 2

Checkbox exclusive actually didn't work for me because of theme's CSS which didn't support it.

Without bothering with adding JS and CSS to the theme to support this feature I have managed to overcome the problem with radio by using one more "empty" field:

[radio choice label_first default:1 "" "Yes" "No"]

After that in CSS i added:

.wpcf7-list-item.first {
    display: none;
}

This selected first option which was not shown in front-end (and resulting mail) and made checkbox effectively non-required in validation.

Solution 3

To remove validation on all radio fields add this to functions.php or wherever appropriate.

remove_filter('wpcf7_validate_radio', 'wpcf7_checkbox_validation_filter', 10);

If you want to maintain the required validation for some of the radios, change them to this:

[radio fieldName class:required "Yes" "No"]

Then add this code to functions.php:

remove_filter('wpcf7_validate_radio', 'wpcf7_checkbox_validation_filter', 10);

add_filter('wpcf7_validate_radio', function($result, $tag) {
  if (in_array('class:required', $tag->options)) {
    $result = wpcf7_checkbox_validation_filter($result, $tag);
  }
  return $result;
}, 10, 2);

Solution 4

Just read this comment which says:

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.

and

If you need to have no required option you can switch to using a checkbox.

So, building a workaround does not meet the W3C's specifications and and may not be the best solution because of this.

Solution 5

You can select which radio button is selected by default using the option default:1 for the first radio or default:2 for the second radio, and so on.

Adding the option default:0 does exactly what you're looking for. It makes all the radio buttons unselected.

View more solutions