WordPressのお問い合わせフォームの作り方｜設定・送信テスト・迷惑送信対策を解説

WordPressにお問い合わせフォームを置きたいと思っても、「どのプラグインを使えばよい？」「フォームは表示できたのにメールが届かない」と困ることがありますよね。

初心者が無料で始めるなら、Contact Form 7を使う方法があります。プラグインを有効化し、フォームとメールを設定し、固定ページへ専用ブロックを追加すれば設置できます。

この記事では、お問い合わせフォームの作り方を、インストールから公開後の送信テスト、迷惑送信対策、CSSでの見た目調整まで順番に解説します。

WordPressのお問い合わせフォームはプラグインで作れる

お問い合わせフォームは、訪問者が名前、メールアドレス、用件などを入力し、サイト運営者へ送信するページです。WordPressでは、プラグインを使うとPHPで送信処理を一から作らずに設置できます。

この記事ではContact Form 7を使います。シンプルなフォームから項目追加、メール設定、迷惑送信対策まで対応できるプラグインです。画面の細かな位置は利用中のWordPressやプラグインの版で変わることがありますが、設定の流れは同じです。

作成前に決める項目

プラグインを入れる前に、何を入力してもらうか決めます。項目を増やしすぎると送信の負担になるため、問い合わせ対応に必要な情報へ絞りましょう。

• お名前
• 返信先メールアドレス
• お問い合わせ内容
• 必要に応じて件名や問い合わせ種別
• プライバシーポリシーへの同意

電話番号や住所などの個人情報は、目的がある場合だけ追加します。収集する情報、利用目的、保存方法を決め、プライバシーポリシーも用意してください。

Contact Form 7をインストールする

1. WordPress管理画面で「プラグイン」→「新規プラグインを追加」を開く
2. 検索欄へ「Contact Form 7」と入力する
3. 作者がTakayuki Miyoshiであることを確認する
4. 「今すぐインストール」を押す
5. インストール後に「有効化」を押す

同じような名前の拡張プラグインも表示されます。先に本体のContact Form 7をインストールしてください。有効化すると、管理画面の左メニューに「お問い合わせ」が追加されます。

お問い合わせフォームを作成する

「お問い合わせ」→「コンタクトフォーム」を開きます。インストール直後は初期フォームが用意されているため、それを編集しても、新規追加しても構いません。

フォームタブで入力項目を設定する

フォーム編集画面の「フォーム」タブには、訪問者に表示するラベルとフォームタグを記述します。フォームタグは、テキスト欄やメール欄などを作るContact Form 7専用の記述です。

次は、お名前、メールアドレス、お問い合わせ内容、同意欄、送信ボタンを用意する例です。フォームタブの編集欄へ追加します。

<label>お名前 <span class="required">必須</span>
  [text* your-name autocomplete:name]
</label>

<label>メールアドレス <span class="required">必須</span>
  [email* your-email autocomplete:email]
</label>

<label>お問い合わせ内容 <span class="required">必須</span>
  [textarea* your-message]
</label>

[acceptance privacy-consent] プライバシーポリシーに同意する [/acceptance]

[submit "送信する"]

text*やemail*のアスタリスクは必須項目を表します。your-nameやyour-emailは項目名で、あとでメール本文へ入力内容を差し込むときに使います。

公式のContact Form 7スタートガイドでは、タグ生成ボタンを使ってフォームタグを作れると案内されています。構文をすべて手入力する必要はありません。

メール設定で受信先と差出人を確認する

フォームを作ったら、「メール」タブを開きます。ここを設定しないまま公開すると、画面では送信できても、必要な情報がメールに入らないことがあります。

• 送信先：問い合わせを受け取る運営者のメールアドレス
• 送信元：サイトと同じドメインのメールアドレス
• 題名：どのサイトの問い合わせか分かる件名
• 追加ヘッダー：返信先としてReply-To: [your-email]を設定
• メッセージ本文：フォームタグと同じ名前のメールタグを配置

フォーム側の[email* your-email]に入力された値は、メール側で[your-email]と書いて利用します。項目名が一致していないと、メール本文へ値が入りません。

Contact Form 7公式のメール設定では、送信元アドレスにサイトと同じドメインのアドレスを使うよう案内されています。訪問者のアドレスを送信元にせず、Reply-Toへ設定する点が重要です。

自動返信メールを設定する場合

訪問者へ受付メールを送りたいときは、「メール（2）を使用」にチェックを入れます。送信先へ[your-email]を設定し、受付内容と返信までの目安を記載します。

自動返信には機密情報を含めず、送信前に自分のメールアドレスでテストしてください。メール（2）は管理者宛ての主メールが正常に送信されたときに送られます。

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

