WordPressでお問い合わせフォームを実装するときは、送信できることだけでなく、入力エラー、キーボード操作、メール到達性、迷惑送信対策まで確認する必要があります。
Contact Form 7などのフォームプラグインを使う場合にも共通する、納品前のチェックポイントをまとめます。
本記事の執筆者：マサトラ
フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。
1. 正常系だけでなく入力エラーを確認する
未入力、形式違い、文字数超過などを意図的に発生させ、エラーメッセージが該当項目の近くに表示されるか確認します。色だけに頼らず、何を直せばよいか文章で伝えましょう。
エラー後に画面上部へ戻ってしまうフォームでは、最初のエラー位置へ移動させると修正箇所を見つけやすくなります。
2. 長い文字列がレイアウトからはみ出さないようにする
メールアドレスやURL、確認画面の入力内容は長い半角文字が続くことがあります。表示領域にoverflow-wrapを指定しておきます。
.form-confirm-value {
overflow-wrap: anywhere;
word-break: normal;
}3. キーボードだけでも操作できるようにする
Tabキーで入力欄やボタンへ移動できること、ラジオボタンを矢印キーで選べること、フォーカス位置が見えることを確認します。標準のinputをdisplay: noneで消すと操作対象から外れるため、見た目だけ隠す方法を使います。
4. 入力内容に合ったキーボードを表示する
電話番号にはinputmode="tel"、郵便番号にはinputmode="numeric"を指定すると、スマートフォンで入力しやすくなります。inputmodeは入力値の検証ではないため、サーバー側のバリデーションも必要です。
MW WP Formで電話番号・郵便番号用キーボードを表示する方法
5. 送信ボタンは役割が伝わる要素にする
可能なら<button type="submit">を使います。buttonは子要素や疑似要素を使いやすく、「送信する」など操作内容が分かるラベルも付けられます。処理中は二重送信を防ぎ、完了または失敗を利用者へ通知します。
6. メール到達性と迷惑送信対策を確認する
- 管理者通知と自動返信の両方を、複数ドメインのメールアドレスで試す
- Fromにはサイトのドメインと一致するアドレスを使い、利用者のアドレスはReply-Toへ設定する
- SPF・DKIM・DMARCとSMTP送信の設定をサーバー管理者と確認する
- レート制限、ハニーポット、CAPTCHAなど必要な迷惑送信対策を行う
フォームに保存した個人情報は、保存期間、閲覧権限、バックアップ、削除方法も決めます。不要な項目を集めず、プライバシーポリシーへの同意方法も確認しましょう。
7. 完了計測は送信成功イベントを基準にする
サンクスページの表示回数だけをコンバージョンにすると、直接アクセスや再読み込みも計測されます。フォームプラグインの送信成功イベントを使って計測し、必要に応じて成功後にサンクスページへ移動させます。
document.referrerだけで直接アクセスを判定する方法は、ブラウザーやプライバシー設定で参照元が送られないことがあるため、送信の証明やアクセス制御には使えません。サンクスページには機密情報を置かないようにします。
MW WP Formを使う既存サイトは、WordPress公式ディレクトリで最新の保守・互換状況を確認してください。新規サイトでは継続的に更新されているフォームプラグインも比較しましょう。
納品前チェックリスト
- PC・スマートフォン・キーボード操作で入力と送信を確認した
- 必須、形式、文字数、送信失敗の各エラーを確認した
- 管理者通知と自動返信の到達を確認した
- 迷惑送信対策と個人情報の運用を決めた
- 送信成功を基準にコンバージョンを計測した
