Skip to content

Make Contact Form 7 forms WCAG compliant

Forms created with the Contact Form 7 plugin can be altered to meet accessibility requirements.

The default form, which is not WCAG compliant, looks like this:

<p>Your Name (required)<br />
[text* your-name] </p>
<p>Your Email (required)<br />
[email* your-email] </p>
<p>Subject<br />
[text your-subject] </p>
<p>Your Message<br />
[textarea your-message] </p>
<p>[submit "Send"]</p>

Labels need to be added for each input field. Every time you move to a form field the screen reader tells the user what the name of the form field is and what type of control it is. The revised HTML is shown below:

<p><label for="name">Your Name (required)</label>
 [text* your-name id="name"] </p>
<p><label for="email">Your Email Address (required)</label>
 [email* your-email id="email"] </p>
<p><label for="subject">Subject (required)</label>
 [text your-subject id="subject"] </p>
<p><label for="message">Your Message</label>
 [textarea your-message id="message"] </p>
<p>[submit "Send"]</p>

The for attribute of the label must exactly match the id of the form control. This ensures that assistive technology can refer to the correct label when presenting a form control.