Contact Form 7 の使い方

マーケティング目的で、WordPressブログを運用するのなら問い合わせページは必須だと言える。しかし通常は、サンクスページや自動返信メールなどの仕組みがある充実した問い合わせページを作ろうとしたら、WEBの専門的な知識が必要になる。

しかし、Contact Form 7 というプラグインを使えば、WordPressの初心者の方でも、お問い合わせフォームやアンケートフォーム、採用応募フォームなど何でも作れるようになる。

そこで、Contact Form 7 の基本的な使い方と、自動返信メールやサンクスページなどの少し手の込んだ設定の方法をご紹介する。参考にして頂けると幸いだ。

Contact Form 7 の設定方法

Contact Form 7 をインストールすると、管理画面の左メニューに「お問い合わせ」という項目が追加されるのでクリックしよう。するとコンタクトフォームの画面にアクセスするので、ページの上部にある「新規追加」をクリックしよう。

次にコンタクトフォームの言語設定の画面に移るので「新規追加」をクリックしよう。言語を選択の部分は最初から日本語になっているので問題ない。

下図のようなフォームの編集画面が表示される。編集画面は大きく５つのパートに別れている。

一つひとつ解説していくので、読み進めながら実際に操作してみよう。

１．フォーム名の設定

フォーム名は初期設定では「無題」となっている。

そのままだと、将来的にフォームを増やしていった時に、どれがどれなのか分かりづらくなってしまうので、一つひとつのフォームに固有の名前を設定するようにしよう。

フォーム名は、「無題」の文字の部分をクリックすると編集できる。変更したら、右下の青の「保存」ボタンを忘れずにクリックしよう。

ここでは「お問い合わせフォーム」という名前に変更した。下図のようにフォーム名が書き変わる。

このフォーム名は、ユーザーの目には触れないので、自分にとってもっとも管理しやすい名前にしておこう。

２．フォームの入力項目の設定

続いて、お問い合わせフォームの入力項目を設定していこう。「フォーム」メニューの中の「タグの作成」をクリックすると、入力項目を選択することができる。

実際には１６の項目があるが残りの５個は使う機会は滅多にない。この１１個だけ抑えておけば、どのようなフォームでも作成できるようになる。

• テキスト項目
• メールアドレス
• URL
• 電話番号
• 日付
• テキストエリア
• ドロップダウンメニュー
• チェックボックス
• 承諾の確認
• ファイルのアップロード
• 送信ボタン

例えば、「メールアドレス」を選択すると、以下のような設定項目が開くので入力していこう。

ここで設定する項目は、フォームのメニュー毎に異なるので後で詳しく解説する。

設定項目の入力が終わったら、下図の赤枠のコード２つ自動で生成されるので、それぞれ画面左上のフォーム欄、画面下のメッセージ本文にコピー & ペーストする。メッセージ本文に関しては後ほど「３．問い合わせの受け取りに関する設定」で解説する。

以上の流れを繰り返すことでフォームが作成できる。

それでは次にフォームに設定する各項目について、一つひとつ解説しておこう。迷った場合は各項目ごとの解説を参考にして欲しい。

２−１．テキスト項目・メールアドレス・URL・電話番号の設定

テキスト項目では、１行の短い入力項目を設定する時に使う。名前や住所の入力は全てこれで代用できる。実は、この項目だけで、ほとんど何でも作れてしまう。

メールアドレス、URL、電話番号については、それぞれ専用の入力項目になっており、誤った文字列が入力されると自動的に入力のやり直しを求めるようになっている。

これら４つの設定内容は同じため、ここではテキスト項目の設定を例に解説する。

• 必須入力の項目ですか？：入力を必須にしたい時にチェックを入れる。チェックを入れた場合、空白のままだと入力のし直しを求めるようになる。
• size：フォームの横幅を指定できる。
• maxlength：そのフォームに入力する文字の上限数を指定できる。
• Akismet：ここにチェックを入れるとスパムメールを減らすことができる（※ ただしAkismetプラグインの設定をしていることが前提となる）

２−２．日付の設定

日付の項目は、生年月日などを入力してもらう時に使う。

• min：日付の下限を設定する。ここで設定した日付よりも前の日付は入力できない。
• max：日付の上限を設定する。ここで設定した日付よりも後の日付は入力できない。
• step：ここを「７」にすると、2014-01-01、2014-01-08 のように１週毎の日付入力に限定することができる。

