「Contact Form 7」を活用してWordPressサイトにお問い合わせフォームを作成する方法

WordPressサイトにお問い合わせフォームを作成する方法

企業がWebサイトを運営する目的として、お問い合わせを獲得したい、という方は多いと思います。お問い合わせフォームをWebサイトに導入するにはハードルが高そうなイメージですが、WordPressをご利用であれば、簡単にお問い合わせフォームを作成する事が可能です。

その際に、活用するのが、Contact Form 7というプラグインです。WordPressを利用して個人ブログ、企業ブログ、企業サイトなどを制作・運用されている方々には聞いたことのある名前かもしれません。なぜなら、Contact Form 7は、とても有名なお問い合わせフォームを作成するためのプラグインだからです。

今回はこのContact Form 7とはどんなプラグインなのかという説明から、基本的な利用の方法、簡単なGoogle Analyticsと連携させた利用の方法までをご紹介します。

1.Contact Form 7とは

contactform7-header-image

Contact Form 7となWordPressで利用できるプラグインの一つです。Webサイトをしているユーザーがお問い合わせを行う場合に使用するメールフォームを簡単に作成することができます。作成したメールフォームは固定ページなどに設置することができます。

Contact Form 7は三好隆之さんという方が開発されているプラグインで、名前の通り日本人の方が開発されています。ですので、とても日本語にもフレンドリーなプラグインとなっていますし、何か困った場合の資料などもインターネット上に豊富に用意してあります。そういった点からも導入するメリットが感じられます。

参照:http://contactform7.com/ja/
参照:https://ja.wordpress.org/plugins/contact-form-7/

2.お問い合わせフォームを作成する方法

ここからは、実際にWordPressの管理画面に入ってContact Form 7をインストールして触ってみましょう。

2-1.Contact Form 7プラグインをインストールする

まずは管理画面から【プラグイン】→【新規追加】から右上の検索フォームに「Contact Form 7」と入力して検索します。

cf7-1

すると、Contact Form 7が検索結果の左上に表示されます。【インストール】をクリックしてインストールを開始します。

cf7-2

インストールが完了すると、下の画面のような表示でお知らせされます。【プラグインを有効化】をクリックして有効化します。

参照:WordPressの使い方(テーマ・ウィジェット・プラグイン・ユーザー・設定編)

cf7-3

有効化まで正常に完了すると下のようなメッセージが表示されます。これでプラグインのインストールと有効化が完了しました。

cf7-4

2-2.お問い合わせフォームの作り方

では、実際にお問い合わせフォームを作っていきます。

cf7-5

上の画像の画面のように左の【お問い合わせ】→【新規追加】をクリックして進みます。

cf7-6

コンタクトフォームの追加画面になるので【新規追加】をクリックして作業を進めます。

cf7-7

こちらがコンタクトフォームの詳細を設定していく画面になります。上部にフォームのタイトル、下部に「フォーム」「メール」「メッセージ」「その他の設定」というような形で設定画面があります。

それぞれ詳しく見ていきましょう。

2-3.設定項目:フォーム

初期設定として上の画像のようにあらかじめフォームを形成するためのコードは埋め込まれています。このまま利用してもコンタクトフォームとして利用することができます。

また、お望みの入力方法や項目を選んで設置・設定していくことも可能です。設定できる項目は入力欄上部に設置してあるボタンを見るとわかりやすいです。

cf7-12

このように多彩な機能を簡単に搭載することができます。試しにメールアドレスを設定する方法を説明します。【メールアドレス】をクリックすると下のような画面が現れます。

cf7-13

項目タイプ
入力必須がとうか
名前
項目を示す名前を任意で変更できます
デフォルト値
初期に入力しておく値を設定できます
Akismet
セキュリティプラグインのAkismetを利用してセキュリティを高めることができます
ID属性
お好みのIDを設定することができます
参照:『スタイルシートの class と id の使い分け』http://allabout.co.jp/gm/gc/23897/
クラス属性
お好みのclass属性を設定することができます
参照:『スタイルシートの class と id の使い分け』http://allabout.co.jp/gm/gc/23897/

これらの必要な箇所を入力・変更すると同時に最下部に表示されている[email email-289]の部分のタグが生成されます。入力が終了したらこちらに表示されているタグをフォーム設定エリアに挿入するだけでカスタマイズは完了となります。

