ビジネス目的でのサイト・ブログ運営の場合、問い合わせフォームの重要性は非常に高いものとなります。
自分へのコンタクトはリスト獲得につながりますから、問い合わせフォームはしっかり作っておきたいものです。
しかしこれを1から作ろうと思うととんでもない時間と労力が必要になります。
通常だと専門のWebデザイナー等に依頼する案件でもあります。
ですがWordPressには、やっぱり優秀なプラグインがついているんです。
その名も「Contact Form 7」。
今回は、このプラグインの設定方法・使い方について詳しくご紹介します。
目次
Contact Form 7の設定方法
Contact Form 7をインストール・有効化すると、管理画面左側のメニューバーに「お問い合わせ」が追加されています。
「お問い合わせ」から「新規追加」を選択してください。
コンタクトフォームの新規追加画面が表示されます。
1．メールフォームの作成
ここでサイト上で来訪者に書いてもらうための「フォーム」を作成します。
タイトル欄（赤枠）に、自分が作りたいフォームの名前を入力しましょう。
今回は例として「お問い合わせ」のメールフォームを作ることにします。
タイトルを入力したら「フォーム」をクリックします。
このフォームで設定するのは、サイト来訪者からメールを送ってもらうにあたって入力してほしい項目です。
デフォルトで、「名前」「メールアドレス」「題名」「メッセージ本文」「送信ボタン」の項目とこれを機能させるプログラムコードが表示されています。
このまま使っても全く問題ありませんが、せっかくなので今回はタイトルに合わせて「メッセージ本文」を「お問い合わせ内容」に変更してみます。
また、デフォルトの項目のほかに追加したい項目（電話番号入力欄や性別欄など）がある場合は、赤枠で囲った中にあるタブから選択し、追加することができます。
では、試しにデフォルトの項目に「電話番号」「性別」を追加してみます。
新しい項目を追加する場合は、
<label>「項目名」「フォームタグ」</label>
というコードを挿入します。
ただ、いちいち打つのも面倒なので、適当にデフォルトのプログラムをコピー＆ペーストして必要な部分だけ変える手法が良いと思います。
今回は「お名前」のコードをコピー＆ペーストして使いまわしてみます。
まず電話番号欄を作っていきましょう。
「お名前」項目の下にコピーしたコードを貼り付けます。
「電話番号」項目を作りたいので、「お名前」となっているところを「電話番号」に変更します。
必須項目にする場合は（必須）をそのまま残し、必須項目にしたくない場合は消してしまいましょう。
また、（半角、ハイフンなし）などの指定がしたい場合は「電話番号」と書いた横に書くことで実際にメールフォームで表示されるようになります。
次に、下段の「[text* your-name]」とある部分をすべて消去した後、フォームタブ欄から「電話番号」を選択します。
すると、以下のような設定画面が表示されます。
ここでは、「項目タイプ」の設定が重要です。
必須項目にするかどうかを決めてください。チェックマークを入れれば現在設定している「電話番号」の入力が必須項目となります。
決定したら、右下の「タグを挿入」をクリックしましょう。
これで「電話番号」項目の追加は完了です。
次に、「性別」の項目を追加します。
「性別」項目を作る際にはフォームタブの「ドロップダウンメニュー」がとても便利です。
まずプログラムは「電話番号」項目の設定で行ったように作ります。
その後フォームタブから「ドロップダウンメニュー」を選択します。
この設定画面では、「項目タイプ」のほか「オプション」の設定も必要になります。
「オプション」欄では、来訪者がドロップダウンしたときに選択してもらう項目を入力します。
今回は「性別」ですから、画像のように“男性”“女性”“その他”として入力します。
なお、一行には選択項目を一つだけ入力するようにしてください。
一行に「男性 女性 その他」と入力してしまうとうまく機能しません。
「オプション」欄の下にあるチェックボックスでは「選択項目を複数選択できるようにするか」と「ドロップダウンメニューの先頭を空白にするか」を設定できます。
複数選択の方は「性別」ですので関係ありませんね。
先頭を空白の方は言葉だとちょっとわかりにくいので実際にやってみましょう。
「先頭を空白にする」にチェックマークを入れると、このようになります。
「性別」欄のドロップダウンメニューでは、いろいろな問題に配慮し先頭を空白にしておく方がよいかもしれませんね。
今回はこの先頭に空白を入れたバージョンで作っていきます。
オプションの設定が終わったら「タグを挿入」をクリックしましょう。
これでフォームは完成です。最後に必ず保存を押しましょう。
次は実際に送信されるメールについての設定をします。
2．送信されるメールについての設定
「フォーム」の設定が終わったら、隣の「メール」をクリックします。
ここでは、メールフォームに入力された内容をメールに自動で書き込み送信してくれるように設定することができます。
①.送信先の設定
まずは「送信先」を設定します。
問い合わせメール専用のGmailアドレスなどを作ってここに設定すると良いでしょう。
②.送信元の設定
次に「送信元」です。
ここは
[your-name]<自分のサイトのURL>と入力されています。
[your-name]には先ほど「フォーム」にて設定した「お名前」項目で入力された内容が反映されます。
つまり、問い合わせフォームで「田中太郎」と入力された場合、自動的に送信元のところに「田中太郎」という文字が入力されて送信されるというわけです。
③.題名の設定
次は題名です。デフォルトで
サイト名“[your-subject]”
となっていると思います。
特に変更するべき内容はないので、このまま使用します。「フォーム」欄の「題名」項目が反映されます。
④.追加ヘッダーの設定
追加ヘッダーにはデフォルトで
Reply-To:[your-email]
となっています。
これも特に変更する必要はありません。
⑤.本文の設定
さて、最後にメッセージ本文の設定です。
ここでは「フォーム」で入力された差出人の名前、メールアドレス、題名、メッセージ本文がデフォルトで反映されるようになっています。
しかし、私が追加した「電話番号」と「性別」が反映されるタグがありませんよね。
このままだとせっかくフォームで作った「電話番号」「性別」がメールで送られてこないことになってしまいます。
追加した項目をメールに反映したい場合は、「送信先」の上に表示されているタブをコピー＆ペーストしましょう。
今回の例では、電話番号のタブは[tel-388]、性別は[menu-410]です。
これら二つをコピーし、メッセージ本文のところにペーストしましょう。
これで反映されるようになります。
設定が完了したら、「保存」をクリックして終了です。
最後に、メールフォーム用のページを作成します。
3．メールフォーム用の固定ページを作成
メールフォームを実際にサイトに入れるためには、固定ページにメールフォームのコードを入力しなければいけません。
とは言っても、コードはコピー＆ペーストで簡単に入力できるようになっています。
先ほど設定していた「メール」の上部に、青い枠で囲われたコードがあります。
もしない場合は、「フォーム」の画面で「保存」を押し忘れている可能性があります。
保存すると表示されるようになります。
これが今回作成したメールフォームのコードになるので、選択してコピーしましょう。
コピーしたら管理画面メニュー左の「固定ページ」→「新規作成」をクリックします。
固定ページ作成画面が表示されたら、タイトルとURLを設定します。
今回タイトルは先ほどの「フォーム」作成で入力した「お問い合わせ」にし、URLは「toiawase」にします。
あとは本文に先ほどのコードを貼り付け、公開して終了です。
最後に、実際にメールフォームに入力して送信し、きちんと機能しているかを確かめましょう。
まとめ
いかがだったでしょうか。
メールフォームの作成は一見難しそうですが、このContact Form 7というプラグインを使えばいとも簡単に作れてしまうのです。
応用すればアンケート等も作れるので、非常に便利なプラグインの一つとなっています。
