LESSON / WP LOAD

WordPressにお問い合わせフォームを設置する

フォームプラグインを使い、入力項目、確認メッセージ、迷惑送信対策、個人情報の扱い、メール通知を設定します。

目安 60分 コース進捗 0 / 17

GOAL

このレッスンでできるようになること

  • お問い合わせに必要な項目を設計できる
  • 入力検証と迷惑送信対策を設定できる
  • 送信後の表示と通知先を確認できる

お問い合わせフォームは、入力画面だけでなく、サーバー側の検証、迷惑送信対策、メール通知、個人情報の取り扱いまで必要です。初心者が独自実装すると抜けが起きやすいため、実績があり更新が続いているフォームプラグインを使います。

プラグインによって設定名は異なりますが、確認する考え方は共通です。インストール前に対応中のWordPressバージョン、最終更新日、サポート情報を確認してください。

入力項目を必要最小限にする

お問い合わせフォームでは、入力画面の後に安全な検証と通知処理が続きます。

フォーム入力から検証、迷惑送信対策、通知、送信完了までの流れ
フォーム入力から検証、迷惑送信対策、通知、送信完了までの流れ
  • お名前
  • 返信先メールアドレス
  • お問い合わせ種別
  • お問い合わせ内容
  • プライバシーポリシーへの同意

利用目的のない住所、電話番号、生年月日などを集めないでください。項目が増えるほど入力の負担と情報管理の責任が増えます。

フォームを固定ページへ配置する

公開画面では、すべての入力欄にラベルがあり、必須項目と同意内容が分かることを確認します。

必要最小限の入力項目と同意欄を配置したWordPressお問い合わせフォーム
必要最小限の入力項目と同意欄を配置したWordPressお問い合わせフォーム
  1. フォームプラグインでフォームを新規作成する
  2. 各項目へ画面上のラベルを付ける
  3. メールアドレスの入力形式と必須項目を設定する
  4. お問い合わせ固定ページへブロックまたはショートコードで配置する
  5. 公開画面でラベルと入力欄の対応を確認する

プレースホルダーだけを項目名の代わりにしません。入力を始めると消えるため、ラベルは常に確認できるようにします。

入力エラーと送信完了を伝える

入力エラーは該当項目の近くへ、修正方法が分かる文章で表示します。

メールアドレスと必須項目の入力エラーを文章で示したお問い合わせフォーム
メールアドレスと必須項目の入力エラーを文章で示したお問い合わせフォーム

未入力、不正なメールアドレス、長すぎる文章などを送信し、エラー箇所と理由が分かるか確認します。色だけでなく文章でもエラーを伝え、キーボード操作で修正する項目へ移動できる状態にします。

送信後には、送信できたこと、返信までの目安、急ぎの場合の連絡方法を表示します。送信ボタンを連打しても重複送信されにくい設定も確認してください。

迷惑送信と個人情報へ対応する

次の図では、「迷惑送信と個人情報へ対応する」の仕組みや関係を確認できます。

「迷惑送信と個人情報へ対応する」の仕組みや関係を示す図
「迷惑送信と個人情報へ対応する」の仕組みと関係
  • プラグインが提供するスパム判定やハニーポットを有効にする
  • 必要に応じてCAPTCHAを設定する
  • プライバシーポリシーへ利用目的と保管方法を記載する
  • 同意を必須にし、リンク先を別途確認できるようにする
  • 管理画面に問い合わせを保存する場合は閲覧権限と削除時期を決める

通知設定を確認する

管理者通知の宛先、件名、返信先を設定します。Fromにはサイトと同じドメインのアドレスを使い、利用者が入力したアドレスはReply-Toへ設定するのが基本です。

次の図では、「通知設定を確認する」で行う操作の流れを示しています。

「通知設定を確認する」で行う操作の流れを示す図
「通知設定を確認する」で行う操作の流れ

フォームが「送信成功」と表示しても、メールが必ず受信箱へ届いたとは限りません。本番サーバーでのSMTPやDNS、実際の受信確認はSTEP 5で行います。

正常系と異常系をテストする

正常に送信できた場合は、受付完了と今後の連絡について利用者へ伝えます。

お問い合わせの送信完了と返信目安を表示した完了画面
お問い合わせの送信完了と返信目安を表示した完了画面
  1. すべて正しく入力して送信する
  2. 必須項目を空にして送信する
  3. 不正なメールアドレスで送信する
  4. 同意せずに送信する
  5. スマートフォンとキーボードで操作する
  6. 管理者通知と自動返信の内容を確認する

CHECK POINT

完了条件