２−３．テキストエリアの設定

テキスト項目では入力欄は１行だが、テキストエリアは何行でも入力できるようになっている。例えば、採用応募フォームを作る時の志望動機や経歴を記入してもらったり、お問い合わせフォームのお問い合わせ内容を記入してもらったりするために使うことができる。

• cols：一行に入力できる文字数を指定する。ここの指定文字数によってフォームの横幅も変わる。
• class：テキストエリアの列数を指定する。ここの指定列数によってフォームの縦幅も変わる。
• maxlength：テキストエリアに入力可能な最大文字数を指定する。

プレースホルダーテキストについては「２−１．テキスト項目・メールアドレス・URL・電話番号の設定 」の解説を確認しよう。

２−４．ドロップダウン・メニューの設定

ドロップダウン・メニューを使うと都道府県を選択する時などのメニューを作ることができる。

• 選択項目：ここにドロップダウンで表示したい選択項目を１行毎に入力する。例えば、ドロップダウンメニューで都道府県を選択させたい場合、４７の都道府県名をすべて入力する。
• 複数選択を可能にしますか？：ドロップダウンメニューで複数選択できるようにしたい時にチェックを入れる。
• 先頭に空の項目を挿入しますか？：先頭行を空白にしたい時にチェックを入れる。ここは常にチェックするようにしておこう。

２−５．チェックボックスの設定

チェックボックスを使って「どこでサイトのことを知りましたか？」などのアンケート項目を選択形式で表示することができる。複数選択できるか、もしくは１つのみ選択できないかなども設定できる。

• 選択項目：ここにチェックボックスで表示したい選択項目を１行毎に入力する。
• ラベルを先に、チェックボックスを後に置きますか？：ここにチェックを入れるとチェックボックスが右に配置される。そうなるとチェックを入れにくいので使う機会はほぼない。
• 個々の項目を<label>タグで囲みますか？：一つひとつのチェック項目を<label>タグで囲う。<label>タグのデザインをCSSで作成している場合に有効だ。
• チェックボックスを排他化しますか？：ここにチェックを入れると一つのボックスにしかチェックを入れられなくなる。複数選択可能なチェックボックスにする場合は、ここは空白のままにしておく。

２−６．承諾の確認の設定

この設定では、お問い合わせや採用応募時の、個人情報の取り扱い規約などの承諾の確認ボタンを表示することができる。

• 初期状態でチェックボックスにチェックを入れますか？：文言の通り、デフォルトの状態でチェックボックスにチェックが入っているように設定する。その方が、コンバージョン率は上がるので、基本的にはチェックをつけておこう。
• チェックボックスを反転させますか？：チェックボックスにチェックをつけるのではなく、チェックを外すように求める時に設定する。滅多に使う機会はないだろう。

２−７．ファイルのアップロードの設定

ファイルのアップロードを使うと履歴書や証明写真などのファイルを送付してもらえるようになる。

• ファイルサイズの上限 (バイト)：添付可能なファイルの上限サイズを入力する。少々面倒だが、ここはバイト数で入力しなければならない。空欄の場合は1MBが上限になる。
• 受け入れ可能なファイル形式：添付可能なファイルの形式を指定する。例えば、jpg と pngのファイルだけ受信可能にするには、「jpg|png」のように間は縦線で区切る。

ファイルサイズの上限設定を入力する際は、次の数値を参考に入力しよう。

1MB = 1048576 / 2MB = 2097152 / 3MB = 3145728

２−８．送信ボタンの設定

この設定では、フォーム入力後の送信ボタンを作成することができる。CTAの文言もいじることができる。

ラベルには、「送信」「お問い合わせ」「お申し込み」など、送信ボタンに表示したい文言を入力しよう。

２−９．id/classの設定

デフォルトでは下図の左のようにシンプルなデザインだが、id/class の設定をすることで右側のイメージに変更することができる。それではどのようにデザインが変更できるか id/class の設定方法について解説する。

ちなみに上図のサンプルは、サンプルのお問い合わせフォームで確認できる。このテーマは” Twenty Twelve “を使用している。また、HTMLやCSSの詳細については検索すると分かりやすいサイトが見つかるので、そのサイトに任せてここでは割愛する。

最初にフォームのHTMLソースを記述しよう。サンプルでは次の通り記述しているので参考にしてほしい。 

続いてデザインを反映させるために CSS の記述を行う。

