お問い合わせフォーム関連
お問い合わせフォーム
プラグイン「Contact Form 7」
この記事は9分で読めます
難易度:

ウェブサイトにとって、ユーザーにお問い合わせを頂くことはとても重要です。
ネットショップも同様で、ユーザーが困っていることやショップや商品の改善点などを把握出来るようになります。

WordPressは、お問い合わせしてもらうメールフォームをプラグインを使うことで簡単に設置できます。

メールフォーム用プラグインとしてよく用いられるものが二つあります。
●Contact Form 7
●MW WP Form

それぞれできることと出来ないことがありますが、どちらもとても便利なプラグインです。
【Contact Form 7の特徴】
・フォーム入力後の確認ページが無い(追加プラグインで対応可)
・顧客情報のリスト化は、外部サービスと連携で可能
・WordPressでステップメールを送れるプラグイン「MailPoet 3」との連携が図れる
・「reCAPTCHA」が使えてセキュリティ面で良い
【MW WP Formの特徴】
・一つのプラグインで確認画面まで対応できる(プラグインが増えず表示速度的に有利)
・問合せ情報を管理画面で確認できる
・顧客リストをサーバー上からダウンロードできる

どんな目的でお問合せフォームを使うのか?
セキュリティ面と外部サービスとの連携であれば、「Contact Form 7」が良いかなと思います。

今回は、「Contact Form 7」の設置と設定を解説していきます。

このコンテンツを読んでできること
  • Contact Form 7でフォームの作成ができる
  • Contact Form 7で作成したフォームの設置ができる
  • Contact Form 7を充実させるための方法がわかる
このコンテンツを書いた人
齋藤秀峰
ネット通販ビジネス
トータルアドバイザー齋藤秀峰SAITO SHUHO

2009年に自社ブランドのネットショップをオープン。2017年にWordPressのWelcartへショップを移転。その経験を元に、多くのネットショップをWelcartにて新規構築。現在もWelcartの運営を行いながら、日々研究を繰り返しています。

お問い合わせプラグイン比較

イマジンでは、お問い合わせのプラグインに「Contact Form 7」「MW WP Form」の2つをおすすめしています。それぞれにメリット・デメリットがあるため、作りたいフォームの内容と合わせて選択していただければと思います。

こちらのページでは、「Contact Form 7」の設定と使い方について詳しくご説明しています。

プラグインのインストール

「Contact Form 7」とは、簡単にフォームを作成でき、ウィジェットやショートコードで設置できる、お問い合わせフォームのおすすめプラグインです。
まずはプラグインをWordPressへインストール後、有効化してください。

Contact Form 7

プラグインのインストール方法については、下記ページにてくわしくご説明しています。

プラグインを有効化すると、WordPress管理画面レフトナビに「お問い合わせ」というメニューが表示されます。このメニューが「Contact Form 7」となります。

「Contact Form 7」の管理画面メニュー

WordPress管理画面レフトナビ「お問い合わせ」から、「新規追加」をクリックして、お問い合わせフォームの新規追加画面を開きます。

「Contact Form 7」の新規作成

「Contact Form 7」の新規作成

まずは、作成するフォームのタイトルを入力します。
フォームの内容がわかる名前でOKです。(ページ自体に表示はされません。)

フォームのタイトルを入力

お問い合わせフォームを作成するにあたり、下記のタブ毎に内容を入力・設定していきます。

フォームのタブ

  1. 「フォーム」タブフォームの内容を作成します。
  2. 「メール」タブフォーム送信時に送られる自動送信メールの内容を作成します。
  3. 「メッセージ」タブフォームの状態をユーザーへ表示する文章を編集できます。

「フォーム」タブの入力・設定

一番左の「フォーム」タブにて、フォームの内容を作成します。
新規作成の画面では、下記のように既にデフォルトでフォーム内容が入力されています。

「フォーム」タブの入力・設定

「フォーム」タブの入力・設定

フォーム内容の入力方法については下記の通りです。

1フォームの「タグ」ボタンをクリックする

作成したいフォームタグのボタンをクリックすると、タグ生成のための入力画面が表示されます。

フォームの「タグ」ボタンをクリックする

フォームの「タグ」ボタンをクリックする