このように、入力方法や項目などを自由にカスタマイズすることができます。使い方によっては、お問い合わせフォームだけではなく、アンケートフォームなど他のフォームにも利用できます。

2-4.設定項目:メール

こちらでは、コンタクトフォームから入力された項目をどのようにメール上で表示するかを設定する項目となります。まず必ず設定するのは「お問い合わせ内容を管理者に届けるメール」になります。その後、必要であれば「お問い合わせしてくださったユーザーへ向けた自動返信メール」なども設定することができます。(後者の設定方法については当記事では割愛しています)

cf7-8

上部にも記載がありますが、先ほど「フォーム」で設定した名前を利用して設定していくことが可能です。

送信先
コンタクトフォームから送信されるメールの届く先になります。基本は管理者のメールアドレスが自動的に設定されます。
送信元
コンタクトフォームよりお問い合わせしてくださったユーザーの名前が入力されます。([your-name]で指定されています)
題名
コンタクトフォームで入力してもらったタイトルがこちらに入るようになっています。また、そのような指定をしない場合は文言を固定して入力しておくことも可能です。([your-subject]で指定されています)
追加ヘッダー
受け取るメールの返信先を指定します。通常、初期設定と同じような形で問題ありません。他にもCc:やBcc:が設定できます。
メッセージ本文
先ほどの「フォーム」の部分と同じようにタグを用いながら文章を設定することができます。
ファイル添付
添付ファイルがある場合には該当するタグを入力します。

また、先ほど少し触れましたが「お問い合わせしてくださったユーザーへ向けた自動返信メール」は「メール(2)を使用」にチェックを入れることによって設定が可能になる。その際には、受け手と送り手を間違えないように設定するように心がけます。

2-5.設定項目:メッセージ

こちらでは、送信が完了したタイミングや入力項目に不備があった場合などを想定したアラートメッセージの文章を設定することができます。

初期設定としてそれぞれに文章は入力してあります。必要に応じて入力内容を変更して保存します。

cf7-9

2-6.設定項目:その他の設定

こちらでは後ほど説明するGoogle Analyticsなどと連携させるためのコードを入力したりする項目になります。

cf7-10

3.Google Analitycsと連携する方法

ここからはContact Form 7とGoogle Analyticsを連携させて、コンタクトフォーム経由のお問い合わせ送信をトラッキングする(計測する)方法を紹介します。

と言ってもとても簡単に設定することができます。

3-1.「その他の設定」を開く

先ほど紹介しましたContact Form 7の設定内容の最後に出てきました「その他の設定」という項目に以下のコードを入力することで簡単に実現することが可能です。

on_sent_ok: "_gaq.push(['_trackEvent', 'Contact Form', 'Submit']);"

こちらのコードをこのような感じで入力します。

cf7-20

3-2.正常に動作しないときに確認するべき2点

うまく動作していないときに確認しておくべき点が2点あります。それは、

  • 入力したコードに変なスペースとか入っていないか
  • Google Analyticsの設置コードが非同期型ではないか

の2点になります。

まずは、入力したコードが間違いないか確認してみましょう。必要であれば再度コピー&ペーストして設定しなおしてみます。

参照:http://contactform7.com/ja/tracking-form-submissions-with-google-analytics/

そして、次にGoogle Analyticsの設置コードが従来型(非同期型)ではないか確認します。正常に動作させるためには、従来型(非同期型)ではなくユニバーサルアナリティクスのコードでなくてはなりません。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-*******-3', 'auto');
  ga('send', 'pageview');

</script>

analytics.js(太字部分)が設置してある場合は、ユニバーサルアナリティクスのコードということになります。

ga.jsが設置してある場合は従来型(非同期型)と判断することができます。その場合は、Google Analytics管理画面より新しくユニバーサルアナリティクス対応のコードを入手し、再度設置してください。

まとめ

Contact Form 7プラグインのインストールから新しいコンタクトフォームの設置、Google Analyticsを利用したトラッキング方法までを詳しく説明してきましたが、これくらいの作業で必要十分なお問い合わせフォームを手軽に設置することができます。

最近では、WordPressを利用するウェブサイトでお問い合わせフォームを設置するとなると、まずなんの疑いもなく最初の選択肢となるのがContact Form 7でしょう。それくらい知名度とクオリティの高いプラグインとなります。

ぜひあなたも設置してみてはいかがでしょうか。