Word Pressプラグイン|「Contact Form 7」の設定方法(基本編)

Pocket

問い合わせフォームはブログ運営をする場合には必須のツールです。Word Pressプラグイン「Contact Form 7」を使うことで簡単に問い合わせフォームを作成することができます。そんな「Contact Form 7」の基本の設定方法をご説明していきます。

スポンサーリンク

1. 「Contact Form 7」の概要

Word Pressプラグインの「Contact Form 7」は、2017年10月現在のWord Pressとの互換性が公式で認められているプラグイン。

「Contact Form 7」を有効済みにしているインストール数は100万件以上で、評価も星5評価で4.5と、たくさんあるWord Pressプラグインの中でも「優れたプラグイン」の1つです。

問い合わせフォームは用途(商品販売・メルマガ・会社ホームページ)に合わせてカスタマイズし、ユーザビリティを良くしなければコンバージョンに影響を与えてしまうのですが、1つ1つ自作していては大変手間がかかります。

「Contact Form 7」は簡単に問い合わせフォームを作成できるだけでなく、用途に合わせたカスタマイズも可能なため、インストールすることをおすすめします。

You-Channelからの補足
CSSの知識が必要ですが、「id」や「クラス」を設定することで問い合わせフォームや送信ボタンなどのデザインを好みに合わせてカスタマイズすることも可能です。

 

2. 「Contact Form 7」のインストールの方法

まず初めに、Word Press画面左にあるメニューの一覧から「プラグイン」を選び、その中の「新規追加」を選択してください。

プラグインの追加画面右上にプラグインの検索ウィンドウがあるので、「Contact Form 7」と入力しましょう。

すると、検索結果に↓のように「Contact Form 7」が表示されますので、インストールボタン(画面では「有効」ボタンですがここにインストールボタンが出ます)を押します。

インストールが完了するとインストールボタンが「有効にする」ボタンに変わりますので、そのまま「有効にする」を押してください。

↑のように有効ボタンが灰色になったら「有効化された」ということですので、インストールはこれで完了です。

 

3. インストール後の設定場所

「Contact Form 7」のインストールが完了した後は、↓の画面のようにWord Pressメニューに「お問い合わせ」が表示されるようになりますので、ここから「Contact Form 7」の設定が可能になります。

  • コンタクトフォーム:設定済みの問い合わせフォームの一覧が確認できます。
  • 新規追加:新たな問い合わせフォームの設定ができます。
  • インテグレーション:reCAPTCHA(認証セキュリティ)の設定ができます。

 

4. 「Contact Form 7」のおすすめ設定手順

「Contact Form 7」は様々な用途に合わせた問い合わせフォームの作成が可能なため、設定方法も用途に合わせて異なります。

そのため、ブログ運営において最低限の内容を考慮した初期設定としてのおすすめ手順で「Contact Form 7」の設定方法をご説明させていただきます。

  1. 「設定タイトル」の入力
  2. 「フォーム」の設定
  3. 「メール」の設定
  4. 「メッセージ」の設定
  5. 「reCAPTCHA(認証セキュリティ)」の設定
  6. 「問い合わせフォームページ」の作成
【問い合わせフォームの最低限の内容】お名前、メールアドレス、サイトURL、題名、メッセージ本文、認証チェック、送信ボタン※実際の画面イメージはYou-Channel問い合わせフォームをご覧ください。

 

5. 「Contact Form 7」の設定方法(基本編)

問い合わせフォームの設定は↓の画面にある「フォーム」「メール」「メッセージ」「その他の設定」を選択して設定をしていきますので、各項目の説明をしておきます。

  • フォーム:問い合わせで入力いただく内容の設定に対応した項目です。
  • メール:問い合わせのメール受信に関する設定に対応した項目です。
  • メッセージ:状況に応じたメッセージの設定に対応した項目です。
  • その他の設定:カスタマイズ設定に対応した項目です。

 

ここからは、「Contact Form 7」のおすすめ設定手順に従って説明をしていきます。

 

●手順その1:「設定タイトル」の入力

Word Pressメニュー欄から「お問い合わせ」を選び、「新規追加」を選択すると設定画面が開きますので、まずは↓の「テストフォーム」ように任意の設定タイトルを入力してください。