フォームタグによって入力する項目は異なりますが、共通項目は下記の①~④です。(下記は「テキスト」タグの例です)

①項目タイプ

入力や選択を必須項目にする場合にチェックを入れます。

②名前

フォームタグの名前を半角英数で入力します。

③デフォルト値

入力前のフォームに初期値として入れておきたい文字等がある場合に入力します。
入力欄下の「このテキストを項目のプレースホルダーとして使用する」にチェックを入れた場合、入力した値は薄い灰色の文字になり、入力する際には表示されなくなります。(この状態をプレースホルダーと呼びます)

プレースホルダーにした実際のフォーム画面
プレースホルダーにした実際のフォーム画面

④ID・クラス属性

フォームのデザインを変更する場合などのために、フォームにIDやclassを設定することができます。

上記①~④の入力・設定が完了したら、右下の「タグを挿入」ボタンをクリックしてフォームタグを挿入します。

フォームの「タグ」ボタンをクリックする

上記で入力したタグの表記は下記の通りです。

フォームの「タグ」ボタンをクリックする

2項目名を付けて<label>タグで囲む

タグを出しただけだと、実際のページには入力欄しか表示されません。
何の入力欄なのかの項目名を入力し、<label>~</label>タグで囲みます。

項目名を付けて<label>タグで囲む

3フォームの内容を完成させる

上記の1~2を繰り返し行い、フォームに必要なタグを追加していきます。
それぞれのタグについては下記の通りです。

フォームの内容を完成させる

①テキスト
[text]

1行入力するテキストフォームタグです。

①テキスト

②メールアドレス
[email]

メールアドレスを入力するテキストフォームタグです。半角英数で@の入力がないものは認識しません。

②メールアドレス

③URL
[url]

URLを入力するテキストフォームタグです。半角英数でhttp://から始まるもの以外は認識しません。

③URL

④電話番号
[tel]

電話番号を入力するテキストフォームタグです。半角数字以外は認識しません。

④電話番号

⑤数値
[number]

数値が選択できるフォームタグです。基準値から下限~上限値の設定も可能です。

⑤数値

⑥日付
[date]

日付を選択できるフォームタグです。選択できる日付の範囲を下限と上限で設定できます。

⑥日付

⑦テキストエリア
[textarea]

文章を入力するテキストフォームタグです。

⑦テキストエリア

⑧ドロップダウンメニュー
[select]

選択項目をドロップダウン形式にできるフォームタグです。オプション欄の一行に一つずつ項目を入力します。

⑧ドロップダウンメニュー

⑨チェックボックス
[checkbox]

選択項目をチェックボックス形式にできるフォームタグです。チェックボックスは複数選択が可能です。オプション欄の一行に一つずつ項目を入力します。

⑨チェックボックス

エラーを起こすため<label>タグで囲まなくてよいです。

⑩ラジオボタン
[radio]

選択項目をラジオボタン形式にできるフォームタグです。オプション欄の一行に一つずつ項目を入力します。

⑩ラジオボタン

エラーを起こすため<label>タグで囲まなくてよいです。

⑪承認確認
[acceptance]

規約や条件など、確認の際にチェックをしてもらうためのフォームタグです。同意条件の欄に、確認内容の文言を入力します。

⑪承認確認

⑫クイズ
[quiz]

問いに対しての答えを入力するテキストフォームタグです。クイズと回答の欄に「問い|答え」と入力します。改行し複数入力すると、ランダムで表示されます。

⑫クイズ

⑬ファイル
[file]

画像等の添付ができるフォームタグです。ファイルサイズの上限や、可能なファイル形式の設定も可能です。

⑬ファイル

4送信ボタンを設置する

フォームの内容が完成したら、最後に「送信ボタン」を設置します。必ず設置をしてください。

送信ボタンを設置する

ボタンに表示する文言をラベルに入力します。
送信ボタンのフォームタグ[submit]は、<label>タグで囲まなくてよいです。

送信ボタンを設置する

送信確認について

Contact Form 7には、入力した内容を確認する画面がありません。(別のプラグインを使用すれば作成は可能です。)「送信」ボタンをクリックすると、すぐに問い合わせ内容が送信されます。
誤送信等を防ぐため、送信ボタンの前に下記のような「⑪承認確認」の設置をおすすめします。