1. 「固定ページ」→「新規固定ページを追加」を開く
2. ページタイトルに「お問い合わせ」と入力する
3. ブロック追加から「Contact Form 7」を選ぶ
4. 作成したフォームをプルダウンから選ぶ
5. ページを公開する

Contact Form 7の専用ブロックが見つからない場合は、フォーム一覧に表示されるショートコードをコピーし、「ショートコード」ブロックへ貼り付ける方法もあります。

公開前に必ず送信テストをする

フォームが表示されたことだけで完了にしないでください。PCとスマートフォンの両方で入力し、次の項目を確認します。

• 必須項目を空にするとエラーが出る
• 正しい内容で送信すると完了メッセージが出る
• 管理者宛てメールが届く
• メール本文にすべての入力内容が入る
• Reply-Toで訪問者のアドレスへ返信できる
• 設定した場合は自動返信メールが届く
• フォームが画面幅からはみ出さない

送信完了メッセージが表示されても、受信まで保証されるわけではありません。迷惑メールフォルダー、メールサーバーのログ、DNSの送信ドメイン認証も含めて確認します。

お問い合わせフォームをCSSで整える

フォームの幅、余白、必須表示、送信ボタンをCSSで整えると、入力しやすくなります。次の完成例では、入力欄を横幅いっぱいにし、フォーカス位置を見つけやすくしています。

子テーマのstyle.cssへ次のCSSを追加します。親テーマを直接編集すると更新時に消えることがあるため、子テーマまたはテーマが用意する追加CSS機能を使ってください。

.wpcf7-form p {
  margin: 0 0 24px;
}

.wpcf7-form label {
  font-weight: 700;
}

.wpcf7-form .required {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  background: #d64d62;
  font-size: 12px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid #b9d4d5;
  border-radius: 10px;
  background: #fbfefe;
  font: inherit;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: 3px solid rgba(22, 143, 145, .2);
  border-color: #168f91;
}

.wpcf7-form .wpcf7-submit {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #17324d;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible {
  background: #168f91;
}

width: 100%で入力欄を親要素の幅に合わせています。:focusはキーボード操作中の入力位置を示すため、削除せず見やすい色に調整してください。

迷惑送信と個人情報への対策

迷惑送信対策を設定する

公開フォームには自動送信が届く可能性があります。Contact Form 7公式では、Akismet、Cloudflare Turnstile、禁止用語リストなどの迷惑送信対策を案内しています。

最初から複数の対策を重ねすぎると、正常な問い合わせまで拒否することがあります。送信テストを行い、迷惑送信の状況を見ながら必要な方法を選んでください。

プライバシーポリシーへ案内する

収集する情報、利用目的、保管期間、第三者提供などをプライバシーポリシーで説明します。フォームには同意欄を設け、リンク先を送信前に確認できるようにします。

送信内容の保存方法を決める

Contact Form 7は標準では送信内容をWordPressへ保存しません。公式FAQでは、管理画面で保存する場合に同じ開発者のFlamingoを案内しています。保存するなら、閲覧権限、バックアップ、削除ルールも決めてください。

メールが届かないときの確認方法

送信元アドレスのドメインを確認する

送信元へGmailなど訪問者のアドレスを設定せず、サイトと同じドメインのアドレスを使います。訪問者のメールアドレスはReply-Toに設定します。

迷惑メールフォルダーと受信設定を見る

別のメールアドレスでもテストし、迷惑メールフォルダー、受信拒否、転送設定を確認します。メール本文や件名が空だと迷惑メールと判断されやすいため、分かりやすい内容にします。

SMTP送信を検討する

サーバーのメール送信機能だけでは安定しない場合があります。契約サーバーやメールサービスの案内を確認し、SMTP経由で送信するプラグインを検討してください。認証情報は公開ページや記事本文へ記載しません。

よくある失敗

• ショートコードがそのまま表示される：段落ではなく専用ブロックまたはショートコードブロックへ置く
• メール本文が空になる：フォームタグとメールタグの項目名を一致させる
• スマートフォンで横にはみ出す：入力欄へwidth: 100%とbox-sizing: border-boxを指定する
• 同意欄を入れたのに送信できない：同意欄をチェックした状態と未チェック状態の両方を試す
• プラグインを更新していない：バックアップと検証後に更新し、古い版を放置しない

お問い合わせフォームのまとめ

WordPressのお問い合わせフォームは、Contact Form 7を有効化し、フォーム、メール、固定ページの順に設定すると作れます。入力欄を表示しただけで終わらせず、管理者メール、自動返信、エラー、スマートフォン表示まで確認してください。

公開後は、迷惑送信対策、プライバシーポリシー、プラグイン更新を継続します。まずは名前、メールアドレス、問い合わせ内容の最小構成で作り、必要な項目だけ追加しましょう。