この設定タイトルは「問い合わせフォーム名」ではなく、誰にも知られることのない管理用タイトル名ですので、ご自身の用途に合わせて管理しやすいタイトル名を入力しましょう。

入力が完了したら、保存ボタンを押してください。

↑のようにショートコードが表示されますので、設定タイトルの入力はこれで完了です。

 

●手順その2:「フォーム」の設定

「フォーム」を選ぶと、↓の画面になると思います。

問い合わせいただくユーザーに「何をご入力いただきたいのか」を設定していきます。

すでに↑のようにデフォルトでコードが入力されている状態です。

<label>は項目の名称を表示させるためのコードで、[タグ名]の部分が各項目のコードになります。

最低限の内容として、フォームでは「お名前(テキスト)」「メールアドレス」「サイトURL」を設定しましょう。

どれも設定画面は同じなため、「メールアドレス」の設定画面を例に、設定内容の説明をしていきます。

  • 項目タイプ:必須項目にしたい場合はチェックを入れてください。
  • 名前:タグの名前です。[]の中に入る文字列のため、デフォルトでOKです。
  • デフォルト値:任意の入力例を入力できます。※詳しくは↓で説明します。
  • Akismet:Word Pressプラグイン「Akismet」をインストールしている場合のみ、チェックを入れるとスパムメールを自動で防止してくれます。(後でも編集可能)

※デフォルト値の入力欄の下にある「このテキストを項目のプレースホルダーとして使用する」にチェックを入れ、デフォルト値に入力例を入力すると、↓のように表示されます。

入力例が表示された方が問い合わせフォームを入力するユーザーにとってわかりやすいため、設定しておきましょう。

 

最後に「タグを挿入」を押して完了です。

「お名前(テキスト)」「メールアドレス」「サイトURL」の全てを設定し、タグの挿入が完了すると↓のようなイメージになります。

You-Channelからの補足
「Akismet」のインストールと設定方法※準備中です。

 

●手順その3:「メール」の設定

「メール」を選ぶと、↓の画面になると思います。

問い合わせ内容の受信に関する設定と自動返信メール(任意)に関する設定をしていきます。

  • 送信先:問い合わせを受信したいメールアドレスを入力します。カンマ(,)で区切ると、複数のメールアドレスを設定できます。
  • 送信元:どこから送信されたかの表示の設定です。デフォルトでOKです。
  • 題名:受信したメールに表示されるタイトルを任意で設定できます。↑のように「自身のサイト名(You-channel)」+「問い合わせをしたユーザーが入力したタイトル名(your-subject)」などにするとメール管理に便利です。
  • 追加ヘッダー:受信したメールの返信先(ユーザーのメールアドレス)を表示させる設定です。
  • メッセージ本文:受信するメールの内容を設定できます。基本的に[your-message]だけあればユーザーの問い合わせ内容を確認できますが、「差出人」や「題名」もあった方が便利ですので、↓のようにしておきましょう。

チェックボックスとファイル添付は特にデフォルトのままでOKです。

 

続いて自動返信メール(サンクスメール)の設定ですが、必須ではありませんので任意で設定ください。

ユーザーにとっては丁寧な対応となるため、設定をおすすめします。

自動返信メールを設定する場合は↓の「メール(2)」を使用にチェックを入れてください。

すると↓の画面が出てきますので、ここから自動返信メールの設定をしていきます。

  • 送信先:デフォルトのままにしてください。変更すると自動返信メールが届かなくなります。
  • 送信元:ご自身の名前やサイト名を入力しましょう。デフォルトのままでもOKです。
  • 題名:自動返信メールのタイトルを任意で設定できます。問い合わせいただいたユーザーにわかりやすタイトルを設定しましょう。
  • 追加ヘッダー:返信いただきたいメールアドレスを入力しましょう。問い合わせいただいたユーザーに知らせたくない場合は入力しなければOKです。
  • メッセージ本文:自動返信メールでお伝えしたい内容を入力しましょう。↑のようにフォーム設定で定めたユーザーの名前を入力いただく「タグ」+「様」でユーザーの名前が自動で入力されますので、便利です。

