WordPress『お問い合わせフォーム』設置【Contact Form 7】

ContactForm7
お問い合わせフォーム
本ページはプロモーションが含まれています

ブログを運営する上で、『お問い合わせフォーム』は重要なツールです。

読者からの質問や感想を受け取る窓口になるのはもちろん、企業からの依頼や提案を受ける際にも役立ちます。

さらに、今後アフィリエイトを導入したい場合は、審査を通過しやすくするためにも『お問い合わせフォーム』を設置しておきましょう。

設置の手順はこのようになります。

  1. Contact Form 7 をインストール
  2. フォームの基本設定
  3. メール送信設定(管理人宛メールと自動返信メール)
  4. フォームを固定ページに設置
  5. フォームの動作確認
  6. フッターメニューにリンクを設置

この記事では、この順番に沿ってスクショを交えながら解説していきます。

まだWordPressに『お問い合わせフォーム』を設置していない方は、この機会にぜひ導入してみてください。

スポンサーリンク

1. 「Contact Form 7」 のインストール

WordPressダッシュボード → 「プラグイン」 → 「プラグインを追加」をクリック

プラグインの検索窓に Contact Form 7 と入力し →「今すぐインストール」

「有効化」をクリックしてインストールが完了です。

2. フォームの基本設定

プラグインを「有効化」にすると、ダッシュボード左側の管理メニューに「✉️お問い合わせ」という項目が追加されます。

「コンタクトフォーム1」をクリックし、コンタクトフォームの編集画面を開きます。

「コンタクトフォーム1」が生成されない場合、上部の「コンタクトフォームを追加」をクリックし、タイトルを「お問い合わせフォーム」などと入力してください。

タイトルを「お問い合わせフォーム」などに変更し、ステータスから保存をクリック

「フォーム」タブから、デフォルトのフォームを確認し、必要に応じて名前、メールアドレス、題名、メッセージ本文のフォームを整えましょう。

ここでは【氏名】の横に(必須)を追加して、【メッセージ本文】の(任意)を削除してみました。

「お問い合わせフォーム」の設置が完了すると ↓ このように表示されます。

この記事ではデフォルト設定のまま進めていきますが、フォームの項目はカスタマイズで追加することができます。

項目を追加したい方は、XSERVER公式のカスタマイズ方法を参考になさってください。

3. メールの送信設定

メールの送信設定には2種類あります。

  • サイト管理者に届く通知メール
  • 問い合わせをした人(送信者)に届く自動返信メール
ContactForm7

自動返信メールを設定しておくと、送信者に「ちゃんと送信できたんだ」と安心を与えることができるので、忘れずに設定しておきましょう。

管理者宛て「通知メール」の設定

「お問い合わせフォーム」から、入力・送信された際、サイト管理者に知らせる「通知メール」の設定を行います。

コンタクトフォームの編集画面の「メール」タブを開き、【送信先】と【送信元】にサイトのドメインで作ったメールアドレスを入力。

  • 送信先: example@love-wave.com
  • 送信元: [_site_title] <example@love-wave.com>
ContactForm7 メール設定

送信先のアドレスは、Gmailなどのフリーメールでも設定できます。ただし、私の環境では送受信テストを行った際に、通知メールが届かないトラブルが発生。

そこで【送信先】と【送信元】の両方を、サイトのドメインで作成した同じメールアドレス(例 : example@love-wave.com)に設定したところ、動作が安定しました。

そのため、この記事ではサイトドメインのメールアドレスを使う方法をおすすめしています。

送信先(To)
→ 管理者が受け取りたいメールアドレス。フリーメールでも独自ドメインでもOK。

送信元(From)
→ WordPressのサーバーから「送信する側」として扱われるアドレス。サイトと同じドメイン以外(フリーメールや他のドメイン)にすると「送信元と送信サーバーが一致してない」と見なされて認証エラーになることが多く、迷惑メール扱いされることもある。

次は、「空のメールタグを含む行を出力から除外する」と「HTML形式のメールを使用する」の設定。

この設定は必須ではありませんが、HTML形式のメールは、受け取り側のメーラーや環境によっては正しく表示されなかったり、迷惑メール判定されやすくなることもあります。

