The default contact form template has been modified for the first time in 8 years. The major change is the addition of label
elements.
Using a label
element to label a form control is recommended in accessibility guidelines. In earlier versions, the default template didn’t use label
elements, so you had to add them on your own if you wanted to make your form accessible.
In the early versions released before 2008, label
elements were used in their default template, but they were abandoned for a reason.
If label
elements were used in the default template, users would follow them and try to use label
elements for fields they added as well. This practice isn’t bad, but it sometimes resulted in a critical mistake.
To demonstrate the common mistake seen around label
elements, try adding the following line into your contact form:
<label>[checkbox your-country "China" "India" "San Marino"]</label>
Look correct? Try clicking on the labels for the second or third option (the text “India” or “San Marino”). Can you tick the checkbox? You can’t, right? It’s completely broken.
This happens because you have put multiple form controls inside a single label
element. A label
element must correspond to a single form control. Since the form-tag ([checkbox your-country "China" "India" "San Marino"]
) is actually replaced with three input fields, it’s an invalid markup.
For labeling checkboxes and radio buttons, Contact Form 7 provides use_label_element
option. Use this instead of label
elements.
Because of the problems caused by label
elements in the default contact form template, it was abandoned. However, there is no doubt that we should encourage users to do correct labeling in their forms.
As a solution for this situation, Contact Form 7 4.5 introduces an additional test item in its configuration validator. If you insert two or more form-tags inside a single label
element, it will show an alert to indicate a possible misconfiguration.
This improvement was made as a result of a discussion with the WordPress Accessibility team at WordCamp Europe 2016 Contributor Day.
Requires: WordPress 4.4 or higher
Tested up to: WordPress 4.6
» Download Contact Form 7 plugin from WordPress.org
Change Log
- The default contact form template is revised.
- reCAPTCHA: Run
grecaptcha.reset()
after a submission. - The
autocomplete
option for form-tags andwpcf7_form_autocomplete
filter hook are introduced to manageautocomplete
attribute. - The config validator is revised. The
wpcf7_config_validator_validate
action hook is introduced to allow 3rd-party to cut in. - A bug in character count form-tag is fixed.
- Language Packs: Language files for Danish (da_DK), Polish (pl_PL), and Czech (cs_CZ) have been removed from the plugin package.