フォームの自動補完

This page is also available in English.

ユーザーフレンドリーなウェブフォームを構築するにあたって重要なことは、個々の入力項目の目的を明確にすることです。ユーザーを対象にした視覚的なラベリングに加えて、autocomplete 属性を指定することによりブラウザーに項目の目的をプログラムで認識させることが推奨されます。そうすることでブラウザーは過去のユーザー入力に基づいたフォームの自動補完を提供できるようになります。これは単にタイピングの負担が軽減されるので便利だというだけの話ではなく、記憶能力の問題や失読症、その他の障害を持つユーザーにとっては不可欠の要件になります。

Contact Form 7 のいくつかのフォームタグタイプは autocomplete オプションをサポートします。フォームテンプレート内のフォームタグでこのオプションを指定すると、出力される HTML 要素にオプションの値が反映されます。例として、次のようにフォームタグに autocomplete:name を追加すると:

[text* your-name autocomplete:name]

出力された HTML 要素は autocomplete="name" を持つようになり、ブラウザーが自動補完を提供する場合には入力値としてユーザーのフルネームを提案するようになるでしょう。

フォーム要素のレベルで自動補完を設定する

ルート form 要素の autocomplete 属性をカスタマイズするために Contact Form 7 は wpcf7_form_autocomplete フィルターフックを用意しています。次のコードは form 要素に autocomplete="off" を設定する例を示しています:

add_filter( 'wpcf7_form_autocomplete', function ( $autocomplete ) {
    $autocomplete = 'off';
    return $autocomplete;
}, 10, 1 );

form 要素の属性値として許可される値onoff のどちらかだけである点に注意しましょう。それから、form 要素に autocomplete 属性を設定しても個々のフォームコントロール要素の autocomplete 属性によって上書きされてしまいます。ですからこのテクニックが必要になる機会というのはそう多くはないでしょう。

WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。