ブログサイトに「お問い合わせフォーム」を作りたいです。
1から作るのは難しそうです。。
何か簡単に始める方法はありませんでしょうか？
今回はこのようなお悩みにお答えします。
サイトを持つと読者に対して、感想や意見、商品販売ならそのアフターサービスなど、サイト運営には「お問い合わせページ」は欠かすことはできないものです。
1から作るとすれば、PHPなどの言語を知らなくてはならず、その知識がなければかなり手間がかかります。
しかし、今回ご紹介するWordPressの定番プラグイン「Contact Form 7」を使えば、用途に合わせたお問い合わせページを簡単に作成することが可能となります。
この記事でわかること
- Contact Form 7 とは？
- Contact Form 7 を使うメリット
- Contact Form 7 のインストール方法
- Contact Form 7の初期設定方法
- Contact Form 7のカスタマイズ方法
のラインナップとなります。
簡単に設定することできますので、早速始めていきましょう！
目次
Contact Form 7 とは？
Contact Form 7 とは、Takayuki Miyoshi 氏が作成した WordPress にお問い合わせフォームを設置するためのプラグインです。
日本だけでなく、海外でも広く使われている評価の高い定番のツールです。
特徴
- コンタクトフォーム用の WordPress プラグイン
- 各種メッセージをカスタマイズ
- スパムやロボットをブロックするための Google reCAPTCHA との連携
フォームを作るために、HTML や PHP などで作成する必要はなく、Contact Form 7 で生成されるショートコードを投稿ページに挿入するだけで設置することができます。
フォームの作り方は難しそうに見えますが、手順を踏めば簡単に作成することができます。
そう、それがプラグインの役割なんですよね
Contact Form 7 を使うメリット
使うメリット
- 導入や設定が簡単
- 多様なカスタマイズが可能
- 自動返信メールなどの設定も可能
- 利用者が多いため、設定につまづいてもネットに情報がたくさんある
Contact Form7 の使い方
Contact Form 7 のインストールから作成方法、設定方法まで順を追って解説していきます。
設定順序
- プラグインのインストール
- お問い合わせフォームの作成
- お問い合わせフォームの設定
- フォームのカスタマイズ
それでは早速はじめていきましょう！
プラグインのインストール
初めに WordPress に プラグイン Contact Form 7 をインストールします。
step
1管理画面のダッシュボードから「プラグイン」 →「 新規追加」をクリック
step
2検索窓から「Contact Form 7」→ 「今すぐインストール」をクリック
step
3その後「有効化」をクリック
これで「インストール」と「有効化」が終わり、Contact Form 7 を使う準備が整いました。
3クリックで完了するので簡単ですよ！
お問い合わせフォームを作成する
さて、これから Contact Form 7 でフォームの作成をしていきます。
step
1ダッシュボードから「お問い合わせ」→ 「新規追加」をクリック
先の「有効化」が完了していると、ダッシュボードのサイドバーのメニューに「お問い合わせ」が追加されているので、そこから「新規追加」をクリックします。
すると、次のようなフォームが表示されます。(初期表示)
フォームの初期画面には、「氏名」「メールアドレス」「題名」「本文」といった必要最低限の項目が設けられています。
簡易的なコンタクトフォームなら、このままの設定で申し分ありません。
このまま追加する項目がなければ、下記の「保存」をクリックしてフォーム作成は完了です。
続いて、このフォームを固定ページなどに「お問い合わせ」として設置する作業を進めていきます。
step
2ダッシュボードから「お問い合わせ」→ 「コンタクトフォーム」をクリック
step
3「コンタクトフォーム 1」の右側にある[]内のショートコードをコピー
※「コンタクトフォーム1」はプラグインを有効化させた時点で自動的に作成されています。
中身は新規追加で表示されたフォームの内容と同じです。
step
4事前に作成した固定ページ「お問い合わせ」にショートコードをコピペ
step
5プレビューを表示して「お問い合わせフォーム」の確認
このような順序を経ることで、簡単にお問い合わせフォームを作ることができました。
このままでも十分使うことはできますが、次のように基本的な設定をしていきましょう。
お問い合わせフォームを設定する
基本的な設定として、「フォーム」「メール」「メッセージ」「その他の設定」を見ていきます。
フォームの設定
こちらのフォームの設定で、細かくカスタマイズが行えます。
文章を追加することで、先ほどの「お問い合わせフォーム」の欄を増やし充実したフォームを作ることができます。
フォームの入力欄はタグ形式になっているので、使いこなそうとするとHTMLをある程度理解しておく必要があります。
詳細なカスタマイズ方法は次の項目で解説します。
①メールの設定
「メールの設定」では、ユーザーから問い合わせがあった時に管理者に通知するためのメールを設定できます。
後半では、ユーザーに自動返信するためのメール設定を構成します。
具体的には、以下の項目をカスタマイズできます。
| 項目 | 説明 |
| ① 送信先 | 管理者通知の送信先となるメールアドレス(To)を入力します。 つまり、管理者(自分)に送ってほしいメールアドレスです。  こちらは、デフォルトでWordPressインストール時に「管理者メールアドレス」で設定したアドレスのショートコードが入っています。 自分が実際に受け取りたいメールアドレスへと変更しましょう。 |
| ② 送信元 | 管理者通知メールの送信元メールアドレス(From)を入力します。 デフォルトでは「wordpress@ドメイン名」になっています。  その前にあるタグ [_site_title] にはサイトタイトルが入り、送信元メールの表示名となります。 (※)送信元アドレスは、「xxx@ドメイン名」であることが望ましいです。 なぜなら、例えば gmail や yahoo のメールアドレスドメインを送信元アドレスに設定してしまうと、スパムメールや偽装したメールだと勘違いされてしまうからです。 ユーザーからすると、メールアドレスにドメイン名が指定されていると、疑いもなく安心できることでしょう。 |
| ③ 題名 | 管理者に通知するための「メール件名」を設定します。 [_site_title]にはサイトタイトルが入り、[your-subject]にはユーザー自身が問い合わせフォームに入力した題名が入ります。  デフォルトでは先頭がサイトタイトルとなっているので、[_site_title]を削除して、 「ホームページからのお問い合わせ」や「お問い合わせを受け付けました」などの文言を入れると分かりやすくなります。 |
| ④ メッセージ本文 | ユーザーが問い合わせフォームから入力した際に、通知される「メール本文」の構成をします。 デフォルトではやや不親切な表示となるので、メッセージ本文を分かりやすいものへと変更してみましょう。 ✔️ デフォルト  ⬇︎⬇︎⬇︎ ✔️ 見やすいように変更  |
| (注1)メールタグ | 「メールタグ」には、サイト訪問者がお問い合わせフォーム内に入力したものが反映されます。 例えば、[your-name] はサイト訪問者が入力した自身の名前、[your-email] はサイト訪問者が入力した自身のアドレスが表示されることになります。 |
| (注2)追加ヘッダー | 追加ヘッダー「Reply-To」を設定すると、メールの返信ボタンを押した際、宛先に Reply-To に設定したメールアドレスがセットされます。基本はこのままで問題ありません。 この場合、返信ボタンを押すと、訪問者のメールアドレスがセットされることになります。 |
もし、メール受信の具合を確かめようと思った場合、自身のサイトのお問い合わせフォームから受信用のアドレスなどを設定して検証することも良い方法だと思います。
②自動返信メールの設定
続いて、訪問者(ユーザー)に対してお返しする「自動返信メール」の設定をしていきます。
先ほどご紹介したメール設定の下部分にある「メール (2) を使用」にチェックを入れると訪問者に自動返信メールを設定することができます。
▼
▼
チェックを入れると、下のように自動返信メールの設定をすることができます。
| 項目 | 説明 |
| ① 送信先 | 自動返信先のメールアドレスになります。 つまり、訪問者宛に送るメールアドレスとなります。  ここでは、デフォルトで メールタグである[your-mail] が使われており、訪問者宛に届くように設定されています。特に問題はないので、このままでOKです。 |
| ② 送信元 | 自動返信メールの送信元メールアドレスを設定します。 デフォルトでは「wordpress@ドメイン名」になっています。 その前にあるタグ [_site_title] にはサイトタイトルが入り、訪問者が問い合わせた際のサイト名となります。 (※)送信元アドレスは、「xxx@ドメイン名」であることが望ましいです。 なぜなら、例えば gmail や yahoo のメールアドレスドメインを送信元アドレスに設定してしまうと、スパムメールや偽装したメールだと勘違いされてしまうからです。 ユーザーからすると、メールアドレスにドメイン名が指定されていると、疑いもなく安心できることでしょう。 |
| ③ 題名 | 訪問者に通知するための「メール件名」を設定します。 [_site_title]にはサイトタイトルが入り、[your-subject]にはユーザー自身が問い合わせフォームに入力した題名が入ります。 デフォルトでは先頭がサイトタイトルとなっているので、[_site_title]を削除して、「お問い合わせを受け付けました」などの文言を入れるとユーザーにとって安心感が増します。 |
| ④ メッセージ本文 | ユーザーが問い合わせフォームから入力した際に、ユーザ自身に返信する「メール本文」の構成をします。 デフォルトではやや不親切な表示となるので、メッセージ本文を分かりやすいものへと変更してみましょう。 ✔️ デフォルト  ⬇︎⬇︎⬇︎ ✔️ ユーザーに分かりやすいように変更  |
| (注1)メールタグ | 「メールタグ」には、サイト訪問者がお問い合わせフォーム内に入力したものが反映されます。 例えば、[your-name] はサイト訪問者が入力した自身の名前、[your-email] はサイト訪問者が入力した自身のアドレスが表示されることになります。 |
| (注2)追加ヘッダー | 追加ヘッダー「Reply-To」を設定すると、メールの返信ボタンを押した際、宛先に Reply-To に設定したメールアドレスがセットされます。基本はこのままで問題ありません。 デフォルトでは、[_site_admin_email] となっており、管理者が設定した「管理者メールアドレス」となります。 「②送信元メールアドレス」でやりとりをするなら、このままで構いません。 しかし、「②送信元メールアドレス」でやりとりをせず他宛てで行いたい場合は、返信用のメールアドレスを指定します。  |
メッセージの設定
「メッセージ」の設定では、訪問者がコンタクトフォームを通じて送信し終わった際に、表示するメッセージの編集が行えます。
こちらに書かれてある文言はデフォルトで設定されているものです。これを編集することでお好きなメッセージを伝えることができます。
- HTML タグなどはメッセージ中に使うことはできない。
- Contact Form 7 のメールタグはメッセージ中に使うことができる。
(※)例えば、[your-name]など。
その他の設定
「その他の設定」では、専用コードを追加することで問合わせフォームの機能をアップさせることができます。
通常で使う分には必要ない項目ですので、飛ばしてもOKです。
＞＞追加の設定
フォームのカスタマイズ
次に、お問い合わせフォームの入力項目を追加する方法を解説していきます。
「フォーム」の設定画面では赤枠の項目のテンプレートを編集することで、お問い合わせフォームの項目を追加することができます。
今回は追加項目として、「電話番号」を選んでみます。
step
1追加挿入部分の行間を空ける
step
2カーソルをそのままにして、「電話番号」ボタンをクリック
step
3「フォーム生成タグ」を編集
入力項目の記入を任意ではなく必須にしたいのであれば、「必須項目」にチェックを入れます。
次に名前について、デフォルトでは「tel-xxxx」のような名前で設定されていますが、分かりやすい名前として「your-tel」に変更するのが良いでしょう。
名前を入力すると、下部の欄にタグが自動生成されます。それを確認して「タブを挿入」をクリックします。
step
4フォームタグが追加されていることを確認する
電話番号のフォームタグが追加されていることを確認しましょう。
step
5タグやラベル、文言の編集をして保存
他の項目と同様に、「文言やタグ」を合わせるように追記しましょう。
▼
▼
この時点で、見た目お問い合わせフォームのボックスは「電話番号」が追加されていますが、管理者が受け取るメールには訪問者が入力した「電話番号」は表示されません。
そこで、「メール」設定で新たに追加したタグ [your-tel] を使い編集しなくてはなりません。
step
6「メール」設定でタグを追記していく
先の設定を「保存」したあと、メール設定の項目に移ります。
先ほど追加した [your-tel] がタグとして利用できるようになっています。これをコピーして次で貼り付けましょう。
管理者通知メールの本文に追記する。
自動返信メールの本文に追記する。
特にステップ6 での作業を行わないと、電話番号入力ボックスは追加されているけれど、受信したメールや相手方の自動返信メールには電話番号の記載がされない、などの問題を起こしてしまいます。
お問い合わせフォームからテスト送信してみて、思った通りの動作を行うかどうか検証してみましょう！
Contact Form 7 を強化する方法やプラグイン
Contact Form 7 をより使いやすく強化させるためには、別途プラグインや機能を追加する必要があります。
プラグインについては、また後ほどご紹介しようと思います。
【スパム対策】「Google reCAPTCHA」
問い合わせフォームを設置していると、スパムメールの対象となりやすく対策を講じる必要性が生じてきます。
reCAPTCHA は Google の無料サービスツールであり、アカウントを所持していると簡単に設定することができます。
この reCAPTCHA をContact Form 7 に実装することで、Googleがスパムメールかどうかを判断して遮断したりサイトを保護してくれます。
Contact Form 7 の公式サイトにも解説がされていますので、参考にしてみてください。
＞＞reCAPTCHA (v3) and Contact Form 7
Contact Form 7 に Google reCAPTCHA を実装する方法については、こちらの記事で詳しく解説しています。ご参考にしていただければと思います。
-
-
【スパム対策】Contact Form 7 に reCAPTCHA v3を導入しよう！
続きを見る
まとめ：定番プラグインを導入しよう！
今回は、WordPress プラグイン Contact Form 7 を利用してお問い合わせフォームを作成する方法を解説してきました。
設定の手順としては次のようでした。
- プラグインのインストール
- お問い合わせフォームの作成
- お問い合わせフォームの設定
- フォームのカスタマイズ
サイト運営をしていく中で、訪問者とのコンタクトは欠かすことのできないものとなります。
Contact Form 7は世界中で使われている人気で定番のプラグインです。開発者が日本人なため、設定や解説も日本語でなされていて大変使い勝手の良いツールです。
細かい設定や注意点などは次の公式サイトから確認することができます。
＞＞Contact Form 7(使い方)
またプラブインを用いない方法もあり、Google フォームを利用したお問い合わせフォームの作成方法を次で解説しています。併せてご参考にしていただければと思います。
-
-
【WordPress】お問い合わせフォームの作り方【2通り】
続きを見る
最後までご覧いただき誠にありがとうございました。