code cf7

How to set up an accessible form using Contact Form 7 in WordPress

Recently I discovered Contact Form 7 (CF7) by Takayuki Miyoshi. A plugin to create forms on a WordPress website. I was looking for an accessible alternative for Gravity Forms, and discovered that Contact Form 7 does an excellent job!

Up to now I used Gravity Forms, which is a great plugin. But it has some accessibility issues and has W3C validation errors for the HTML and CSS. Gravity Forms also doesn’t have an accessible backend.

Contact Form 7 recently (version 3.6) added accessible WAI-ARIA to the forms, e.g. for error messages and required fields. Also the plugin gives you complete controle over the HTML output of the form.

A second advantage of Contact Form 7 is that the backend is fully accessible, so a visually impaired content manager can build her own forms.

The only drawback is that the default form, provided by the plugin needs to be changed to make the form fully accessible, but that’s easily done, unlike with Gravity Forms.

For example, you want to add a small contact form with name and email.

Change the default form from:

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

into:

[response]
<fieldset>
<label for="name">Name (required)</label>
[text* your-name id:name]
<label for="e-mail">Email address (required)</label>
[email* your-email id:e-mail]
</fieldset>
[submit "I want your newsletter"]

Explanation:

The shortcode [response] is the space where the error messages are placed, nicely above the input fields. You can move and/or repeat it if you want.

A fieldset was added to the HTML, if you want you can add a legend here too.

Each input field has a proper label connected:

  • the label has a for=”name”
  • the input field has a id:name

The generated HTML inside the form element then will be:
<fieldset>
<label for="name">Name (required)</label>
<span><input type="text" name="your-name" value="" size="40" id="name" aria required="true" aria-invalid="false" /></span>
<label for="e-mail">Email address (required)</label>
<span><input type="email" name="your-email" value="" size="40" id="e-mail" aria-required="true" aria-invalid="false" /></span>
</fieldset>
<input type="submit" value="I want your newsletter" />

Change some settings

By adding constants to wp_config.php you can disable the plugin’s CSS and JavaScript.
With WPCF7_AUTOP you can prevent CF7 adding a <p> with each line in the HTML.

The amount of CSS is conveniently small, but if you like to add your own style in your theme style.css, you can disable it.

Disabling the JavaScript has the advantage that the page is refreshed and the focus is set to the top of the form, so if there are form errors, the visitor will see (or hear) the form errors right away in a new page. This may not be a accessibility requirement, but I find it more usable.

/**
* Contact form 7 constants.
*
*/
define( 'WPCF7_AUTOP', false ); // no extra <p>
define( 'WPCF7_LOAD_JS', false );  // disables JavaScript
define( 'WPCF7_LOAD_CSS', false ); // disables the default CSS

And you can add a class of your own to the form, by adding something lik this to your functions.php:

/* Add class to wpcf7 form */
add_filter( 'wpcf7_form_class_attr', 'prefix_form_class_attr' );
function prefix_form_class_attr( $class ) {
$class .= ' prefix-wpcf7-form';
return $class;
}

Conclusion

This plugin is great for building accessible forms. However, the content manager needs to know some HTML to keep it accessible.

It would be more convenient to provide options for the auto p, CSS and Javascript in a settings page. Changing the wp-config.php for a plugin is a bit of a kludge.

Contact Form 7 provides a good set of tags, including a CAPTCHA (combined with Really Simple CAPTCHA),  a large amount of extra plugins, e.g. for integrating with Askimet and MailChimp. It is well documented, maintained and supported.

It may not have the range of possibilities and visual effects of Gravity Forms, but it does what it’s supposed to do: build a good form with decent HTML.

Toegankelijke social media share buttons in WordPress

Hoe voeg je toegankelijke social media buttons toe aan je post of page in WordPress als je de bezoeker je bericht of pagina wilt laten delen op bijvoorbeeld Facebook, Twitter, LinkedIn of Google+? Deze vraag kreeg ik van Winy Schalke van Alva Design.

De meeste kant-en-klare buttons voor het toevoegen van Social Media buttons worden opgebouwd in Javascript. Maar als je alle fancy stuff weghaalt en stript tot de basis blijft er eigenlijk alleen een link met variabelen over. Dit is ook te maken in alleen HTML/PHP. De link wordt dan opgebouwd via een functie in PHP. Lees verder

Volg

Ontvang elk nieuw bericht direct in je inbox.

Doe mee met 366 andere volgers