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

1 Views

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:

Read More
[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.

Thanks!

Jenn

Post Views: 1

Related posts

1 comment

  1. 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.

Comments are closed.