WordPressにお問い合わせフォームを設置するなら「ContactForm7」というプラグインを使って設置するのが簡単です!
また、スパム対策にGoogle reCAPTCHAと連携・設定する方法も併せて説明します。
お問い合わせフォームの設置自体の緊急性は高くないですが、設置しておくと色々メリットがあります。
- メールアドレスを公開しなくて良い
- クローズドASPから登録しないかと連絡が来る
- 企業から仕事の依頼が来る
- アドセンス審査の時にはプライバシーポリシーページと共に必須
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
初めて設置する方にも分かりやすいように順を追って説明します!
ContactForm7の設定方法と作り方
![プラグイン追加画面](https://blog-mikage.com/wp-content/uploads/544d1c700c28a7cc173345bd4070c121.jpg)
![プラグイン追加画面](https://blog-mikage.com/wp-content/uploads/544d1c700c28a7cc173345bd4070c121.jpg)
- WordPress管理画面→「プラグイン」→「新規追加」でプラグインを追加画面を開く
- キーワードにContactForm7と入れて検索
- 「今すぐインストール」→「有効化」ボタンを押してプラグインを有効化する
![コンタクトフォームの設定画面へアクセスする](https://blog-mikage.com/wp-content/uploads/9d91f84476c0d9cc741fa4d7ed7b8441-1.jpg)
![コンタクトフォームの設定画面へアクセスする](https://blog-mikage.com/wp-content/uploads/9d91f84476c0d9cc741fa4d7ed7b8441-1.jpg)
- ContactForm7はWordPress管理画面→「お問い合わせ」→「コンタクトフォーム」から設定できます
- デフォルトで「コンタクトフォーム1」という物が作られていますので、ここをクリック(※キャプチャ画像は名称を変更したあとなので「お問い合わせ」になっています)
![「コンタクトフォームの編集」画面](https://blog-mikage.com/wp-content/uploads/400db6cf388a011a7b3eb3127d76b773.jpg)
![「コンタクトフォームの編集」画面](https://blog-mikage.com/wp-content/uploads/400db6cf388a011a7b3eb3127d76b773.jpg)
「コンタクトフォームの編集」画面が開きますので、ここから設定していきます。
![「フォーム」タブの設定](https://blog-mikage.com/wp-content/uploads/92f42e63d37737dc2e7f28d7f583e2b1.jpg)
![「フォーム」タブの設定](https://blog-mikage.com/wp-content/uploads/92f42e63d37737dc2e7f28d7f583e2b1.jpg)
- デフォルトだと「コンタクトフォーム1」となっているので、「お問い合わせ」など好きな名称に変更しておきます
- フォームの設定はデフォルトのままで最低限の情報は揃っているのでこのままで大丈夫です
- ①で名称を変更した場合は忘れずに保存しておきましょう
- 氏名
- メールアドレス
- 題名
- メッセージ本文
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
基本項目はバッチリ入ってます!
![「メール」タブ](https://blog-mikage.com/wp-content/uploads/b943ae3730ad6f85839589390ffea42f.jpg)
![「メール」タブ](https://blog-mikage.com/wp-content/uploads/b943ae3730ad6f85839589390ffea42f.jpg)
ここもデフォルトのままでOKです。
- 送信先:WordPressに登録してある管理者メールアドレス(※)の事です。違うアドレスにしたい場合は直接ここにメールアドレスを記入してもOKです。
- 送信元:「ブログ名」+「WordPress@ブログURL」からメールが送信されます。
- 題名:実際にメールが届いた時のタイトルです。「ブログ名」+「問い合わせしてきた人が入力したタイトル」になります。
- 追加ヘッダー:CCやBCCのことです。別のメールアドレスにも同時に送りたい場合、メールアドレスを追加できます。
- メッセージ本文:問い合わせしてきた人が入力したメール本文が反映されます。編集したい場合は[your-message]だけは消さないように注意。
![管理者メールアドレスの場所](https://blog-mikage.com/wp-content/uploads/b02fd2c086a31b05b50d07a1c46f8660.jpg)
![管理者メールアドレスの場所](https://blog-mikage.com/wp-content/uploads/b02fd2c086a31b05b50d07a1c46f8660.jpg)
![「メッセージ設定」タブ](https://blog-mikage.com/wp-content/uploads/e48df1396defd15c70d1a90e2b195cd2.jpg)
![「メッセージ設定」タブ](https://blog-mikage.com/wp-content/uploads/e48df1396defd15c70d1a90e2b195cd2.jpg)
ここもデフォルトのままでOKです。
お問い合わせフォームからメッセージが送信された、または入力に不備があったなどの時に返される文言です。
修正するとしたら赤枠で囲った部分でしょうか。好きな言い回しがある場合は変更しましょう。
保存ボタンを押すのを忘れないようにしてください!
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
以上でタブの設定は終わりです!
「その他の設定」タブはそのままで大丈夫です。
設定が終わったのであとはブログにフォームの設置すればすぐ使えるのですが、その前にスパム対策をします。
スパム対策はあとからやるから、先にフォームの設置を済ませてしまいたいという方はこちら
フォーム設置の前にreCAPTCHAの設定もしておこう!
reCAPTCHAとは何か
reCAPTCHAはGoogleが提供しているスパム対策システムです。
お問い合わせフォームやコメントを送信する時に、「私はロボットではありません」のチェックを入れたり、複数画像の中から「車を選んでください」といった指示に従ったりした経験があると思います。
このようにして、無差別・機械的に大量の迷惑メールを送ってくる輩から保護してくれます。
この仕組みをこれから設置するお問い合わせフォームにも連携させ、スパム対策をする事をおすすめします!
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
スパム対策していないと迷惑メールが結構届きます…
reCAPTCHAの設定手順解説
![Google reCAPTCHA設定画面](https://blog-mikage.com/wp-content/uploads/52d9f6cacf6cc7fad907345f531370ea.jpg)
![Google reCAPTCHA設定画面](https://blog-mikage.com/wp-content/uploads/52d9f6cacf6cc7fad907345f531370ea.jpg)
- ラベル:管理名です。なんでもOKですがブログの名前やドメインにしておくと後から分かりやすいです。(日本語OK)
- reCAPTCHAタイプ:reCAPTCHA v3にチェック
- ドメイン:お問い合わせフォームを設置しようとしているブログのドメインを入力
![Google reCAPTCHA設定画面](https://blog-mikage.com/wp-content/uploads/14c35f96f7e16fb0946f8f7b65923d39.jpg)
![Google reCAPTCHA設定画面](https://blog-mikage.com/wp-content/uploads/14c35f96f7e16fb0946f8f7b65923d39.jpg)
- reCAPTCHA利用条件に同意する:チェック
- アラートをオーナーに送信する:チェック(入れなくてもOK)
- 送信ボタンを押す
![登録完了画面](https://blog-mikage.com/wp-content/uploads/eae0712dae105e18809d7ee7ca4cbd1c.jpg)
![登録完了画面](https://blog-mikage.com/wp-content/uploads/eae0712dae105e18809d7ee7ca4cbd1c.jpg)
ブログが登録されたという登録完了画面が出ます。
ここに表示されている「サイトキー」と「シークレットキー」がこの後必要になるので、画面を閉じずに次のステップへ。
![外部 API とのインテグレーション画面](https://blog-mikage.com/wp-content/uploads/12f0c7691899f3e344be5216a8512e60.jpg)
![外部 API とのインテグレーション画面](https://blog-mikage.com/wp-content/uploads/12f0c7691899f3e344be5216a8512e60.jpg)
- WordPress管理画面→「お問い合わせ」→「インテグレーション」から外部 API とのインテグレーション画面を開きます
- 画面をスクロールすると下の方にreCAPTCHA項目があります。「インテグレーションのセットアップ」ボタンを押します。
![外部 API とのインテグレーション reCAPTCHA画面](https://blog-mikage.com/wp-content/uploads/8924844327e202a4e4d00606a42f68e2.jpg)
![外部 API とのインテグレーション reCAPTCHA画面](https://blog-mikage.com/wp-content/uploads/8924844327e202a4e4d00606a42f68e2.jpg)
- サイトキーを貼り付けます(STEP3の画面からコピー)
- シークレットキーを貼り付けます(STEP3の画面からコピー)
- 「変更を保存」ボタンを押します
![reCAPTCHAが有効化された確認画面](https://blog-mikage.com/wp-content/uploads/bed5aacdd1256ddcdcbdfb912df5fdd7.jpg)
![reCAPTCHAが有効化された確認画面](https://blog-mikage.com/wp-content/uploads/bed5aacdd1256ddcdcbdfb912df5fdd7.jpg)
reCAPTCHAが登録したブログで有効化されました。
ここまでの作業で、フォームの設定とスパム対策が完了しました。
次のステップで実際にお問い合わせフォームをブログに設置します!
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
もう少しなので頑張りましょう!
お問い合わせフォームを設置する
![コンタクトフォームの編集画面](https://blog-mikage.com/wp-content/uploads/43699c285fd3f411a355da53c6406caf.jpg)
![コンタクトフォームの編集画面](https://blog-mikage.com/wp-content/uploads/43699c285fd3f411a355da53c6406caf.jpg)
- WordPress管理画面→「お問い合わせ」→「コンタクトフォーム」→「ContactForm7の設定方法と作り方」で作っておいたフォームを開く
- ショートコードをコピーする
![固定ページに設置する](https://blog-mikage.com/wp-content/uploads/300e20400cae8096f4b88e1d216547a5.jpg)
![固定ページに設置する](https://blog-mikage.com/wp-content/uploads/300e20400cae8096f4b88e1d216547a5.jpg)
- WordPress管理画面→「固定ページ」→「新規追加」で新しい固定ページを作ります
- タイトルに「お問い合わせフォーム」や「お問い合わせ」などお好きなページ名を付けます
- STEP1でコピーしたショートコードを本文内に貼り付けます
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
ブロックエディターを使用している場合は、カスタムHTMLというブロックを使ってショートコードを貼り付ければうまくいくよ!
![カスタムHTML](https://blog-mikage.com/wp-content/uploads/8556a68da4a667aa69c1288cd7e1b70b.jpg)
![カスタムHTML](https://blog-mikage.com/wp-content/uploads/8556a68da4a667aa69c1288cd7e1b70b.jpg)
![お問い合わせページのプレビュー](https://blog-mikage.com/wp-content/uploads/15a6e4eb3716bd5ef2462998ad8453ac.jpg)
![お問い合わせページのプレビュー](https://blog-mikage.com/wp-content/uploads/15a6e4eb3716bd5ef2462998ad8453ac.jpg)
STEP2で作った固定ページをプレビュー表示します。
ショートコードをきちんと設置できていればこのようになっているはずです。
STEP3で開いたプレビュー画面から動作確認を行ってみましょう。
名前やメールアドレスを入力し、設定したメアドに届けばきちんと動作しています。
作った固定ページは「公開」します。
未公開(下書き保存)のままにしておかないよう注意。
次に、お問い合わせフォームを設置した固定ページをブログのグローバルメニューやサイドバーなどからアクセスできるように設定していきます。
お問い合わせページの公開
グローバルナビゲーションに追加する方法
![メニュー編集画面](https://blog-mikage.com/wp-content/uploads/6125d0424fa7063d0ce93c0b43e88457.jpg)
![メニュー編集画面](https://blog-mikage.com/wp-content/uploads/6125d0424fa7063d0ce93c0b43e88457.jpg)
- WordPress管理画面→「外観」→「メニュー」からメニュー管理画面を開きます
- 「メニュー項目を追加」の所に固定ページ項目があります。先ほど作成したお問い合わせフォームのページがありますので、チェックを入れます
- 「メニューに追加」ボタンを押します
![](https://blog-mikage.com/wp-content/uploads/80969b723be98d5f39cd624e409de7b7.jpg)
![](https://blog-mikage.com/wp-content/uploads/80969b723be98d5f39cd624e409de7b7.jpg)
- メニュー構造に固定ページが追加されました。位置は自由に調整可能です。
- 「メニューを保存」ボタンを押します
![](https://blog-mikage.com/wp-content/uploads/f46cd1d0d791c6380bdf33c02e3795f5.jpg)
![](https://blog-mikage.com/wp-content/uploads/f46cd1d0d791c6380bdf33c02e3795f5.jpg)
ブログを見に行くとグローバルナビゲーションにお問い合わせフォームが追加されています。
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
お疲れ様でした~~!!
【まとめ】お問い合わせフォームはあった方がいい
ブログ運営をするならお問い合わせフォームは設置しておいた方が良いです。
ブログで稼ぐ事を目的とするなら尚更です。
- メールアドレスを公開しなくて良い
- クローズドASPから登録しないかと連絡が来る
- 企業から仕事の依頼が来る
- アドセンス審査の時にはプライバシーポリシーページと共に必須
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
![](https://blog-mikage.com/wp-content/uploads/584eb3371619fe7b8d139bf8eab2eb5b.jpg)
SNSのDMでもいいけど、何らかの連絡手段は設置しておきたいですね
お問い合わせフォーム以外にも作っておいた方がいい物がありますので、まだの方は下記の記事を参考になさってください。
![](https://blog-mikage.com/wp-content/uploads/1c03730856a377fd3dd127b884651a5f.png)
![](https://blog-mikage.com/wp-content/uploads/1c03730856a377fd3dd127b884651a5f.png)