送信確認について

5フォームの内容を保存する

フォームの内容・送信ボタンタグが設置できたら、フォームの内容は完成です。

フォームの内容を保存する

画面右上の「ステータス」内にある「保存」ボタンをクリックして、フォーム内容を保存します。

フォームの内容を保存する

「メール」タブの入力・設定

左から二番目の「メール」タブにて、フォーム送信時に自動で送られる自動送信メールの内容を作成します。

「メール」タブの入力・設定

上記の赤枠で囲ってある部分が、使用することができる「メールタグ」です。このタグ名は、②名前」が使用されています。メール内に使用しているものは細字、使用していないものは太字で表記されていますが、使用数に制限はありません。

②「フォーム」タブの入力・設定で作成したフォームを保存せずにメールタブを設定しようとすると、ここに表示されるメールタグがデフォルトの状態のままになってしまいます。メールタグにフォームの名前を反映させるために、メール設定の前に必ずフォームを保存しておきましょう。

上記のメールタグを使用して、「管理者宛の自動送信メール」の内容と、「お客様宛の自動送信メール」の内容をそれぞれ入力・設定していきます。

管理者宛の自動送信メール

新規作成の画面では、下記のように既にデフォルトでメール内容が入力されています。
ここに入力されている内容が「管理者宛の自動送信メール」です。

管理者宛の自動送信メール

①送信先

自動送信メールを送る送信先を設定できます。
デフォルトで入力されている[_site_admin_email]タグは、WordPressの管理者ユーザーのメールアドレスです。管理者のメールアドレスと送信先が異なる場合は、こちらにアドレスを入力します。

②送信元

自動送信メールの送信元の表示を設定できます。
デフォルトで入力されている[_site_title]タグは、サイトのタイトルです。必要に応じて変更してください。

③題名

メールのタイトルを設定できます。
デフォルトでは[_site_title][your-subject]タグが入力されていますが、必要に応じて変更してください。

④追加ヘッダー

デフォルトではReply-to(返信先アドレス)が入力されていますが、CcやBccも設定することが可能です。

⑤メッセージ本文

メールの内容を編集できます。
問い合わせ内容の保存も兼ねるため、全てのメールタグを使用することをおすすめします。

お客様宛の自動送信メール

「お客様宛の自動送信メール」は、デフォルトでは表示されていません。
まずは、ページ下部にある「メール(2)を使用」にチェックをいれます。

お客様宛の自動送信メール

お客様宛の自動送信メール

チェックを入れると、管理者用と同様のメール作成欄が表示されます。
既にデフォルトで入力されていますが、必要に応じて内容を変更します。

①送信先

自動送信メールを送る送信先を設定できます。
お客様用となるため、お客様に入力いただいたメールアドレスのフォームのタグを入力します。

②送信元

自動送信メールの送信元の表示を設定できます。
どこからのメールかがお客様にすぐわかるように、サイト名のタグ[_site_title]の使用をおすすめします。
デフォルトではWordPressのアドレスも入力されているため、削除するか、管理者用のアドレスに適宜変更してください。

③題名

メールのタイトルを設定できます。
下記にメールのサンプルをご用意していますので、ぜひご利用ください。

④追加ヘッダー

デフォルトではReply-to(返信先アドレス)が入力されていますが、CcやBccも設定することが可能です。

⑤メッセージ本文

メールの内容を編集できます。
下記にメールのサンプルをご用意していますので、ぜひご利用ください。

メールのサンプル

店名や情報を変更してお使いください

③題名

Happy Sweets Houseにお問い合わせいただきましてありがとうございます


メッセージ
本文

[お名前のタグ]様

この度は、Happy Sweets Houseへお問い合わせいただきまして、誠にありがとうございます。

このメールは、ホームページよりお問い合わせいただいたお客様に自動で返信しております。
後ほど、担当よりご連絡させて頂きます。
今しばらくお待ちいただけますよう、よろしくお願いいたします。

ご入力いただきました内容は以下のとおりです。

