なくてはならないプラグイン「Contact Form 7」

お問合せ、メルマガ登録、イベント参加登録等、ユーザーからのコンタクトを得る上で必要不可欠なコンタクトフォーム。昔は担当者のメールアドレスをテキスト入力していましたが、ジャンクメールが増えて大変だったんですよね。今ではフォーム入力が一般的になりました。このフォーム作成の定番ツールがContact Form 7 です。他にもNinjaをはじめフォーム用プラグインは色々ありますが、個人的にはContact Form 7が気に入っています。昔からの定番ですし、それゆえカスタマイズのTIPSがネット上に多数あるので困ったときには参考意見に事欠かないので助かっています。

まずはインストール

他のプラグインと同様、ダッシュボード（WordPress管理画面）左にあるメニューから、「プラグイン」→「新規追加」を選択し、「プラグインの検索」ボックスにContact Form 7と入力してプラグインを検索してください。関連プラグインの一覧が表示されますので、その中から「Contact Form 7」を選択し、「インストール」→「有効化」します。インストールされるとダッシュボードのメニューに「お問合せ」が追加されます。

フォームを作成する

「お問合せ」のプルダウンメニューから「新規追加」を選択すると上のような画面が展開されます。まずは①にフォームの名前を入力します。コンタクトフォームを作成するには４つのステップが必要です。②のフォーム、メール、メッセージ、その他を順に設定していきます。

フォーム

Contact Form 7ではデフォルトでお名前、メールアドレス、題名、メッセージ本文が設定されています。けれどもこれでは不十分ですよね。<label>と</label>で挟まれている部分が１つの入力項目です。足りない項目を手動で追加していきます。この時に使用するのが③のフォームタイプです。必要な入力タイプを選択します。例としてこのフォームに「会社名」を追加してみましょう。③の中から「テキスト」を選択します。

会社名は絶対に入力して欲しいので、「項目タイプ」の必須項目に✔を入れます。名前は任意の名前を記入します。デフォルトではtext-NNN（Nは数字）となっていますが、後のメール設定でわかりやすいように、ここではtext-companyと名付けました。ここで名前を付けると下の青枠内のタグが自動的に付けた名前で設定されます。⇒タグを挿入をクリックします。下の図のようになりました。

このままでは入力用の「枠」しか表示されません。そこでこの枠に「会社名」とラベルをつけます。下の項目お名前を参考に同様に設定します。こんな感じになりました。

textの後ろにある*は必須項目を表しています。また、この画面は固定ページや投稿ページのように、表やショートコードを挿入することができるので、独自のレイアウトもこの画面で設定することができます。画面下の「保存」をクリックし、次に②のメール設定を行います。

メール

こちらがメール設定の画面です。赤枠の中にはフォームで作成したタグが表示されています。フォームで新規作成したtext-companyもここに反映されています。このメール画面はフォームに入力した内容をサイト管理者（あるいは任意担当者）に通知するメールの設定画面です。送信先は任意で入力します。送信元、題名はフォーム入力者が入力した内容が自動反映されます。メッセージ本文はデフォルトで上の画面のようになっています。相手の会社名が本文に反映されていないので、赤枠内のタグ【text-company】を本文にコピペで追加します。下のようになりました。

これで自動的に入力された会社名がメールに記載されるようになります。この最初のメール画面は入力内容　⇒　管理者/任意担当者へのメール設定ですが、入力した方へ自動返信メールを設置したい場合があります。同じ画面をずっと下がると「メール２」というチェックボックスがあります。こちらを✔すると同様のメール設定画面が展開されます。設定方法は同じです。下のようにメッセージ本文でタグを利用することもできます。

メッセージ

ここでは、メッセージが送信された後等、さまざまなシチュエーション時に画面に表示されるメッセージを設定します。デフォルトのままでも構いませんが、気になる場合はテキストで修正することができます。

その他の設定

この画面はカスタマイズ用の画面です。特に気になる点がなければ設定は不要です。

全て入力が終わったら一番下の「保存」をクリックします。すると下のメッセージが表示されます。

この青枠で表示されたショートコードをコピーして、固定ページ、投稿ページの設定した場所にペーストすれば、コンタクトフォームは完成です。このショートコードはダッシュボードの「お問合せ」→「コンタクトフォーム」で表示されるフォーム一覧でも確認することができます。

コンタクトフォームは目的別に作る

入力内容が同じなら、同じショートコードを利用すればいいんじゃない？と思われるかもしれません。しかし、目的が異なった場合（例：一般のお問合せ、FAQ、製品カタログの依頼等）、入力内容が全く同じでも別々にコンタクトフォームを作成することをお勧めします。目的別にリストを作成する場合、フォームの名前毎に作成されるからです。フォームはオリジナルフォームの設定画面右上にある「複製」ボタンで複製できます。