【簡単】Contact Form 7の効果的なカスタム方法

マーケティング目的で、WordPressブログを運用するのなら問い合わせページは必要だろう。そして、Contact Form 7を使うことで、自動返信メールやサンクスページなどのカスタマイズをすることができる。

手順通りに行えば、初心者の方でも簡単にカスタマイズができる。

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

1. Contact Form 7とは

Contact form7はWordPressに問い合わせページを作る際に非常に便利なプラグインだ。

本来、自分で問い合わせページを作成する場合にはHTMLやCSSの専門的な知識が必要になる。しかし、Contact form7は比較的簡単に設定できる為、専門的な知識のない方でも簡単に問い合わせページを作ることができる。その為、日本のみならず、海外でも広く使われている。
Contact Form 7のメリットとしては次のことがあげられる。

• 導入や設定が簡単（初心者の方でも簡単に扱える設計になっている）
  
• 問い合わせページには様々なアレンジがボタンで簡単に挿入できる。
  （例：ドロップダウン・メニューの設定など）
  
• 自動返信メールやサンクスページなどの設定も可能
  
• 利用者が多い為、設定がわからない場合でもネット上に情報がたくさんある

2. インストール方法

それでは、「Contact Form 7」をインストールしていこう。
管理画面の左メニューの「プラグイン→新規追加」にいき、プラグイン検索窓から「Contact Form 7」と検索。

その後、今すぐインストールをクリックしよう。

次に、有効化をクリックしよう。

3. Contact Form 7の使い方

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

すると、下図のようなフォームの編集画面が表示される。

簡単な問い合わせフォームの場合は設定を変更する必要がない。
なぜなら、簡単な問い合わせページはデフォルトのままでも表示されるようになっているからだ。

4. フォームのアレンジ方法

ここでは、「フォーム」メニューの中の赤枠の部分の解説をしていく。
ここを編集することで問い合わせフォームをアレンジできる。

フォームのアレンジで有効に使える項目は次の8つだ。

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

8つの項目を追加すると以下のように表示される。

それでは、1つずつ解説をしていく。

4-1. テキスト項目・URL・電話番号の設定

テキスト項目
１行の短い入力項目を設定する時に使う。名前や住所の入力は全てこれで代用できる。

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

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

• 項目タイプ：必須項目にチェックを入れると必須項目になる。
  
• Akismet：ここにチェックを入れるとスパムメールを減らすことができる（ただしAkismetの設定を行なっている必要がある）
• デフォルト値：ここに文字を入力すると、入力欄に入力例が表示できる。これがあるだけでコンバージョンに好影響を与えるので、積極的に活用するようにしよう。デフォルト値を入力する際は「このテキストを項目のプレースホルダーとして使用する」にチェックを入れよう。

ブラウザでは、以下のように表示される。

4-2. 日付の設定

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

範囲で生年月日の指定を行うことができる。
ブラウザでは、以下のように表示される。

4-3. テキストエリアの設定

先ほどのテキスト項目は入力欄が１行だけなのに対して、テキストエリアは何行でも入力できるようになっている。例えば、志望動機や経歴を記入してもらったり、お問い合わせ内容を記入してもらう時などの長文を書いてもらう際に使用する。

ブラウザでは、以下のように表示される。

4-4. ドロップダウン・メニューの設定

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

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

ブラウザでは、以下のように表示される。

4-5. チェックボックスの設定

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

• オプション：ここにチェックボックスで表示したい選択項目を１行毎に入力する。
• ラベルを前に、チェックボックスを後に配置する：ここにチェックを入れるとチェックボックスが右に配置される。そうなるとチェックを入れにくいので使う機会はほぼない。
• 個々の項目をlabel要素で囲む：一つひとつのチェック項目を<label>タグで囲う。この機能を使うとテキストとチェックボックスを関連づけることができる。入力しやすいフォームになるのでチェックを入れよう。
• チェックボックスを排他化する：ここにチェックを入れると一つのボックスにしかチェックを入れられなくなる。複数選択可能なチェックボックスにする場合は、ここは空白のままにしておく。

ブラウザでは、以下のように表示される。

4-6. 承諾の確認の設定

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

同意条件に任意の言葉を入れよう。
ブラウザでは、以下のように表示される。

4-7. ファイルのアップロードの設定

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

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

ファイルサイズの上限設定を入力する際は、次の数値を参考に入力しよう。
1MB = 1048576 / 2MB = 2097152 / 3MB = 3145728

ブラウザでは、以下のように表示される。

4-8. 送信ボタンの設定

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

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

ブラウザでは、以下のように表示される。

5. Contact form7のカスタマイズ方法

ここでは、自動返信メールとサンクスページの設定方法を紹介していく。
まずは、自動返信メールの設定から見ていこう。

5-1. 自動返信メールの設定

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

まずは、メールの設定画面にいく。

スクロールして下の方にいき「メール(２)」にチェックを入れよう。

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

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

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

5-2. サンクスページの設定

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

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

• コンバージョンを計測できる
  →サンクスページにGoogleアナリティクスのコードを設置するとコンバージョンが計測できる。
  
• ユーザビリティが向上する
  →サンクスページがあることで、問い合わせフォームからの送信が問題なくできたのかどうかが分かる。

サンクスページの編集は「その他設定」で行うことができる。

赤枠内に以下のコードを貼付けよう。サンクスページのURLの部分には固定ページで作成したサンクスページのURLを入力しよう。

6. フォームの公開

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

そして、表示されるフォームのコードをコピーしよう。

コピー後は固定ページで作成した問い合わせページの本文に貼り付けよう。

貼り付け後は公開をすれば完了だ。

固定ページでの問い合わせページの作り方がわからない場合は次の記事を一読しておこう。
WordPressの固定ページで問い合わせページを作る方法

まとめ

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

• インストール方法
  
• Contact Form 7の使い方
  
• フォームのアレンジ方法
  
• Contact form7のカスタマイズ方法
  
• フォームの公開

ぜひ、様々なお問い合わせフォームを参考にして最高の問い合わせフォームを作成してみてほしい。