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

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

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

no image

ちょっと複雑なtableがコピペで簡単にできる「Table Tag Generator」

この記事は約 1 分で読めます。 滅多に複雑なtableタグを書くことがないのですが、久々にtableタグを使うことになって・・・すっかり忘れていました。。。 tableデザインの時代のコーディングで …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

初心者のアクセス解析勉強メモ【用語と計算式】

この記事は約 1 分で読めます。 Webサイトを制作し、運営していく中でアクセス解析は重要だと思っています。そのWebサイトを育て、サイト目的を達成させ、信の目的(事業)の達成をする為にも、とても興味 …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …