To make user-friendly web forms, it is important to clarify the purpose of each input. In addition to visual labels for users, you are advised to use the autocomplete
attribute to let browsers programmatically identify the purpose of the field, so that browsers can offer form autocompletion based on past user input. This is not just useful for users because it relieves their typing burden, but also essential for users with memory issues, dyslexia, and other disabilities.
Some of the form-tag types that Contact Form 7 offers support the autocomplete
option. If you set this option for a form-tag in the form template, the option value will be reflected in the output HTML element. For example, if you set the autocomplete:name
option in a form-tag, like the following:
[text* your-name autocomplete:name]
the HTML element output will have the autocomplete="name"
attribute, and, if the browser offers autocompletion, it will suggest the user’s full name for input.
Setting autocompletion at the form element level
Contact Form 7 provides the wpcf7_form_autocomplete
filter hook to customize the root form
element’s autocomplete
attribute. The following code snippet shows an example that sets autocomplete="off"
on the form
element:
add_filter( 'wpcf7_form_autocomplete', function ( $autocomplete ) {
$autocomplete = 'off';
return $autocomplete;
}, 10, 1 );
Notice that the attribute value allowed for the form
element is on
or off
only. Also, the form
element’s autocomplete
attribute will be overridden by each form control element’s autocomplete
attribute. Therefore, you will have little need for this technique.