1. TOP
  2. お問い合わせフォームを作るプラグイン「Contact Form 7」の使い方を解説

お問い合わせフォームを作るプラグイン「Contact Form 7」の使い方を解説

 2017/03/04 Wordpressプラグイン  

  • ビジネス用にブログを活用している方
  • 自社商品を販売しようとしている方

上記の方にとって「お問い合わせページ」は必要不可欠です。

お問い合わせフォームを活用することで初めて

  • 問い合わせ
  • 申し込み
  • 商品やサービスの購入

を受け付けることができます。

今回はワードプレスブログにお問い合わせフォームを設置するためのプラグイン「Contact Form 7」の活用方法を解説していきます。

Contact Form 7をインストールしよう

まずは「Contact Form 7」をインストールしましょう。

Contact Form 7

ワードプレスプラグインのインストール方法は以下の記事を参考にしてください。

ワードプレスプラグインをインストールする全手順

有効化まで完了させておいてください。

インストールが完了すると、ダッシュボードのサイドメニューに「お問い合わせ」という項目が追加されているのでクリックして、管理画面に入ります。

コンタクトフォーム7の管理画面への入り方

管理しやすいようにフォームにタイトルをつけよう

ここからは実際にフォームの作成に入ります。

まずはすでに作成されている「コンタクトフォーム1」「編集」をクリックします。

コンタクトフォーム7の管理画面から編集画面への入り方

クリック後のページの最上部にフォームのタイトルをつける欄があります。

ContactForm7のタイトル設定

フォームを管理しやすいように名前をつけておきましょう。

例)

  • お問い合わせフォーム
  • セッション申し込みフォーム
  • セミナー申し込みフォーム
  • etc

ここで設定するタイトルは、ブログ訪問者には見られませんので、ご安心を。

※一つのフォームを複数のフォームに設置しないようにしましょう。一つのページに対して、一つのフォームをその都度作ることで管理がしやすくなりますし、フォーム自体もそのページに合わせて最適化することができます。

フォームの入力項目の設定方法

次にフォームの入力項目を作成していきます。

ページのタブ「フォーム」をクリックすると、入力項目を編集することができます。

フォームの入力項目設定

フォームは初期設定だと以下のようになっています。

<label> お名前 (必須)
[text* your-name] </label>

<label> メールアドレス (必須)
[email* your-email] </label>

<label> 題名
[text your-subject] </label>

<label> メッセージ本文
[textarea your-message] </label>

[submit “送信”]

この部分を編集して、ページに合ったフォームを作成します。

それぞれの項目の説明

フォームに追加できる項目は以下の通りです。

コンタクトフォームに追加できる項目

このうち、よく使われるのが表にまとめた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」の活用方法の解説でした。

少し長編な記事になってしまいましたが、必要なことはほぼお伝えできたと思います。

他にもデザインなどを追及し始めると、いろんな設定方法があります。

そこまでいくと、初心者向けの内容ではなくなるので、ここでは割愛します。

ぜひこの記事を参考にフォームの作成をしてみてください。


このサイトでは、情報の専門性・信ぴょう性に配慮しています。そのため、中央省庁のデータやGoogle公式資料、市場分析データ、書籍などの信用できるデータを参照するよう、心がけております。ポリシーについて

無料E-BOOK|0から始めるワードプレスマーケティング実践ガイド

0から始めるワードプレスマーケティング
このE-BOOKは次のようなノウハウをお伝えしています。

  •  ・ワードプレスブログを立ち上げてから、実際にビジネスに繋げる方法
  •  ・ブログを使った集客方法の全体像
  •  ・ブログやメルマガなど、様々なツールをより効果的に使いこなす方法

以下のボタンからダウンロードしてください。

ダウンロードする

関連記事

  • 【保存版】初心者がワードプレスブログを0から始める方法と効果的な使い方

  • ワードプレスプラグインのインストール・削除・更新の手順

  • ワードプレスのブログ記事で表(テーブル)を作成するプラグインと使い方

  • Akismetの設定方法!スパムコメントをブロックしよう!

  • All In One SEO Packの使い方をわかりやすく解説します

  • WordPress Popular Postsを活用してサイドバーに人気記事を表示させる方法