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.

Qualified

Answer 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"]

Agnail

Thank you @vicente. Actually i got same solution form the support: wordpress.org/support/topic/…. Thank you again for your answer. – Qualified

Answer 2

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);

Boehike

Answer 3

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.

Strychnic

Elegant. If a CSS-less user submits the form, it would still show the selction as blank, so, while awkward for this mythical user, it'd still communicate what they'd submit. You can also have it say "n/a", depending on your use case. – Crosspurpose

Best to wrap it in a div or something, too, so you can target it by its class, like .radio-no-first .wpcf7-list-item.first – Crosspurpose

Answer 4

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.

Cowey

when you use default:0 it makes all radio button ubnselected, but still not validating in no selection is made by the user, so this is not the solution. – Picoline

Answer 5

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.

Chap