サイトを運営していく上でお問い合わせフォームは重要なページのひとつです。
特にGoogleアドセンスではチェック項目になっているとも言われているのでGoogleアドセンスをしたい方はかならずお問い合わせフォームを設置しましょう!
今回は初心者でも簡単にお問い合わせフォームを設置できる「Contact Form 7(コンタクトフォーム7)」の使い方を解説していきます。
ぜひ参考にしてみてください。
目次
Contact Form 7をインストールと有効化
まずは管理画面へログインしましょう。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/wordpress-security08.jpg)
左メニューの[プラグイン]-[新規追加]をクリックします。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-01-1024x527.jpg)
- 右上の検索ボックスに「Contact Form 7」と入力します。
- 「今すぐインストール」をクリックします。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-02.jpg)
最後に「有効化」をクリックします。
これでContact Form 7のインストールが完了しました。
お問い合わせフォームを設定する
次はお問い合わせフォームの設定を行います。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-03.jpg)
Contact Form 7を有効化すると左メニューに「お問い合わせ」が追加されます。
左メニューの「お問い合わせ」をクリックしましょう。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-04.jpg)
すでにフォームが一つ作成されています。
「コンタクトフォーム1」をクリックしましょう。
※新規で作成したい場合は上部の「新規追加」をクリックしてください。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-06.jpg)
タイトルが変更できます。
お問い合わせのフォーム画面には表示されないのでこのままでもOKです。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-05.jpg)
フォームの設定項目は4つあります。
タブに分かれていますが各項目の概要は以下になります。
- フォーム – お問い合わせフォームの項目を追加・編集ができます。
- メール – 自動返信メールの設定ができます。
- メッセージ – お問い合わせフォームで表示する文章を編集できます。
- その他の設定 – カスタマイズするためのコードが入力できます。
フォームの設定
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-07.jpg)
まずはフォームから設定していきます。
すでに「氏名」「メールアドレス」「題名」「メッセージ」「送信」の5項目が設定されています。
今回はデフォルトのままでOKですが、項目を追加した場合は「保存」ボタンをクリックします。
メールの設定
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-08-771x1024.jpg)
次に自動返信メールで送られるメッセージ内容を確認します。
こちらもデフォルトのままでOKですが、各項目を説明していくので確認しましょう。
送信先
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-09.jpg)
送信先とはお問い合わせ内容を受け取るメールアドレス(TO)です。
初期値で設定されているメールアドレスは左メニューの[設定]ー[一般]に入力されている管理者メールアドレスです。
変更したい場合はこちらにメールアドレスを入力します。
送信元
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-10.jpg)
送信元とはお問い合わせ内容の送信元メールアドレス(FROM)です。
gmailなどに変更すると届かない可能性が出てくるのでこちらはデフォルトのままでOKです。
題名
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-11.jpg)
題名とはメールの件名です。
デフォルトでは『サイト名+フォームの題名で入力されたテキスト』になります。
『サイト名 お問い合わせがありました』に変更したい場合は下記のように入力します。
[_site_title] お問い合わせがありました
追加ヘッダー
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-12.jpg)
追加ヘッダーはメールの返信先になります。
デフォルトではフォームで入力されたメールアドレスになっています。
こちらはデフォルトのままでOKです。
メッセージ本文
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-13.jpg)
メッセージ本文はメールの本文になります。
デフォルトのままでも問題ありませんが、下記のように変更するとわかりやすいです。
ホームページにお問い合わせがありました。
お問い合わせ内容
====================
氏名: [your-name]
メールアドレス: [your-email]
題名: [your-subject]
メッセージ本文: [your-message]
====================
--
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
ファイル添付
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-14.jpg)
ファイル添付はメール本文にファイルを添付することができます。
今回は空欄のままでOKです。
メール(2)
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-15.jpg)
メール(2)はお問い合わせしたユーザーに自動返信メールを追加するための設定です。
チェックを入れると有効化されます。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-16.jpg)
チェックを入れるとこのような設定項目が表示されます。
基本的にはデフォルトのままでOKですが「題名」「メッセージ本文」は適切な内容に変更しましょう。
変更後の題名
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-17.jpg)
【サイト名】お問い合わせありがとうございます。
変更後のメッセージ本文
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-18.jpg)
※このメールはシステムからの自動返信です
[your-name]様
お問い合わせありがとうございました。
以下の内容でお問い合わせを受付いたしました。
お問い合わせ内容
====================
氏名: [your-name]
メールアドレス: [your-email]
題名: [your-subject]
メッセージ本文: [your-message]
====================
--------------------
ここに署名を入れる
--------------------
最後に画面下の「変更」ボタンをクリックしてください。
メッセージの設定
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-19.jpg)
メッセージではお問い合わせフォームで表示されるメッセージを変更できます。
デフォルトのままでOKです。
変更した場合は「保存」ボタンをクリックしてください。
その他の設定
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-20.jpg)
その他の設定ではコードを入れることで機能を追加することができます。
今回はデフォルトのままでOKですが、以下のようなことができます。
- 解析タグの追加する
- お問い合わせの完了画面を表示させる
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-21-1024x378.jpg)
- 設定を変更したら「保存」をクリックします。
- ショートコードが表示されているのでコピーします。
お問い合わせフォームを固定ページに設置する
続いて固定ページを追加していきます。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-22.jpg)
左メニューの[固定ページ]ー[新規追加]をクリックします。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-23-1024x512.jpg)
- まずはタイトルを入力しましょう。
今回は「お問い合わせ」にしました。 - 上部の「+」アイコンをクリックします。
- ウィジェットの中にある「ショートコード」をクリックします。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-24-1024x543.jpg)
- ショートコードの入力画面が表示されたら先ほどコピーしたショートコードを貼り付けます。
- 右上の「公開」ボタンをクリックします。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-25.jpg)
最後にお問い合わせページにアクセスしてみましょう。
お問い合わせフォームが表示されていれば完了です!
Contact Form 7でのスパム対策
お問い合わせフォームを設置するとスパムが届くことがあります。
「Google reCAPTCHA」を設定することでスパムを防ぐことができるのでスパムに困っている方は設定しましょう。
まずはGoogle reCAPTCHA のページへアクセスしサイトの情報を登録します。
サイトの登録が完了すると「サイトキー」と「シークレットキー」が発行されます。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-26.jpg)
左メニューの[お問い合わせ]-[インテグレーション]をクリックします。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-27.jpg)
「インテグレーションのセットアップ」をクリックします。
![](https://ayuko-blog.com/wp/wp-content/uploads/2021/03/contact-form-7-28.jpg)
先ほど発行された「サイトキー」と「シークレットキー」を入力します。
入力が完了したら「変更を保存」をクリックします。
これでGoogle reCAPTCHAの設定は完了です。
まとめ
さて、いかがでしたでしょうか?
お問い合わせフォームをを自力で作る場合、プログラムの知識やいろいろな設定が必要です。
Contact Form 7を使えば簡単にお問い合わせフォームを作成できるのでぜひ、チャレンジしてみてください