自動返信メールの設定も、チェックボックスとファイル添付は特にデフォルトのままでOKです。

全ての設定を終えたら、保存を押して完了です。

 

●手順その4:「メッセージ」の設定

「メッセージ」を選ぶと、↓のような画面になると思います。

様々な状況に合わせて表示させるメッセージを任意で決めることができます。

デフォルトのままでもOKですが、任意で決めたい方は状況に合わせた任意のメッセージを入力していきましょう。

入力を終えたら、保存を押して完了です。

スポンサーリンク

●手順その5:「reCAPTCHA(認証セキュリティ)」の設定

認証セキュリティである「reCAPTCHA」は、Googleが無料で提供している認証セキュリティです。

スパムメールなどの迷惑行為は自動による送信で多くのサーバーやサイトを攻撃しているため、それらスパムメールや迷惑行為を防ぐためにも、ぜひ設定をしておきましょう。

Word Pressメニューから「お問い合わせ」を選び、「インテグレーション」を選択すると↓の画面が表示されます。

サイトキーとシックレットキーを取得するため、まずは下記のリンクにアクセスしてください。

「reCAPTCHA」公式ページ

You-Channelからの補足
「reCAPTCHA」サイトへのログインにはGoogleアカウントが必要なため、ログインしていない場合には、先にログイン画面が表示されます。

 

「reCAPTCHA」の設定画面です。

  • Label:設定ラベル名を入力します。ご自身のサイト名などを入力しておけばわかりやすいでしょう。
  • type of reCAPTCHA:reCAPTCHAの種類を選択できます。最後の「Android」はアプリ用のため、「V2」「Invisible」を任意で選んでください。「Invisible」の方が新しいため、こちらをおすすめします。
  • Domains:ご自身のサイトのURL(https://は除く)を入力しましょう。

チェックボックス2つ(利用規約)にチェックを入れて「Register」を押してください。

画面が↓の画面に変わり、

サイトキー(Site Key)とシークレットキー(Secret Key)が表示されます。

Word Pressメニューから「お問い合わせ」を選び、「インテグレーション」を選択してサイトキーとシークレットキーをそれぞれ入力(コピー&ペースト)して「保存」を押してください。

「フォーム」に戻り、「reCAPTCHA」を選択し、サイズとテーマをお好みで選択。

「タグの挿入」を押して完了です。

reCAPTCHAについて詳しく知りたい方は、下記の記事を参考にしてみてください。

Google、Android向けの「reCAPTCHA API」を発表ITメディア

 

●手順その6:「問い合わせフォームページ」の作成

問い合わせフォームを設置する「問い合わせフォームページ」を作成すれば問い合わせフォームを公開できます。

Word Pressメニューより「固定ページ」を選び、「新規追加」を選択してください。

公開するお問い合わせフォーム名を任意で入力し、「設定タイトルの入力」で表示された「ショートコード」をコピー&ペーストして「公開」を押せば完了です。

↓の[]で囲まれているcontact-form-7  〜 テストフォーム”の部分がショートコードです。

お疲れまさでした。

 

6. まとめ

「Contact Form 7」の設定方法(基本編)としてご説明しましたが、いかがでしたでしょうか。

公開後は、念のためご自身で問い合わせフォームから問い合わせテストを行いましょう。

 

お問い合わせフォームはコンバージョン率に影響を与えます。

今回ご説明した「Contact Form 7」の設定方法(基本編)は、ブログ運営を行う上での最低限のものですので、資料請求や求人募集などの様々な用途に応じて必要な問い合わせフォームへのカスタマイズ方法については「応用編」としていずれの機会でご説明できればと思います。

また、CSSやHTMLを学ぶことでデザインをカスタマイズすることも可能ですので、オリジナルデザインのお問い合わせフォームの作成に、ぜひチャレンジしてみてください。

You-Channelからの補足
「Contact Form 7 デザインテンプレート」で検索すると「コピペでOK」などのたくさんのデザイン参考記事が検索されますので、参考にしてみてください。

 

この情報が少しでもお役に立てたなら嬉しい限りです。
 
See you next time! By You-Channel.

 

スポンサーリンク

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でYou-Channelをフォローしよう!

Pocket