Contact Form 7 を使ったお問い合わせで確認メールや完了画面を出す

Image

WordPressのプラグイン、Contact Form 7を使って「コワーキングスペース八王子 8Beat」のサイトにお問い合わせフォームを作ってみようとしたところいくつか引っかかりポイントがあったり、なるほどこうすればいいのかと思ったところがあったので書いてみました。

フォームの項目を削除したり必須にしたりする

新規にフォームを作るとこんな感じでまず表示されます。

Image

ここで「題名は要らないから削除しよう」、「メッセージは必須にしよう」としたいときは、

Image

題名 という文言の入った行を削除します。

メッセージ本文 という文言の後に (必須) と入れて(最初自動で出ると思って入れ忘れました…)、[textarea を [textarea* とアスタリスクを追加します。アスタリスクが付いていると必須入力の項目と見なされるようです。

メール部分の編集と項目を追加したり削除した場合の対応。

メール部分はデフォルトこのようになっています

Image

(1) 宛先 お問い合わせフォームを送信されたときにどのメールアドレスに送るかを指定します。
(2) 差出人 ここでなぜか差出人のメールアドレスが wordpress@ドメイン名 になっていたり(いなかったり)します。wordpress@ドメイン名 のまま送信してみたのですが、メールアドレスが存在しないということでspamに振り分けられたりしたこともあったので修正が必要です
(3) (4)件名 この項目は先ほど削除してしまったので、修正します

Image

(1) 宛先 宛先を変更してみます。
(2) 差出人 画面から入力してもらったメールアドレス [your-email] を指定します。
* 2016/06/10追記 このメールアドレスですが、メールフォームのあるドメイン名のメールアドレスでないとエラーになるようになりました。ページのURLが http://example.com/xxxx だった場合ならたとえば info@example.com のようなメールアドレスにします。詳しくはこちらをご覧ください。
(3) (4) 件名 「Webお問い合わせ」と固定で入れてみます

このようにフォームの項目を削除したときはメールも修正します。今回はしていませんがフォームの項目を追加したときもメールで届くようにメール部分でも追加しておきます。

Image

編集画面の上の方にある 保存 をクリックします。

この保存は上にあるためか何度か押し忘れて、「あれ?」修正したのになおってないなぁと何度も保存し忘れてしまいました。どこかを変更したときは必ずこの保存をクリックする必要がありますのでご注意ください(^_^;。

完了画面を作る

デフォルトの状態だと、お問い合わせを送信したときに完了画面は出ません

Image

同じ画面で、こんな感じのメッセージが下部に出るだけです。これがちょっとわかりにくいので完了画面を作ってみたいと思います。

固定ページで、

Image

完了画面を作っておきます。このページが例えば、http://8beat.tokyo/finish/ だったとします。

コンタクトフォームの編集画面の一番下に、

Image

その他の設定 という欄があります。そこに、

Image

このように入力して、編集画面の上の方にある 保存 をクリックします。

これでお問い合わせで、

Image

送信を押したときに

Image

お問い合わせ完了画面が表示されるようになりました。

お問い合わせをしてきた人にもメールを送るようにする

お問い合わせ内容のメールをお問い合わせしてきた人本人にも送るようにします。

コンタクトフォームの編集画面に、

Image

メール(2)を使う というチェックボックスがあります。ここに

Image

チェックを入れると、上記のように新しくメール編集部分が開きます。

Image

(1) 差出人 メールアドレスが wordpress@ドメイン名 になっていたり(いなかったり)します。
(2) 件名 この項目は先ほど削除してしまったので、修正します
(3) 追加ヘッダー メール返送先です。これを変更したい場合は修正します。

Image

(1) 差出人 メールアドレスを変更します。
(2) 件名 「Webお問い合わせ」と固定で入れてみます
(3) 追加ヘッダー メールアドレスを変更します。

このように変更をすると、お問い合わせした本人にもメールが届くようになります。そのようになったら、完了画面も、

Image

このように

いただいた内容は入力していただいたメールアドレスに確認としてメールさせていただいております。もし、メールが到着しなかった場合は入力していただいたメールアドレスが間違っている可能性があります。

という文言を追加しておくと、メールアドレスを間違えた場合に気づきやすいかと思います。

あとはちょっとずつ文言を追加していって分かりやすくする

お問い合わせ画面は普通にHTMLで書けば表示されるので、上部にフォームに入力してもらう際の注意とか、お問い合わせしてもらったら○日以内に返事をするとか書いたり、各項目に例を載せてみたりできます。また、メールも普通に文章を書けば追加されるので、メールの冒頭にお礼を入れたり、フッターにサイトのurlだけでなくキャッチフレーズや問い合わせ用のメールアドレスを入れたりできます。

管理者へ送信するメールと問い合わせをしてきた人のメールを同じ文面にしてしまいましたが、問い合わせをしてきた人にはお礼を入れたりするといいかもしれません。冒頭に [your-name]様 と入れればなおいいかもしれません。

基本的なところができれば後は色々追加したりして、よりよいお問い合わせフォームができるかと思います(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る