特に理由がなければ☑️チェックを外しておきましょう。

ContactForm7メール設定

これで管理者宛て通知メールの設定は終了です。一旦保存しておきましょう。

送信者宛て「自動返信メール」の設定

「お問い合わせフォーム」から、問い合わせをした人(送信者)に届く「自動返信メール」の設定を行います。

メール(2)を使用に☑️チェックを入れてください。

ContactForm7 自動返信メール設定
  • 送信先:
    問い合わせを送ってきた人(送信者)のメールアドレス。
    「❗安全ではないメール設定が……」の表示はスパム対策で消えます。スパム対策については最後の章で解説しています。
  • 送信元:
    差出人として表示されるメールアドレス。サイトのドメインで作成したアドレスを設定すると安心です。
  • 題名:
    届いたメールの件名になります。サイト名や「お問い合わせありがとうございます」など、分かりやすい文言を入れておきましょう。
  • 追加ヘッダー:
    メールを受け取った人(送信者)が、返信ボタンを押したときに、自動的に宛先になるメールアドレス。特に理由がなければ送信元と同じアドレスを設定すればOKです。
  • メッセージ本文:
    お問い合わせ内容の本文が入る部分です。
    お好みで「このメールは自動返信です」「ご連絡ありがとうございます」や、サイトURLなどを追加しましょう。
ContactForm7 自動返信メール設定

実際に、自動返信されたメールがこちらになります。

自動返信メール
スポンサーリンク

4. フォームを固定ページに設置

固定ページを作成し、ページ内に先ほど設定した「お問い合わせフォーム」を設置します。

お問い合わせフォームのページ作成

WordPressダッシュボード → 「固定ページ」 → 「固定ページを追加」をクリックし、ページタイトルに『お問い合わせ』(※お好みのタイトルでOK)と入力。

右サイドバーにある「スラッグ」をクリックし、パーマリンクを「 contact 」に変更しましょう。

スラッグはURLの一部で、基本的に自由に設定できます。(例:otoiawase など)一般的には「contact」が使われることが多いため、この例でも contact を設定しています。

お問い合わせページには、挨拶文や注意書きなどを入力しておきましょう。
(後からでも追加できるので、今は飛ばしても大丈夫です)

ページの準備ができたので、固定ページに「お問い合わせフォーム」を設置します。

ブロックエディタで設置する方法

設置する方法は2パターンあるので、お好みの設置方法で進めてください。

先ほど入力した挨拶文や注意書きなどの下のブロックにカーソルを置きます。

ContactForm7 ブロックエディタから設置する方法

左上の + 「ブロックインサーター」 → 「Contact Form 7」アイコンをクリック

ContactForm7 ブロックエディタから設置する方法

枠の中をクリックし、今回作成したフォーム名の「お問い合わせフォーム」を選択します。

ContactForm7 ブロックエディタから設置する方法

「お問い合わせ」ページを保存しましょう。

ショートコードで設置する方法

一旦、「お問い合わせ」ページを保存し、ダッシュボード → 「✉️お問い合わせ」をクリック。

作成したフォームの右横に表示されている [ショートコード] をコピーし、再びダッシュボード → 固定ページ → 「お問い合わせ」を開きます。

ContactForm7 ショートコードで設置

先ほど入力した挨拶文や注意書きなどの下のブロックにカーソルを置きます。

ContactForm7 ブロックエディタから設置する方法

左上の + 「ブロックインサーター」 → 「ショートコード」アイコンをクリック

ContactForm7 ショートコードで設置

コピーした [ショートコード] を枠の中に貼り付けます。

ContactForm7 ショートコードで設置

「お問い合わせ」ページを保存しましょう。

「お問い合わせフォーム」をプレビューで確認

作成した固定ページ「お問い合わせ」をプレビュー画面で開き、実際のページにフォームが反映されているかを確認しましょう。

お問い合わせフォームをプレビューで確認する

5. テスト送信で動作チェック

固定ページ「お問い合わせ」を公開し、完成した「お問い合わせフォーム」へ入力して、実際にテスト送信を行ってみましょう。

