Building Accessible WordPress Contact Forms with Contact Form 7: Accessible Defaults

Contact Form 7 is one of the most popular WordPress contact form builders for a few reasons:

• It’s completely free
• In-depth input validation checks for better security against phishing and social engineering attacks
• The ability to add customize every aspect of user experience (UX) from what can be in the form to how the submitted data is processed

The last bullet is what enables making contact forms more accessible to ensure all users can work with them. Since web accessibility is still not a commonly discussed topic, it’s great to have templates to easily learn from and implement. This negates the need for researching best practices for accessible code.

For this case, we have the Contact Form 7: Accessible Defaults WordPress plugin, by the same developer that maintains the WP Accessibility suite – Joe Dolson. 

Contact Form 7: Accessible Defaults adds a Templates page to each contact form configuration page so you can quickly create an accessible form for your needs.

This plugin does not make changes to existing contact forms, only contact forms created post-installation. 

Below we’ll cover how to create an accessible WordPress contact form in Contact Form 7.

Create an Accessible WordPress Contact Form

1. Log into your WordPress dashboard.
2. Install the Contact Form 7: Accessible Defaults plugin.
3. Install Contact Form 7, or update it, if you haven’t already. Then, the default contact form will include accessible code from the Accessible Defaults plugin. If you already had Contact Form 7 installed, you’ll need to create a new contact form which will have improved accessibility.
4. Select the Templates tab.
5. Select one of the accessible contact form templates to get started: Basic, Contact with Address, Reservation, Subscription, or File Submission.
   
6. It will forward you back to the Form section to make changes as needed. To build on an existing contact form, open the existing form page in another browser tab. Then, copy the accessible form code into the older form.
7. Continue to edit the new contact form as needed and save changes.

Learn more about how to build a more accessible WordPress website with Access Monitor tests, or about more possibilities in our WordPress Education Channel.