Contact Form 7へサンクスページをつける(最新版)

ヘッダ画像

Contact Form 7へサンクスページをつける(最新版)

WordPressの鉄板フォームプラグインであるContact Form 7
スクリプトで表示されるだけの送信完了が分かりにくい」という声は多いです。
よって、サンクスページ、つまり、フォームの送信完了画面を表示させたいという要望は多いです。
もちろん、Contact Form 7で送信完了後にサンクスページを表示させることは可能です。
しかし、これまでのon_sent_ok redirect動かなくなってしまったため、少々、混乱があるようです。
これらの解説がいまだに検索上位に表示されてしまうことも原因でしょう。
わたしの記事もご多分に漏れず(笑
あたらめてContact Form 7に送信完了画面を表示する方法を解説したいと思います。
ネット上の情報を見てもうまくいかない」という方でも必ず解決できるはずです。

サンクスページの準備

まずは前準備として送信が完了した際に表示させる固定ページを任意のパーマリンクで用意します。
例としてexample.com/thanks/のようなページです。
ここまではOKですね?
それでは先に進みましょう。

on_sent_okではサンクスページに飛ばない

あらたにContact Form 7を導入し、サンクスページを表示したい場合は読み飛ばして構いません。
これまで問題なかったのにうまくいかなくなった」という方だけに必要な情報です。

on_sent_ok:"location='http://example.com/thanks/';"

従来はフォーム枚の「その他の設定」でon_sent_okを使い、上記のように指定していました。
しかし、最新のContact Form 7ではエラーとなります。

“on_sent_ok”とその兄弟設定 “on_submit” は非推奨となっており、2017年末までに廃止される予定です。

Contact Form 7の製作者MIYOSHIさんからはかねてから告知していたのですが、Contact Form 7 5.0よりこのon_sent_okon_submitは完全に廃止となりました。
代替としてDOMイベントを利用します。
「その他の設定」を消去して次に進んでください。

お使いのテーマでのカスタマイズ

functions.phpに追記

<?php
add_action( 'wp_footer', 'add_thanks' );
function add_thanks() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/thanks/'; //サンクスページURL
}, false );
</script>
<?php
}
?>

なにを行っているかというと、送信完了時に実行させるスクリプトをWordPressのHTMLのwp_footer()部分、つまり、</body>タグ直前あたりにスクリプトを出力しています。

また、フォームを複数設置している場合は違うサンクスページを表示できます。
その場合はどのページに設置したフォームかをページIDで指定して条件分岐します。
下記であれば、ページID=123のフォームは送信後、example.com/thanks/を表示、それ以外のページのフォームはexample.com/thanks2/といった具合です。

<?php
add_action( 'wp_footer', 'add_thanks' );
function add_thanks() {
if( get_the_ID() == '123' ) {//フォームの設置ページID
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/thanks/'; //サンクスページURL
}, false );
</script>
<?php
}else{
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/thanks2/'; //サンクスページ2URL
}, false );
</script>
<?php
}
}
?>

フッタテンプレートへの記述でもOK

先程のPHPはwp_footer()へフックして出力しているだけですので、footer.phpなどに直接スクリプト部分を記載しても動作します。
functions.phpへの追記は誤りがあると即サイトの表示が不可となるため、初心者の方はフッタテンプレートのbodyの閉じタグ直前にスクリプト部分のみ記述してもよいでしょう。
また、ページごとに任意のスクリプトやCSSを記述できるカスタムフィールドを備えているテーマもありますので、こちらを利用してもよいですね。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/thanks/'; //サンクスページURL
}, false );
</script>

on_submitが使えないということは…

いかがでしたでしょうか?
これで無事に送信完了後にサンクスページを表示させることができたはずです。

ところでon_sent_okon_submitが使えなくなったことで混乱があったかと思いますが、ほかの影響はないの?
そうです!
これまでアナリティクスでフォーム送信をon_submitでコンバージョン計測していた手法が使えなくなっています。

気がつかれていないケースも多いかもしれませんが、同じくDOMイベントで対処可能ですので、近いうちに記事にしたいと思います。

コメントを残す

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



関連記事

Contact Form 7の送信完了画面がでない ※このContact Form 7の送信完了画面についての記事はひと世代前の情報です。最新のContact Form 7...

Contact Form 7のラジオボタンを必須項目に(最新版) 今回はWordPressでの超定番のフォーム用プラグインContact Form 7でのラジオボタンの必須項目化について...

Contact Form 7で403エラー メールフォーム定番プラグインのContact Form 7で新規フォームの作成や既存データの編集を行おうとすると403エ...

KB Robots.txtの使い方 WordPressでは自動で仮想robots.txtが出力されます。ユーザに見せる必要のない/wp-admin/と/wp...