WordPress の鉄板フォームプラグインである Contact Form7
「スクリプトで表示されるだけの送信完了が分かりにくい」という声は多いです。
よって、サンクスページ、つまり、フォームの送信完了画面を表示させたいという要望は多いです。
もちろん、Contact Form7で送信完了後にサンクスページを表示させることは可能です。
しかし、これまでのon_sent_ok redirectが動かなくなってしまうため、少々、混乱があるようです。
これらの解説がいまだに検索上位に表示されてしまうことも原因でしょう。
わたしの記事もご多分に漏れず（笑
あたらめて Contact Form7に送信完了画面を表示する方法を解説したいと思います。
「ネット上の情報を見てもうまくいかない」という方でも必ず解決できるはずです。
サンクスページの準備
まずは前準備として送信が完了した際に表示させる固定ページを任意のパーマリンクで用意します。
例としてexample.com/thanks/のようなページです。
ここまでは OK ですね？
それでは先に進みましょう。
on_sent_ok は廃止される！？
あらたに Contact Form7を導入し、サンクスページを表示したい場合は読み飛ばして構いません。
「これまで問題なかったのにうまくいかなくなった」という方が出てくるはずなので、それを見越して書いています（笑
on_sent_ok:"location='http://example.com/thanks/';"
従来はフォームごとの「その他の設定」でon_sent_okを使い、上記のように指定していました。
“on_sent_ok”とその兄弟設定 “on_submit” は非推奨となっており、 2017 年末までに廃止される予定です。
現状の Contact Form7でも送信・トラッキングとも可能ではあるようですが、設定エラーとなっていまします。
代替として 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 Form7自体にも 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 イベントで対処可能です↓↓