お名前:[お名前のタグ]
メールアドレス:[メールアドレスのタグ]
お問い合わせ項目:[お問い合わせ項目のタグ]
題名:[題名のタグ]
お問い合わせ内容:
[お問い合わせ内容のタグ]

それでは今後とも、よろしくお願いいたします。

———————————–

こちらの問い合わせに覚えがない場合は?
他の方が誤ってあなたのメールアドレスで送信した可能性があります。
その場合は、たいへんお手数ですが、「Happy Sweets House(info@happy-sweets-house.com)」までお知らせください。

===========================
自然な甘さと素材にこだわるスイーツ専門店
Happy Sweets House

〒 939-8132
富山県富山市月岡町6丁目1357

TEL 076-429-5151
FAX 076-411-8010
お問合せ info@happy-sweets-house.com
https://happy-sweets-house.com
===========================

管理者宛・お客様宛のメールが作成できたら、画面右上のステータスにある「保存」ボタン、または画面左下にある「保存」ボタンをクリックして、内容を保存しておきます。

「メッセージ」タブの入力・設定

左から三番目の「メッセージ」タブにて、フォームの状態をユーザーへ表示する文章を編集できます。

「メッセージ」タブの入力・設定

Contact Form 7には入力した内容を確認する画面がないため、送信ボタンをクリックすると、送信の有無やメッセージの不備等が同一画面に表示されます。

入力内容に不備があった場合の表示
入力内容に不備があった場合の表示

メッセージタブでは上記のように表示するコメントを編集することができます。基本的には初期値でOKですが、必要な場合は変更してください。
変更をした場合は、画面右上のステータスにある「保存」ボタン、または画面左下にある「保存」ボタンをクリックして、内容を保存しておきます。

フォームを設置する

作成したフォームをページに反映します。
ページへの反映方法は下記の2通りです。固定ページに設置する例でご説明します。

ウィジェットで設置する方法

1ブロック挿入ツールを開く

フォームを設置する固定ページの編集画面を開き、左上にある「+」ボタンをクリックして、ブロックの挿入ツールを開きます。

ブロック挿入ツールを開く

2ウィジェットを挿入する

ブロックタブのウィジェット欄にある「Contact Form 7」のウィジェットを選択して挿入します。

ウィジェットを挿入する

3フォーム名を選択する

Contact Form 7のウィジェットを挿入すると、作成したフォームがプルダウンで選択できるようになります。

フォーム名を選択する

ショートコードで設置する

1ショートコードをコピーする

フォームの編集画面のフォーム名の下に表示されているショートコードをコピーしておきます。

ショートコードをコピーする

2ブロック挿入ツールを開く

フォームを設置する固定ページの編集画面を開き、左上にある「+」ボタンをクリックして、ブロックの挿入ツールを開きます。

ブロック挿入ツールを開く

3ウィジェットを挿入する

ブロックタブのウィジェット欄にある「ショートコード」のウィジェットを選択して挿入します。

ウィジェットを挿入する

4ショートコードを貼り付ける

挿入したショートコードのウィジェットに、1でコピーしたショートコードを貼り付けます。

ショートコードを貼り付ける

フォームの表示確認
フォームの表示確認

Contact Form 7を充実させる方法

Contact Form 7で作成するフォームは、基本的にはページ遷移はありません。デフォルトでは送信の確認画面はなく、エラーも送信状況も同一画面でメッセージとして表示されます。
シンプルな作りのフォームですが、カスタマイズやプラグインを追加することによって、充実したページを作成することも可能です。
下記では、その方法をご紹介します。詳しいやり方は検索して調べてみてください。

送信前の確認画面を表示させたい

Contact Form 7で送信前の確認画面を作成したい場合は、プラグイン「Confirm Plus Contact Form 7」の導入をおすすめします。

送信前の確認画面を表示させたい

送信後の完了画面を表示させたい

Contact Form 7で送信後の完了画面(サンクスページ)を作成したい場合は、JavaScriptの記述が必要となります。

お問い合わせデータを保存したい

お問い合わせデータをデータベース上に保存しておきたい場合は、プラグイン「Flamingo」の導入をおすすめします。導入すると、WordPress管理画面にメニューが追加され、メッセージの管理が可能になります。

お問い合わせデータを保存したい