Webの記録

WordPress 「Contact Form7」で送信完了画面と自動送信メールを試してみた

投稿日:2012年9月29日 更新日:

この記事は約 4 分で読めます。

WordPressの「Contact Form7」は、お問い合せフォームを簡単に取り付ける事が出来るという便利なプラグインです。

以前から利用しているのですが、最近まで送信完了画面(サンクスページ)を作っていませんでした。また、自動送信メールを送るという事もしておりませんでした。

アクセス解析をするのであれば、送信完了の画面を作っておいてコンバージョン設定をする場合もありますので、これはやっておくべきかと思い・・・試してみました。

また、自動返信メールの設定もとても簡単だったのでコレも一緒に試してみる事にしました。

今回はひとまず、この2つを試してみたメモを残します。

【2015.8.14追記】「Contact Form7」の管理画面が新しくなっているので、この記事の画像とちょっと見た目が変わっていますが、内容は変わってないです。
【追記2017.9.12】2017年中に非推奨になる箇所について加筆しました。

送信完了画面(サンクスページ)の作り方

固定ページで、送信完了後に表示したい画面(サンクスページ)を「お問い合せ」の画面とは別に作ります。


この時に、固定ページのURLをメモしておきます。


Contact Form7を有効化しているとダッシュボードのサイドに「お問い合せ」タブがあります。
ここから「Contact Form7」設定画面を開き、「その他の設定」タブの中でサンクスページの設定をします。

contactform7の設定画面

on_sent_ok: "window.location.href ='この部分にサンクスページのURLを入力します';"

これでお問い合せページから送信ボタンを押された瞬間に、サンクスページへ自動で飛ばす事が出来ます!
あとは送信テストをして終わりです!(ローカル環境では設定の関係でテストが出来ない場合があるようです。)



【追記2017.9.12】
※この方法は、2017年中に非推奨になるようです。Contact Form 7バージョン4.9以降から以下を参考にしてください。

Contact Form 7バージョン4.9以降の場合

参考記事:その他の設定|Contact Form 7

上記参考記事の下に、「Googleアナリティクスによるフォーム送信のトラッキング」「別のURLにリダイレクトする」の紹介ページにリンクがされています。

私は、リダイレクトの方法がやりやすい(見やすい)と思って、「別のURLにリダイレクトする」を試してみました。
以下のようなコードを、お問い合わせフォーム専用の固定ページのphpに書いてみました。
「http://example.com/」部分は、自分が飛ばしたいサンクスページのURLに書き換えです。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/';
}, false );
</script>

 

自動返信メール設定の仕方

自動返信メールを出すようにする方法はとても簡単です!
「Contact Form7」設定画面の中の「メール2」部分をチェックし、差出人とメッセージ本文を書き換えるだけです。

サンクスページのURLに飛ばないとき

サンクスページのURL設定のコードに大文字小文字、記号などに間違いがないか確認した後・・・。
もしオリジナルテーマの場合は、以下のファイルにちゃんと記述があるか確認してください。

//header.phpのの前に以下の記述
<!--?php wp_head(); ?-->
//footer.phpのの前に以下の記述
<!--?php wp_footer(); ?-->

実は、私も記述を忘れていて・・・サンクスページに飛ばない??と思ったコトがあったのでした。。。

 

最後に・・・

Contact Form7」は本当にいろいろカスタマイズが簡単に出来て便利なプラグインだなぁと思いました!

いろんな方のブログなどを拝見しカスタマイズ方法を探してみました。入力確認画面のカスタマイズは、プラグインのバージョンアップの時が大変なようでしたのでやめました。
どうしても入力確認画面が必要な場合は、別のプラグインを使う事を考えた方が良さそうです。また別の機会に試してみようと思います。

 

関連かもしれない記事

-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …

no image

苦手なJavaScriptをイチから勉強してみる【関数編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【イベント編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

コピペで簡単にできるレスポンシブ対応GoogleMapの設置方法

この記事は約 1 分で読めます。 ショップなどのサイトだと、地図は必須ツール。GoogleMapを利用する機会が多いです。 今回、スマホ対応サイトでGoogleMapを設置する機会がありました。 細か …

no image

サイトマップを作ってみた♪

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 検索エンジンにページの存在を知らせ、クローラーの巡回を促すために作る「sitemap.xml」を作りたいと思います。 いくつもある …

no image

thickbox.jsを使ってLightBox風モーダルウィンドウにチャレンジ♪

この記事は約 1 分で読めます。今回も、数枚の画像を効果的に見せる方法にチャレンジしたいと思います。 ・・・で、画像をクリックすると大きな画像を表示させることが出来るLightBox風にしたいなぁって …