WordPressにお問い合わせフォームを簡単に設置できるプラグインContact Form 7をご紹介します。
Contact Form7のインストール
左メニューのプラグインをクリックします。右上キーワードに「 Contact Form 7 」と入力し、今すぐインストールをクリックします。
有効化をクリックし完了です。
Contact Form 7 の設定
インストールが完了すると、左メニューに「お問い合わせ」が表示されます。
新規追加をクリックします。
お問い合わせフォームに表示する内容を設定
まずはお問い合わせフォームの表示画面を設定します。
デフォルトのまま使う場合
【デフォルトの場合のフォーム画面】
デフォルトのままでよければ、任意のタイトルを入力し、保存をクリック。メール設定に進みます。
フォームのテンプレートを編集する場合
HTML と Contact Form 7 のフォームタグ で フォームテンプレートを編集することができます。
フォームタグには特定の構文ルール があり、タイプ、名前、オプション(任意)、値 (任意) の4つの要素 から構成されています。
この構文を覚えなくても、管理画面のタグ・ジェネレーターを使って、自動でフォームタグを生成できるので今から見ていきましょう。
チェックボックスを設置してみます。
タグ・ジェネレーターのチェックボックスタブをクリックします。
- 項目タイプ: 必須にしたい時にはチェックを入れる
- オプション: チェックボックスに表示したい項目を1行ごと入力する
- チェックボックスを排他化する: チェックを入れると1つのみ選択可になり、チェックを外しておくと複数選択可となる
- タグを挿入をクリック
挿入をクリックすると、フォーム入力エリアの一番上に挿入されるので、切り取って任意の場所に貼り付けます。
これを繰り返してフォーム画面をカスタマイズします。
反映方法は下記「カスタマイズしたフォームの情報をメールに反映させる」をご覧下さい。
メール設定
メールタブをクリックしメール設定画面を開きます。
デフォルトのメール設定
送信先には送信されたお問い合わせを受け取りたいメールアドレスを設定します。他の部分は特にこだわりがなければそのままで良いかと思います。
[your-name][your-email][your-subject][your-message] はフォームに入力された各項目を表示します。
[your-name] → 「名前 」
[your-email] → 「 メールアドレス 」
[your-subject ] → 「 題名 」
[your-message] → 「 メッセージ本文 」
下右図がそのままの設定でのメール受信画面です。
自動返信メールを設定しない場合には、ショートコードをコピーしフォームを表示するに進みます。
カスタマイズしたフォームの情報をメールに反映させる
先程カスタマイズしたフォームの情報はそのままでは、メールに反映されません。せっかく入力してくれた情報が手元に届かないということになるので、必ず設定しましょう。
反映させるには、フォームタグ生成の際の対応するメールタグを設置していきます。(上図赤枠で囲まれたタグ)
上図のようにメールタグをメール設定の表示させたいところに記入し保存してこの設定は完了です。
自動返信メール設定
ContactForm7ではサンクスメールのような、自動返信メールの設定が簡単にできます。
設定するには、「メール2を使用」に✓を入れます。
すると、入力画面が表示されます。
フォームをカスタマイズした場合は、忘れずに対応するメールタグに変更します。任意の文言を入力し、保存して完了です。
下図が自動返信された画面です。
フォームを表示する
- フォームを表示するには、先程コピーしたショートコードを固定ページに貼り付けます。
固定ページやサイドバー、投稿記事下に設置できます。今回は固定ページに設置していきます。
左メニューの固定ページ→新規追加をクリックします。
タイトルを入力し、先程コピーしたショートコードを貼り付けます。
一時保存し表示して確認してみると、カスタマイズした場合、上図のようなお問い合わせフォームになっています。
以上となります。最後までご覧頂きありがとうございます。