サイトの表示速度を早くする「EWWW Image Optimizer」プラグインでjpeg画像をWebPへ変換
designchips
DesignChips
Contact Form 7の基本と設定方法
designchips
WordPressでサイトやブログを運営している多くの方が、お問い合わせフォームを設置する際に利用しているプラグイン「Contact From 7」。これまで何となくプラグインを利用していましたが、改めてContact Form 7の基本的な使い方をまとめてみました。
Contents
Contact Form 7とは
Contact Form 7とは、WordPressで作成したホームページやブログに「お問い合わせフォーム」を設置するための便利なプラグインです。
無料で利用できる、お問い合わせフォーム用のプラグインはいくつかありますが、その中で群を抜いて利用者が多く、知識が少なくても導入しやすいのが特徴です。
入力項目のカスタマイズや自動返信メールの設定、サンキューページの設定なども可能で、これだけ使っていればとりあえずOKとも言えるでしょう。
Contact Form 7をインストールして有効化
まずは、「プラグインを追加」から「Contact Form 7」をインストールして有効化します。
お問い合わせフォームを作成する
「お問い合わせ」から「コンタクトフォームを追加」をクリックします。
フォーム編集部分に「氏名（必須）」「メールアドレス（必須）」「題名（必須）」「メッセージ本文」の項目が、はじめから入力されています。
初期設定のままで利用すると、下図のようなフォームが表示されます。
実際は、運営するサイトやブログによって、収集したいお問合せ項目は違うと思いますので、適宜カスタイズした方が良いと思いますが、ここでは一旦デフォルト設定で話を進めていきます。
自動返信メールを設定する
お問い合わせ内容が「送信」されると、その内容がWordPressに登録してあるメールアドレスに送信されます。また、お問い合わせをした本人にも、入力内容の確認も含め自動的にメールが送信されます。
| 送信先 | 「お問い合わせを受信するメールアドレス」を指定します。初期値は [_site_admin_email] となっておりWordpress管理者メールアドレスが設定されています。 |
| 送信元 | 「どのサイトのフォームからお問い合わせが送信されたのか」をしています。初期値は [_site_title] xxxx@sample.comサイトタイトル＜管理者メールアドレス＞が設定されています。 |
| 題名 | 「メールタイトルを指定」します。初期値は [_site_title] “[your-subject]” になっており、サイトタイトル 題名となっています。題名によりわかりにくいタイトルになってしまう可能性があるので、[_site_title] から、お問い合わせがありました。のようにどのサイトのお問い合わせメールだとすぐにわかるような内容に変更した方がよいでしょう。 |
| 追加ヘッダー | お問い合わせで受信したメールに返信をする際の「送信先を設定」できます。初期値は Reply-To: [your-email] となっており、送信先にお問い合わせ者が入力したメールアドレスに送信される設定になっています。 |
| メッセージ本文 | お問い合わせを受信した際の「メール本文に記載される内容を指定」します。 ▼初期値は以下のようになっています 差出人: [your-name] [your-email] 題名: [your-subject] メッセージ本文: [your-message] — 本メールはあなたのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信があったことをお知らせするものです。 ▲ここまで [your-name]にお問い合わせ者の氏名 [your-email]にお問い合わせ者のメールアドレス メッセージ本文:[your-message]に、お問い合わせの内容が入力されます |
初期設定のままでも、お問い合わせはきちんと送信され、送信先のメールアドレスに送られてきます。
ただし、若干シンプルすぎてお問い合わせに消極的な印象を与え、お問い合わせをしようと思ったお客様が「何となく躊躇してしまう可能性もある」ので、タイトルの付け方や項目内容についてはカスタマイズをした方が良いでしょう。
お客様への自動送信メールの設定
お問い合わせ者本人に、お問い合わせがきちんと送信されたことをお知らせすることにより安心感が生まれますので、自動送信メールも設定しておくと良いでしょう。
メール設定画面の下の方に「メール(2)」という項目があります。「メール(2)を使用」にチェックを入れると、下図のような設定画面が開きます。
| 送信先 | お問い合わせフォームに「お客様が入力したメールアドレス」を指定します。初期値は [your-email] となっているので、そのまま変更なしでOKです。 |
| 送信元 | 「お客様に送信されるメールの送信元を設定」します。初期値は [_site_title] <xxxx@sample.com>となっているので、こちらも変更なしOKです。 |
| 題名 | 「お客様に送信されるメールのタイトルに表記される内容を指定」します。初期値は [_site_title] “[your-subject]” となっており、「サイトタイトル 〇〇について」のようになっていますので、題名によりわかりにくいタイトルになってしまう可能性があるので、[_site_title] お問い合わせありがとうございました。のように自動返信メールだとすぐにわかるような内容に変更した方がよいでしょう。 |
| 追加ヘッダー | 「自動返信メールに返信をする際の送信先を設定」できます。初期値はReply-To: [_site_admin_email]となっており、送信先にサイト管理者のメールアドレスに送信される設定になっています。 |
| メッセージ本文 | 「自動返信メールの本文を指定」します。 ▼初期値は以下のようになっています メッセージ本文: [your-message] — あなたのメールアドレスを使用して、私たちのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信がありましたので、その控えとして本メールを送ります。もしもその送信について心当たりのない場合は、どうぞこのメッセージを無視してください。 ▲ここまで [your-message]にお客様が入力したお問い合わせ内容の「メッセージ本文」が入力されます こちらもこのままだと機械的過ぎる文章に感じてしまうので、例えば以下のような内容に変更しても良いと思います。 ▼変更例 [your-name] 様 この度は [_site_title] にお問い合わせいただきありがとうございます。 後程、担当者よりご連絡をさせていただきます。 ※2～3営業日内でご連絡をさせていただきますので今しばらくお待ちくださいませ。 ■ メールアドレス [your-email] ■ 題名 [your-subject] ■ お問い合わせ内容 [your-message] ——————————– [_site_title] 管理者 サイトURL ——————————– ▲ここまで |
ここまで入力が完了したら「保存」をクリックします。
メッセージを確認＆編集する
Contact Form 7でお問い合わせを「送信」すると、送信完了のタイミングで下図のような「テキストでメッセージが表示される」ようになっています。
このように、いくつかのユーザーのアクションによって表示されるテキストメッセージを各所、指定できますので「メッセージ」タブから編集してみてください。
ここまで設定が完了しましたら、実際にお問い合わせページにフォームを設置していきましょう。
お問い合わせページ（固定）にフォームを設置する
新規で固定ページを作成し、先程作成したフォームを設置します。コンタクトフォームの編集画面に記載されている「ショートコード」をコピーします。
下図のピンク枠内の{contact-form-7…}の部分をコピーします。
固定ページのタイトルは「お問い合わせ」として、本文にブロックタイプの「ショートコード」を挿入します。
実際に送信されるお問い合わせメールを確認
実際にお問い合わせページ（固定）に作成したフォームを設置できましたので、試しにテストしてみましょう。
以下のような内容でテスト送信してみます。。
サイト管理者に送られているお問い合わせメール
サイト管理者に送られてくるお問い合わせメールは、下図のようになりました。
お問い合わせをしたお客様に自動返信されるメール
お問い合わせ者自身に届く、自動返信メールは下図のような内容です。
初期値のままでも送受信はできますが、少しのカスタマイズでお問い合わせ内容が確認しやすくなります。
まとめ
今回は誰もが知っている「Contact Form 7」の基本設定について解説してきましたが、皆が知りたいのは無料プラグインでどこまで自分好みにカスタマイズができるのか？だと思います。このContact Form 7も無料で見た目デザインや質問項目の設定など、どこまで拡張できるのか知りたい！またカスタマイズ方法を知りたい！という人が多いと思いますので、また別の記事でその辺は解説していけたらと思います。
