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を使い、上記のように指定していました。
“on_sent_ok”とその兄弟設定 “on_submit” は非推奨となっており、2017年末までに廃止される予定です。
現状のContact Form 7でも送信・トラッキングとも可能ではあるようですが、設定エラーとなっていまします。
代替として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
}
?>なにを行っているかというと、送信完了時に実行させるスクリプトをお使いのテーマのwp_footer()部分、HTML上では</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
}
}
?>ちなみにContact Form 7自体にもfunctions.phpが存在しますが、追記するのは使用テーマのfunctions.phpです。
〇→wp-content > themes > 使用テーマ > functions.php
×→wp-content > plugins > contact-form-7 > includes > functions.php
実際にはプラグイン側のfunctions.phpに追記しても動作するわけですが、アップデートの際にカスタマイズ部分が消えてしまいますので、テーマ側で対処することをお勧めします。
もっとも、テーマでも同じことがいえるのですが、汎用テーマを使う運用では、アップデートに対応できるよう子テーマを使うとよいでしょう。
サンクスページのURLを動的に指定する
これまではサンクスページURLをhttps://example.com/thanks/という形で直接で指定しました。
ヒアドキュメントを使えば、関数home_url()でサイトURLを取得して代入できます。
これなら、サンクスページのパーマリンクをthanksにというルールで違うドメインのサイトでもそのまま使えます。
<?php
dd_action( 'wp_footer', 'add_thanks' );
function add_thanks() {
$home_url = esc_url( home_url('thanks') );
echo <<< EOF
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '{$home_url}';
}, false );
</script>
EOF;
}
?>
フッタテンプレートへの記述でもOK
先程のPHPはwp_footer()へフックして出力しています。
よって、お使いのテーマのfooter.phpやheader.phpなどに直接スクリプト部分を記述しても動作します。
functions.phpへの追記は誤りがあると即サイトの表示が不可となるため、初心者の方はフッタテンプレートの</body>タグ直前に下記のようにスクリプト部分のみ記述してもよいでしょう。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/thanks/'; //サンクスページURL
}, false );
</script>また、ページごとに任意のスクリプトやCSSを記述できるカスタムフィールドを備えているテーマもありますので、こちらを利用してもよいですね。
on_submitが使えないということは…
いかがでしたでしょうか？
これで無事に送信完了後にサンクスページを表示させることができたはずです。
ところでon_sent_okとon_submitが使えなくなることで混乱があったかと思いますが、ほかの影響はないの？
そうです！
これまでアナリティクスでフォーム送信をon_submitでコンバージョン計測していた手法も使えなくなります。
同じくDOMイベントで対処可能です↓↓
