- ビジネス用にブログを活用している方
- 自社商品を販売しようとしている方
上記の方にとって「お問い合わせページ」は必要不可欠です！
お問い合わせフォームを活用することで初めて
- 問い合わせ
- 申し込み
- 商品やサービスの購入
を受け付けることができます。
今回はWordPressブログにお問い合わせフォームを設置するためのプラグイン「Contact Form 7」の活用方法を解説していきます。
目次
Contact Form 7をインストールしよう
まずは「Contact Form 7」をインストールしましょう。
WordPressプラグインのインストール方法は以下の記事を参考にしてください。
有効化まで完了させておいてください。
インストールが完了すると、ダッシュボードのサイドメニューに「お問い合わせ」という項目が追加されているのでクリックして、管理画面に入ります。
管理しやすいようにフォームにタイトルをつけよう
ここからは実際にフォームの作成に入ります。
まずはすでに作成されている「コンタクトフォーム1」の「編集」をクリックします。
クリック後のページの最上部にフォームのタイトルをつける欄があります。
フォームを管理しやすいように名前をつけておきましょう。
例）
- お問い合わせフォーム
- セッション申し込みフォーム
- セミナー申し込みフォーム
- etc
ここで設定するタイトルは、ブログ訪問者には見られませんので、ご安心を。
※一つのフォームを複数のフォームに設置しないようにしましょう。一つのページに対して、一つのフォームをその都度作ることで管理がしやすくなりますし、フォーム自体もそのページに合わせて最適化することができます。
フォームの入力項目の設定方法
次にフォームの入力項目を作成していきます。
ページのタブ「フォーム」をクリックすると、入力項目を編集することができます。
フォームは初期設定だと以下のようになっています。
<label> お名前 (必須)
[text* your-name] </label><label> メールアドレス (必須)
[email* your-email] </label><label> 題名
[text your-subject] </label><label> メッセージ本文
[submit “送信”]
[textarea your-message] </label>
この部分を編集して、ページに合ったフォームを作成します。
それぞれの項目の説明
フォームに追加できる項目は以下の通りです。
このうち、よく使われるのが表にまとめた10項目になります。
| テキスト | テキスト入力欄 |
| メールアドレス | メールアドレス入力欄 |
| URL | サイト情報入力欄 |
| 電話番号 | 電話番号入力欄 |
| 日付 | 生年月日などに用いる |
| テキストエリア | 長文の入力に用いる |
| ドロップダウンメニュー | 選択肢のうち一つを選ぶ |
| チェックボックス | 選択肢から選ぶ |
| ファイル | ファイルの添付（履歴書など） |
| 送信ボタン | 送信ボタン |
次節からこの10項目の設定方法をお伝えします。
一般的な設定方法
この節では、下記の4つの設定方法をまとめてお伝えします。
- テキスト
- テキストエリア
- URL
- メールアドレス
- 電話番号
どのように、それぞれの項目を設定していくのかというと、追加したい項目をクリックします。
次に項目の詳細設定画面になるので、
- 必須項目＝絶対入力してほしい項目ならばチェックを入れる
- デフォルト値＝フォーム内に記載される例文
- デフォルト値の下のチェックボックス＝フォーム内の例文表示をオンにするならチェックを入れる
終わったら、「タグを挿入」をクリックします。
例文を記載すると、「[タグ名 placeholder “例文”]」となります。
さらに、他のタグと同じように、「<label>フォームの名称[タグ名 placeholder “例文”]</label>」と囲みます。
これで設定が完了となります。
実際に確認すると、このようになります。
フォーム内に例文（プレースホルダー）が表示されているのがわかります。
フォーム内の例文（プレースホルダー）があると、お問い合わせをする側からすると、非常に助かります。訪問者の利便性を高めるための試みとして、プレースホルダーの設定はできるだけ行いましょう。
日付の設定方法
次に日付の設定方法です。
日付は主に、生年月日や希望日などの入力項目になります。
「日付」をクリックすると、このような画面になります。
他の設定項目とほぼ変わりませんが、唯一違うのが「範囲」の項目になります。
この項目では
- 下限＝これより過去の日付は設定できない
- 上限＝これより未来の日付を設定できない
を設定することができます。
特に希望日の選択ならば、下限は「今日」ということになりますし、生年月日ならば上限が「今日」ということになります。
設定が完了したら、「タグを挿入」をクリックして、前述の「<label></label>」で囲んでおきましょう。
ドロップダウンメニュー
次にドロップダウンメニューの設定方法になります。
ドロップダウンメニューとは以下のような選択式のメニューのことです。
「ドロップダウンメニュー」をクリックすると、設定できます。
- オプション＝メニューの選択項目（1行に1項目）
- 複数選択を可能にする＝複数選択を可能にしたい場合はチェックボックスをオススメします
- 空の項目を先頭に挿入する＝下の画像参照
設定終了後は「タグを挿入」し、前述の「<label></label>」で囲んでおきましょう。
チェックボックス
次にチェックボックスの設定方法です。
「チェックボックス」をクリックしてください。
基本的に設定項目は2点のみになります。
- オプション＝選択項目（1行に1項目記載する）
- チェックボックスを排他化する＝チェックを入れると、複数選択できなくなる
この二つ以外の項目（ラベルを前に…、ここの項目をlabel…）は設定不要になります。
終了したら、「タグを挿入」し、前述の「<label>フォームの名称</label>」で囲んでおきましょう。
ファイル
ファイルの添付項目の設定です。
この設定をしておくと、履歴書などのデータをフォームに添付してもらうことができます。
ここで必ず設定しておきたいのは、以下の2点です。
- ファイルサイズの上限（バイト）＝ファイルサイズを記載する
- 受け入れ可能なファイル形式＝pdfやpngなどのファイル形式を記載する
※記載する際は以下の点に注意
- ファイルサイズ＝1MBや3GBなどの単位ではなく、バイト換算で記載すること。例）1MB＝1048576、2MB＝2097152
- ファイル形式＝ファイル形式同士を縦線で区切ること。例）png|jpg|pdf
送信ボタン
最後に送信ボタンです。
送信ボタンは初期設定で入っていますので、ボタンに記載される文字だけ変更しましょう。
[submit “送信”]の「送信」の部分を書き換えるだけでOKです。すると、ボタンの文章が変更されます。
ボタンの文章がより具体的でわかりやすいほどフォームは利便性が高くなります。
できるだけ「送信」ではなく
- この内容で申し込む
- この内容で問い合わせる
などの具体的な文章を設定しておきましょう。
以上が送信ボタンの文章の変更方法になります。
お問い合わせの通知設定方法
次に、フォームにお問い合わせが入った時に、あなたに対して通知のメールが届くように設定しましょう。
また、その通知メールの中にお問い合わせ内容が反映されるように設定しておきましょう。
設定画面は「メール」タブをクリックすると、現れます。
- 送信先＝通知が届くメールアドレス（あなたのメールアドレス）
- 送信元＝通知メールに表示される送信元
- 題名＝通知メールの題名（「サイトにお問い合わせが入りました」などに設定しておくといいでしょう。）
- 追加ヘッダー＝Cc:やBcc:の設定ができる部分ですが、基本的に触らないこと
- メッセージ本文＝以下参照
メッセージ本文にはブログ訪問者が入力した項目を反映させる必要があります。
では、どのように反映させるのか？お伝えします。
例えば、あなたのフォームにURLを入力してもらったとします。
以下のようにフォームの入力項目を編集できます。
フォームの編集が済み、「タグを挿入」をクリックする前に、赤枠のメールタグをコピーしておきましょう。
そして、コピーしたメールタグを通知用メールの本文に貼り付けておきましょう。
貼り付けた時にはそのメールタグが何を表しているのか、わかるようにしておく必要があります。
この図では「URL:[url-239]」の「URL:」の部分になります。
通知メールの設定が完了したら、「保存」をクリックしておきましょう。
自動返信メールの設定方法
次にお問い合わせをしたブログ訪問者の方に対して、自動返信メールを送信する設定方法になります。
必須の設定ではありませんが、設定しておくと、お問い合わせをした側としては安心感があります。
設定方法ですが、先ほどの「メール」タブ内の「メール(2)」にチェックを入れると、以下のように設定画面が現れます。
特に
- タイトル
- メッセージ本文
については問い合わせしてくれた方へのメッセージなどを含めると好印象でしょう。
設定が終了したら、「保存」をクリックしておきます。
サンクスページの設定方法
次にサンクスページの設定方法です。
サンクスページとは、問い合わせフォームで送信した後に、自動的にページ遷移されたあとのページになります。
「お問い合わせありがとうございます！」と言った感謝の文章や、次に見て欲しい情報を載せておくこともできます。
自動返信メールと同じく必須ではありませんが、あることに越したことはありません。
設定方法としては、「その他の設定」にて、
on_sent_ok: “location = ‘http://example.com/’;”
というコードを貼り付けるだけです。
「http://example.com/」の部分に、遷移させたいページのURLを記載しておきましょう。
コードを固定ページに貼り付けよう
フォームの設定が完了したら、以下のコードをコピーします。
そして、固定ページに貼り付けます。
関連記事
プレビューで確認してみて、意図したフォームが設定されていたらOKです。
実際にテストしてみて、きちんとメールが届くかどうか、内容は反映されているかを確認して公開しましょう。
まとめ
今回は「ContactForm7」の活用方法の解説でした。
少し長編な記事になってしまいましたが、必要なことはほぼお伝えできたと思います。
他にもデザインなどを追及し始めると、いろんな設定方法があります。
そこまでいくと、初心者向けの内容ではなくなるので、ここでは割愛します。
ぜひこの記事を参考にフォームの作成をしてみてください。
