WordPress – Add label text to radio buttons in WordPress site using Contact Form 7

accessibility, contact-form-7, forms, wordpress

I'm trying to improve my website by making it more accessible and compliant with WCAG 2.0 (Level AA) guidelines. It's a WordPress site that uses Contact Form 7 to create forms. By default, Contact Form 7 doesn't add a label to its input elements. It's easy enough to manually add a label complete with a for attribute to input of type "text":

<label for="address">Street Address*</label><br />[text* Address1 id:address]

However, I'm having trouble doing this for radio buttons. I know that there's an option to "use_label_element" when generating a radio button tag with Contact Form 7, however this just generates an empty label tag — it doesn't include the for attribute. Here's the code that I've tried:

[radio RelativesWork use_label_element "Yes" "No"]

That shortcode generates the following HTML. Note that the ID I added with the shortcode is put on the wrapper span, and that the each label does not contain the for attribute.

<span class="wpcf7-form-control-wrap RelativesWork">  <span class="wpcf7-form-control wpcf7-radio" id="relatives">    <span class="wpcf7-list-item first">      <label>        <input type="radio" name="RelativesWork" value="Yes" />&nbsp;        <span class="wpcf7-list-item-label">Yes</span>      </label>    </span>    <span class="wpcf7-list-item last">      <label>        <input type="radio" name="RelativesWork" value="No" />&nbsp;        <span class="wpcf7-list-item-label">No</span>      </label>    </span>  </span></span>

I learned that there's a supplemental plugin called "Contact Form 7: Accessible Defaults", so I installed and tried that. However, as far as I can tell, that doesn't address radio buttons at all.

Can anyone help me figure out how to add a label that contains the for attribute to each radio button I create with Contact Form 7.



Best Solution

No, this is not possible with CF7 plugin as is, as it has several shortcomings such as this when it comes to customising the front-end form.

To achieve this, there are 2 options, hack the form using javascript once it is loaded to add an id attribute to the input field and a for attribute to the label element. See this answer to see how it is done,

<label> My radio button       [radio amount id:amount class:amount-select default:1 "50" "100" "200" "500" "Other"]</label>    [submit]    <script>       (function( $ ) {         $(document).ready( function(){           $('form.wpcf7-form input').each(function(){             var span = $(this).parent('span');             if(span){               var idAttr = span.attr('id');               $(this).attr('id',idAttr);               span.attr('id','');             }             //or you could also do this which is even less maintenance             var name = $(this).attr('name');             var type = $(this).attr('type');             switch(type){               case 'radio':               case 'checkbox':                 name += '-'+$(this).attr('value');             }             $(this).attr('id',name);           });         });       })( jQuery );    </script>

Or you can use version 4.11 of the Smart Grid-layout extension for CF7 plugin (currently v4.10 is available, but the next version will be out in a week, a beta version can be downloaded from the repo) which will introduce a dynamic_checkbox field that is properly formatted, although if you are looking for simple yes/no radio fields, then the first solution is simpler.