ページのURLは(例: https://あなたのサイトドメイン/contact/)です。

  • 管理者宛てに通知メールが届くか
  • 送信者宛てに自動返信メールが届くか
ContactForm7 送受信テスト

テスト送信で「通知メール」と「自動返信メール」が正しく受信できれば、設定は完了です。

次は、「お問い合わせフォーム」へのリンクを設定しましょう。

※送受信のテストでエラーが出たり、メールが届かない場合には、次の点を確認してみましょう。

  • フォームに設定した管理者メールアドレスが正しく入力されているか
  • 送信テストに使ったフリーメール(GmailやYahooメールなど)の迷惑メールフォルダに入っていないか
  • 自動返信メールが届かない場合は、送信者の入力メールアドレスに誤りがないか
  • サーバー側の迷惑メールフィルターに弾かれていないか

それでも解決しない場合は、サーバー側のメール設定が影響していることもあります。詳しくは契約しているサーバーのサポートページを確認してみてください。

6. フッターメニューにリンクを設置する

「お問い合わせフォーム」へのリンクは、どの位置に置いても問題ありませんが、【ヘッダー】【フッター】【サイドバー】などに設置するのが一般的。

今回は【フッター】に表示させる方法を紹介します。

フッターメニューがある場合

すでに【フッター】が表示されている方は、ダッシュボード → 「外観」 → 「メニュー」から「例)フッターメニュー」を選択。

固定ページ内の「お問い合わせ」に☑️チェックを入れ、「メニューに追加」をクリック。

好みの並び順になるようドラッグして位置を決め、メニューを保存します。

フッターメニューがない場合

フッターメニューが表示されていない場合は、新しくフッターメニューを作成しましょう。

ダッシュボード → 「外観」 → 「メニュー」 → 『新しいメニューを作成しましょう。』をクリック。

メニュー名に「 例)フッター 」など、わかりやすい名前を付け、フッターメニューに☑️チェックを入れてメニューを保存します。

お問い合わせフォームのリンクをフッターに設置

フッターに表示させたいページに☑️チェックを入れ、「メニューに追加」をクリック。

お問い合わせフォームのリンクをフッターに設置

メニュー構造内に追加した項目を、お好みの順番になるようドラッグして入れ替えたら、メニューを保存します。

お問い合わせフォームのリンクをフッターに設置

「お問い合わせフォーム」へ、リンクの設置が完了しました。

お問い合わせフォームのリンクをフッターに設置

フッターに正しく表示されているか確認しましょう。

お疲れ様でした

スポンサーリンク

スパムメール対策をしよう

「お問い合わせフォーム」を公開すると、Bot(ボット)による自動投稿で、大量の迷惑メールが届くことがあります。

迷惑メールに困っている図

放置するとどうなるのか……

  • 迷惑なメッセージが大量に届いてしまう
  • 大事なお問い合わせを見落とすことがある
  • サーバーに負担がかかり、動作が遅くなることもある

こうしたトラブルを防ぐために、フォーム公開と同時にスパム対策は必須です。

これまでは、Googleが無料で提供する「reCAPTCHA(リキャプチャ)」が一般的でした。

reCAPTCHA

しかし、現在は月10,000リクエスト※を超える利用で有料化されており、さらに2025年末までに、Google Cloudプロジェクトへの移行も求められています。

※「reCAPTCHA」のリクエスト数は「お問い合わせフォームの送信回数」ではなく、Google に「このアクセスは人間かどうか判定して」と依頼した回数を指します。多くの場合はページの表示やフォーム送信のたびにカウントされるので、アクセス数に近い数字としてイメージしておくとわかりやすいです。

つまり、今後も仕様が変わる可能性が高い……

そこで、これから新しくスパム対策を導入する方には、無料で使いやすい『Cloudflare Turnstile(クラウドフレア ターンスタイル)』がおすすめ。

Contact Form 7 でも公式にサポート・推奨されているので、安心して導入できますし、多くの方が Cloudflare Turnstile へ移行しています。

Contact Form 7 で作成した「お問い合わせフォーム」への設置方法を、詳しく解説していますので、是非こちらの記事もご覧ください。