Contact Form 7に確認用メールアドレス項目を追加します。
重要な注意事項
現在では確認用メールアドレスはバッドUIとして知られています。
適切に対応することでフォームから取り除けるので、本フォームタグは極力使わないでください。
プラグイン化した理由としては以下となります。
- 本記事を啓蒙するため
- どうしても顧客からの要望に答えなければならない場合のため
なぜバッドUIといわれるようになったのか
HTMLのautocomplete属性の普及
現在普及しているHTML5ではautocomplete属性が定義され、入力の自動補完ができます。適切にautocomplete属性が設定されていれば、ユーザーがメールアドレスを手入力することはありません。Contact Form 7も対応しているので、まず最初にautocomplete属性を設定してください。
<label> メールアドレス
[email* your-email autocomplete:email] </label>コピペされる
autocomplete属性が設定されていない場合、ユーザーは1つ入力し終わった後、メールアドレスを確認用メールアドレスの入力フィールドにコピペします。コピペなので確認する意味がありません。
以下のようなコピペ対策をおこなっているサイトもありますが、UXが極端に悪くなり印象が悪くなります。
- コピペ禁止
- 入力欄を@の前後で2つに分割する
UIデザインで解決できることも多い
UIデザインで注意を引いたり、文字を大きくするだけで解決することもあります。
メールアドレスの確認フィールドをなくすべき理由 | UX MILK
確実なのは会員登録によるメールアドレス認証
フォームの話題からは少し外れますが、そもそもメールアドレスがとても重要で間違えられたら困る場合、 （CRMの観点からしても） 会員登録でメールアドレスの認証をおこなった方がいいでしょう。
Wattsの確認用メールアドレス項目の特徴
確認用メールアドレス専用の項目
確認用メールアドレス専用の項目として新規にタグを登録しています。
問題がおこる可能性のある「maxlength」「minlength」のオプションを削除しています。
（「maxlength」「minlength」を許容した場合、設定によっては絶対に一致する値が入力できない入力項目になるため）
複雑なオートバリデーションに対応
確認用メールアドレス項目への入力後に確認対象のメールアドレス項目の値が変更された場合、再度バリデーションをおこないます。
使い方
確認対象の設定方法
「対象の名前」に確認対象とするメールアドレス項目の名前を設定してください。
<label> メールアドレス
[email* your-email autocomplete:email] </label>
<label> 確認用メールアドレス
[confirm_email* your-confirm-email target:your-email] </label>