【Contact Form 7】プラグインを使ってお問い合わせフォームを簡単に作る方法(スパム対策つき)WordPress
![](https://omochi-style.com/wp-content/uploads/2023/09/f4cf21c4a1c33abc210a1a607b590c98.jpg)
こんにちは。おもち(@omochibigaku)です。
こちらのページでは、『Contact Form 7』プラグインをつかって、WordPressサイトのお問い合わせフォームを簡単に作る方法についてわかりやすく解説していきます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
スパム対策についても解説するよ!
お問い合わせフォームをつくる手順
- プラグインをインストールして有効化する
- お問い合わせフォームをつくる
- お問い合わせページをつくる
- スパム対策をする
作業量が多いので、お時間があるときにぜひ。
お問い合わせ専用のメールアドレスがほしい場合は、さきにこちらを済ませてください。
![【Xserver(エックスサーバー)】で独自ドメインのメールアドレスを作成する方法](https://omochi-style.com/wp-content/uploads/2023/09/f7b358a5c2056e3c1b3c7b60e31eed49-320x180.jpg)
STEP1.プラグイン『Contact Form 7』を探そう
![](https://omochi-style.com/wp-content/uploads/2023/08/Slim-Maintenance-Mode7.jpg)
ブログをひらいて、画面左側のメニューにある『プラグイン』にカーソルをもっていき、表示された『新規追加』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/08/Edit-Author-Slug4.jpg)
プラグインを追加する画面がひらきました。
![](https://omochi-style.com/wp-content/uploads/2023/08/Edit-Author-Slug5.jpg)
検索窓に『Contact Form 7』と入力。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form1.jpg)
検索結果に『Contact Form 7』が表示されました。
STEP2.インストールして有効化しよう
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form2.jpg)
『今すぐインストール』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form3.jpg)
『有効化』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form4.jpg)
これで『Contact Form 7』が追加できました。
STEP3.お問い合わせフォームをつくろう
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form5.jpg)
画面左側にあるメニューの『お問い合わせ』にカーソルをもっていき、表示された『新規追加』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form6.jpg)
こちらでお問い合わせフォームをつくっていきましょう。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form7.jpg)
フォームのタイトルには『お問い合わせ』と入力。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
管理しやすい名前であれば何でもOKだよ!
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form8.jpg)
画面右側にある『保存』ボタンをクリック。
サイト運営者に送信されるお知らせメール
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form9.jpg)
『メール』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form56.jpg)
こちらは、お問い合わせがきたときに、サイト運営者にお問い合わせがきたことを教えてくれるお知らせメールになります。
設定する内容は、
- 送信先:サイト運営者(自分)のメールアドレス
- 送信元:そのままでOK
- 題名:そのままでOK
- 追加ヘッダー:そのままでOK
- メッセージ本文:そのままでOK
こんな感じ。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form12.jpg)
送信先が変更できたら、下にスクロール。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form13.jpg)
『保存』ボタンをクリック。
お問い合わせしたユーザーに送信される自動返信メール
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form14.jpg)
『メール(2)』の下にあるチェックボックスにチェック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form15.jpg)
こちらは、お問い合わせしたユーザーに送信される自動返信メールになります。
設定する内容は、
- 送信先:そのままでOK
- 送信元:そのままでOK
- 題名:『【自動返信メール】お問い合わせいただきありがとうございます』に変更
- 追加ヘッダー:削除
- メッセージ本文:そのままでOK
こんな感じ。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form17.jpg)
変更できたら下にスクロール。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form18.jpg)
『保存』ボタンをクリック。
STEP4.お問い合わせページをつくろう
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form23.jpg)
お問い合わせフォームができたので、さっそくお問い合わせページをつくっていきましょう。
画面左側にあるメニューの『固定ページ』にカーソルをもっていき、『新規追加』をクリック。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
お問い合わせページは『固定ページ』で作っていくよ!
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form24.jpg)
固定ページ作成画面がひらきました。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form25.jpg)
お好きなタイトルと本文を入力してください。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form26.jpg)
本文が入力できたら『+』マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form27.jpg)
検索窓に『contact』と入力。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form28.jpg)
検索結果に表示された『Contact Form 7』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form29.jpg)
STEP3でつくったお問い合わせフォームを選択。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form58.jpg)
さいごに、パーマリンクを変更していきます。
画面右上にあるこちらのマークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form30.jpg)
『固定ページ』をクリックして、URLにあるパーマリンクをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form31.jpg)
パーマリンクが『お問い合わせ』になっているので、
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form32.jpg)
『contact』に変更。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form33.jpg)
プレビュー画面で確認しましょう。
画面右上にあるパソコンマークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form34.jpg)
『新しいタブでプレビュー』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form35.jpg)
お問い合わせページが表示されました。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
まちがいがないか確認しよう!
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form36.jpg)
問題なければ、固定ページ作成ページにもどって、画面右上にある『公開』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form37.jpg)
つづけて『公開』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form38.jpg)
これでお問い合わせページは完成です!
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form39.jpg)
参考までに公開したページを表示させる方法についても解説しておきます。
画面左上にあるWordPressのマークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form40.jpg)
お問い合わせにカーソルをもっていきます。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form41.jpg)
『表示』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form35.jpg)
お問い合わせページがひらきました。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form42.jpg)
実際に、テストメールを送信して、動きを確認しておきましょう。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
STEP3で設定した『お知らせメール』や『自動返信メール』が届くか確認しよう!
STEP5.スパム対策をしよう
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form44.jpg)
さいごに、大切なスパム対策をしていきましょう。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/arara.png)
未対策のとき、2秒に1回のペースでスパムメールが届いて大変だったことがあるよ!必ず対策しておこう!
画面左側にある『Advanced Google reCAPTCHA』をクリック。
プラグインがまだ入っていない方は、さきにこちらのSTEP2までを済ませてください。
![スパム攻撃からサイトを守る【Advanced Google reCAPTCHA】プラグインの設定方法|WordPress](https://omochi-style.com/wp-content/uploads/2023/08/ed040153728a83480fa2b89cb11906e7-320x180.jpg)
![](https://omochi-style.com/wp-content/uploads/2023/08/Advanced-Google-reCAPTCHA7.jpg)
設定画面がひらいたら『あなたのドメインを登録』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/08/Advanced-Google-reCAPTCHA8.jpg)
『次へ』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/08/Advanced-Google-reCAPTCHA9.jpg)
パスワードを入力。
![](https://omochi-style.com/wp-content/uploads/2023/08/Advanced-Google-reCAPTCHA10.jpg)
『次へ』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form46.jpg)
Google reCAPTCHAがひらいたら、画面右上にある『+』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form47-2.jpg)
設定していきましょう。
![](https://omochi-style.com/wp-content/uploads/2023/08/Advanced-Google-reCAPTCHA13.jpg)
ラベルにサイトのドメインを入力。
![](https://omochi-style.com/wp-content/uploads/2023/08/Advanced-Google-reCAPTCHA29.jpg)
『https://』は入れなくて大丈夫です。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form48.jpg)
reCAPTCHAタイプは『スコアベース』を選択。
![](https://omochi-style.com/wp-content/uploads/2023/08/Advanced-Google-reCAPTCHA16.jpg)
ドメインの下にある『+』マークをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/08/Advanced-Google-reCAPTCHA17.jpg)
サイトのドメインを入力。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
こちらも『https://』は入れなくて大丈夫だよ!
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form59.jpg)
すべて入力できたら『送信』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form50.jpg)
サイトキーとシークレットキーが表示されるので、それぞれコピーしてください。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form51.jpg)
WordPressにもどって、画面左側のメニューにある『お問い合わせ』にカーソルをもっていき、表示された『インテグレーション』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form52.jpg)
インテグレーション設定ページがひらいたら、下にスクロールしてreCAPTCHAにある『インテグレーションのセットアップ』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form53.jpg)
さきほどコピーしたものをそれぞれ貼りつけてください。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form54.jpg)
貼りつけたら『変更を保存』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Contact-Form55.jpg)
こちらが表示されたらスパム対策は完了です!
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
お問い合わせページが完成したよ!おつかれさまでした!