管理画面の左メニューから「外観 → テーマの編集」の順にクリックしよう。すると画面の右側にファイル名の一覧が表示されるので、「スタイルシート（style.css）」をクリックしよう。

スタイルシートのソースが左画面に表示されたら、最後尾にあなたが作成したCSSコードを追加しよう。今回、追加したCSSソースのサンプルを参考までに下記に記述する。

CSS を調整してデザインを確認するだけでなく、実際にフォームがうまく動作するかも合わせて確認しよう。

３．問い合わせの受け取りに関する設定

フォームの入力項目の設定が終わったら、次に問い合わせがあった際のメールの受け取り設定を行おう。やることは、

• 宛先
• 差出人
• 件名
• 追加ヘッダー

の４つを指定することだけだ。

• 宛先：受信先のメールアドレスを設定する。複数のメールアドレスを設定したい場合はカンマ区切りで入力しよう。
• 差出人：受け取るメールの差出人表示を設定する。デフォルトでは” wordpress “という架空のメールアドレスが設定されているが、ここはメールソフトで振り分け管理がしやすい差出人名とメールアドレスに変更してもOKだ。
• 件名：受け取るメールの件名を設定する。「お問い合わせがありました。」などに統一しておくと便利。
• 追加ヘッダー：受け取るメールの返信先を指定する。デフォルトでは、 [your-email] になっており、そのままで問題ない。他にも Cc: や Bcc: が設定できる。

※メッセージ本文の設定に関しては、「２．フォームの入力項目の設定」の冒頭で説明している通りだ。自分にとって見やすくなるように調整しよう。

４．自動返信メールの設定（任意）

Contact Form 7 では、問い合わせてくれた人に対する自動返信メールも設定することができる。これは必須のものではないが、設定しておく方が親切だろう。

まず「メール(２)を使う」にチェックを入れよう。

すると下図の通り自動返信メール作成用の入力画面が表示される。

以下の通りに設定しよう。

• 宛先： [your-email] と入力する。これ以外の宛先にすると、問い合わせた人に自動返信メールが届かなくなってしまう。
• 差出人：「バズ部」のように、あなたの名前を入力しておこう。
• 件名：「お問い合わせありがとうございました」などのように自動返信メールであることが分かる件名を設定しよう。
• メッセージ本文：自動返信メールの中身を入力しよう。ここに入力した内容がそのまま自動返信メールとして送信される。

５． サンクスページの設定（任意）

サンクスページとは、お問い合わせフォームやお買い物フォームの入力後に表示される完了ページのことだ。

サンクスページを作るメリットは主に以下の２つだ。

• コンバージョン率を計測できる
• ユーザビリティが向上する

サンクスページにGoogleアナリティクスのコードを設置するとコンバージョンが計測できる。そしてユーザビリティの観点において、サンクスページがないとお問い合わせフォームからの送信が問題なくできたのかどうかがわかりづらい。

サンクスページを置く事で、ユーザーに次の行動を促しスムーズに誘導ができるため、ユーザーとって親切なページとなる。Contact Form 7 では、簡単にサンクスページを設定できるようになっている。

編集ページの最下部に「その他の設定」という項目がある。

ここに以下のコードを貼付けよう

これでお問い合わせフォームから問い合わせた直後に、自動的に指定したURLに遷移するようになる。

６．フォームの公開

全ての設定が完了したらコンタクトフォームの編集ページ上部にある「保存」をクリックしよう。

そして、表示されるフォームのコードをコピーしよう。後は、下図のように固定ページにコードを貼り付けるだけで良い。（※ビジュアルエディタ上で貼付けて大丈夫だ。）

「公開」をクリックして表示を確認してみよう。下記のように表示されていれば大丈夫だ。

最後に念のために実際に自分で問い合わせしてみて正常に動作しているかを確認しよう。

さらに Contact Form 7 を使いこなすには

Contact Form 7 は、お問い合わせフォームを作るための基本的な機能が全て揃っている優秀なプラグインだ。

使いこなせるようになれば、単純なお問い合わせフォームだけでなく、採用募集のためのフォームやアンケートフォームなども自由に作れるようになる。ぜひ、様々なサイトのお問い合わせフォームを参考にして、良いページを作り上げてみよう。

もし、デザインもいじりたいという場合は、Contact Form 7 用のCSSを作成することで、かなり自由度高く、ページを作り上げることができる。その場合は、CSSとHTMLも勉強してみよう。