Form autocompletion

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.

Just another contact form plugin for WordPress. Simple but flexible.

%d bloggers like this: