このブログに問い合わせページを設置しました。使ったのは、Contact Form 7 というプラグインです。
同様のプラグインはいくつかありますが、実績と評判からContact Form 7 を選びました。
お問い合わせフォームだけではなく、自動返信メールやサンクスページとの連携もできます。
Contact Form 7 の設定方法
Contact Form 7 をインストールすると、管理画面の左メニューに「お問い合わせ」という項目が追加されます。ここをクリックして、「新規追加」メニューをクリックします。
「コンタクトフォームを追加」という画面が表示されます。
「フォーム」「メール」「メッセージ」「その他の設定」のタブに分かれています。
フォーム
フォーム名の設定
まずフォームのタイトルを入力します。このフォーム名はユーザーの目には触れません。自分の管理しやすい名前にします。
フォームの入力項目の設定
「フォーム」では、固定ページで表示するフォームを定義します。デフォルトでは「お名前」「メールアドレス」「題名」「メッセージ本文」の４つの入力欄と「送信」ボタンが定義されています。
これ以外に次の15個のタグを生成することができます。
- テキスト
- メールアドレス
- URL
- 電話番号
- 数値
- 日付
- テキストエリア
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承諾確認
- クイズ
- reCAPTCHA
- ファイル
- 送信ボタン
例えば、「テキスト」をクリックするとテキスト入力項目のためのフォームタグを生成する画面になります。
ここでは、次の項目が設定できます。
項目タイプ：「必須項目」か否かの選択
名前：項目名の定義
デフォルト値：入力項目にデフォルトで表示させる値
デフォルト値をプレースホルダーとして使用するかの選択。これをチェックすると、入力欄にデフォルト値を入力例として表示します。
Akismet：送信者の名前の入力を要求することによりスパムメールを減らすことができます。
ID属性：CSSで使用します。
クラス属性：CSSで使用します。
「タグを挿入」をクリックするとフォームにタグが挿入されます。
項目の属性に合わせて、形式のチェックなどがされ、チェックを追加することができます。詳しくは自分で試してください。
私は、名前とメールアドレスにプレースホルダーの表示とAkismetのチェックを入れるために、タグの生成機能を使いました。
生成されたタグはデフォルトのものと入れ替えました。
タグ以外の文字は自由に変更できます。
メール
「メール」では、フォームで「送信」がクリックされたときに送られるメールを定義します。
送信先：メールを受け取るメールアドレスです。カンマ区切りで複数のメールアドレスを設定することもできます。
送信元：メールの差出人の設定です。デフォルトでは、「[your-name]
題名：受け取るメールの件名を指定します。デフォルトでは、サイト名とフォームで入力された題名となっています。これも管理しやすい内容にすると便利です。
追加ヘッダー：デフォルトでは「Reply-To: [your-email]」となっており、フォームで入力されたメールアドレスがリプライに指定されています。CC: や BCC: を設定することもできます。
いずれの項目でも、フォームでタグを生成したならば、デフォルトのタグと入れ替えることが必要です。
自動返信メールの設定
Contact Form 7 では、問い合わせてくれた人に対する自動返信メールを設定することができます。
これを使うためには、「メール」の下の方で、「メール (2)を使用」にチェックを入れます。
送信先：自動返信メールの送り先です。フォームのメールアドレスにします。
送信元：自動返信メールの差出人です。あなたの名前を入れます。
題名：自動返信メールのタイトルです。「お問い合わせありがとうございました」などのように、自動返信メールであることが分かるタイトルが望ましいです。
メッセージ本文：自動返信メールの本文です。この内容がそのまま自動返信メールとして送られます。
サンクスページの設定
フォーム送信後にサンクスページと言われる完了ページを表示することもできます。
サンクスページを表示するメリットは次の３つです。
- 自動返信メールの確認
- コンバージョン率の計測
- ユーザビリティの向上
自動返信メールを送っていることを通知することにより、メールアドレスの確認を促せます。もし、入力されたメールアドレスが間違っていた場合、こちらからアクセスすることはできません。
サンクスページを表示することにより、コンバージョンが計測できます。
サンクスページがないと、お問い合わせフォームからの送信が問題なく完了したかどうかが分かりづらくなります。
サンクスページは「その他の設定」で指定します。
ここに次のコードを貼り付けます。
on_sent_ok: "window.location.href ='http://xxxxx.com';"
問い合わせフォームを「送信」した直後に、自動的に指定したURLに遷移します。
フォームの公開
すべての設定が終わったら、コンタクトフォームの「保存」ボタンをクリックします。
するとフォームのコードが表示されます。このコードを固定ページに貼り付けます。
最後に自分で問い合わせをしてみて、正常に動作することを確認します。
