Contact Form 7 Accessibility

I recently ran an ADA compliance check on my site with the tool below and found out that my Contact Form 7 forms weren’t compliant:

https://fae.cita.illinois.edu/

The forms needed labels, but I wasn’t sure how to add the “id” information to the form tag so I could reference it in my “label” tag. Through poking around with the custom tag generator, I figured out how to add this info to the standard form elements.

You have to be on the edit page of Contact Form 7 within your WordPress site dashboard. Simply add “id:your-label-name” to the end of the code inside the brackets that CF7 generates for each form field. Refer to this “id” in your label tag wrapping around the description text and form element tag.

Like so:

<label for="yourname">Your Name (required)<br />
    [text* your-name id:yourname] </label>

Just for clarification, this is what it would have looked like if you were doing this in normal HTML, without Contact Form 7’s help:

<LABEL for="yourname">Your Name (required)
     <INPUT type="text" id="yourname">
   </LABEL>