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

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

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

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

注1：Contact Form 7を使った簡単な問い合わせページの作成はこちらの記事で紹介しているので確認しておこう。
WordPressの固定ページで問い合わせページを作る方法

注２：バックアップを取るかローカル環境でテストしよう
新しいプラグインをインストールすると、ごく稀に、不具合が発生する可能性がある。そんな時に、すぐに復元できるようにプラグインを操作する時は、「WordPress のバックアップ」を取っておくか、「ローカル環境でテスト」するようにしよう。

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

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

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

【フォーム、メール、メッセージ、その他の設定】についての解説を知りたい方はこちらの記事で説明しているのでこちらを見てほしい。
WordPressの固定ページで問い合わせページを作る方法

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

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

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

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

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

注：フォームの入力欄はHTML形式になっている。自由に使いこなすためには、ある程度HTMLを理解しておくことをオススメする。

それでは、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

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