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.

関連記事

WordPressが勝手に挿入する「pタグ」を自動挿入させない方法

この記事は約 1 分で読めます。 WordPressには「auto paragraph」という、自動でpタグを挿入してくれる機能があります。 そのため、意図しない見た目になってしまうことが、時々起きて …

no image

ライセンスについて考えてみた。

この記事は約 1 分で読めます。Webサイトを作っていて、素材だったり、ライブラリだったり・・・いろいろ利用しまくってます。 ・・・で、利用する際にいろいろ利用範囲や使い方について気になったりします。 …

no image

WordPressでオリジナルテーマ作りにチャレンジ3【header・footer編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 手順を数回に分けてメモしています。今回はその3回目です。 前回は、コーディングしたものを貼り付けた「i …

no image

Photoshop で入力したテキストの「縦書き」「横書き」を変更する方法

この記事は約 1 分で読めます。 Photoshopを使うようになってもう何年も経つのに、意外と知らずに無駄な事をしていたり・・・が多かったりします。。。 効率よく作業するには、やっぱり便利な方法は活 …

no image

Webサイト移転の時に自動的にジャンプする方法

この記事は約 1 分で読めます。 たまたまいじっていたサイトでサーバーを移転する事になりました。 そんなワケで、ちょこっとメモ。 今回、独自ドメインをとっていなかった為、URLが変わります。 その場合 …