Contact form7はプラグインにサンクスページ表示の機能はついていません。しかし、サンクスページが表示できなわけではなく、javascriptでサンクスページを表示できるTipsで対応できます。
この記事では、Contact form7でサンクスページを表示させるTipsを使ったけど、『なぜかサンクスページに遷移しない』というトラブルの対処方法についてまとめています。
もし、Contact form7でサンクスページを表示させようとして、上手くいかないな？という人はぜひ読み進めてください。
Contact form7でサンクスページに遷移させる方法
最も簡単な方法は Contact Form 7 のカスタム DOM イベントを使い、サンクスページに遷移するJavaScript を実行することです。
カスタムDOMイベントって何？という場合は、以下をご参照ください。
Contact form 7は、メール送信時にwpcf7mailsentカスタムイベントが発生します。
以下は そのwpcf7mailsent イベント発生を捕まえて、異なる URL にリダイレクトさせるスクリプトの例です:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>locationの部分のURLをサンクスページのURLにすればOKです。
このjavascriptをfooterで読み込めばいいのですが、よくわからないという方はプラグインを使うのがおススメです。
このサンクスページを表示するカスタマイズ自体は書くだけで簡単に組み込めるので、初心者の方にもおススメの方法です。
コンタクトフォーム毎にサンクスページを分ける
コンタクトフォーム毎にサンクスページを分けるには次のようにfunction.phpに追加します。
カスタムイベントに含まれるフォームIDを見て、フォームIDごとにサンクスページを分けることができます。
000はcontact form7のショートコードに割り当てられたID（フォームIDと同じ）です。
add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '000' == event.detail.contactFormId ) {
location = 'https://hoge.com/contact/contact_thanks';
}
else
if ( '000' == event.detail.contactFormId ) {
location = 'https://hoge.com/campaign/coupon_thanks';
}
else
if ( '000' == event.detail.contactFormId ) {
location = 'https://hoge.com/document/doc_thanks';
}
}, false );
</script>
EOD;
}引用元：https://digital-lab.tokyo/web%E5%85%A8%E8%88%AC/685/
Contact form7は使っていない時でも常に読み込まれる
Contact form7はショートコードで設置します。しかし、 Contact form7のショートコードを設置していないページでも、プラグインが読み込まれるのはよく知られた話です。
Google recapthaが常に表示される
Contact form7でインテグレーションからGoogle recaptcha v3を有効にすると全ページで表示されます。
特定ページだけContact form7を読み込むには？
ここまでもよく知られた話で、Contact form7を特定の固定ページだけで読み込むようなカスタマイズをしている人は多いと思います。
私の場合はplugin load filterを使って特定ページだけContact form7を読み込むようにしています。
しかし、そこまでやりたくないという人は、次のような方法で対処していることが多いようです。
Contact form7 cssとjsだけ読み込まない方法
cssとjsだけというのが個人的にはよくわからないのですが、検索するととても多くヒットします。Page speed Insightのブロッキング対策だと思います。
そういうカスタマイズをしたWebサイトを第三者が引き継いで、他のページにコンタクトフォームを追加した時から悲劇が始まります。
Contact form7を特定ページだけ読み込んでいるサイトで起きた悲劇
Contact form7を特定ページだけ読み込んでいるサイトを引き継いでコンタクトフォームを追加してみるとおそらく2つの状態が起きます。
- 別の固定ページにContact form7のショートコードがそのまま表示される
- 別の固定ページにContact form7のフォームは表示されてメール送信できるのに、サンクスページに遷移しない
別の固定ページにContact form7のショートコードがそのまま表示される
原因
単純にContact form7のプラグインが読み込まれていないのですぐに気が付きます。
特定のページだけ、Contact form7のプラグインを読み込む設定になっているはずです。
対策
pluginの読み込み指定で、Contact form7を設置している固定ページが有効になっているか確認しましょう。
別の固定ページにContact form7のフォームは表示されてメール送信できるのに、サンクスページに遷移しない
これは猛烈にわかりにくいです。メール送信できてしまうので、pluginは動いているように見えますので、何が悪いのか原因をつかむのに苦労します。
ただ、送信した時のAjaxの動きが無かったので、なんかまともに動いていないな、と言うのはわかりました。
原因
Contact form7のプラグインは読み込まれています。おそらく、Contact form7のjavascriptが読み込まれていません。つまり、カスタムDOMイベントが発生しないからサンクスページに遷移できていない。
特定のページだけ、Contact form7のjavascriptを読み込む設定になっているはずです。
/** * contact form 7のjsとcssを停止 */
function my_remove_cf7_js_css() {
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
}
add_action( 'after_setup_theme', 'my_remove_cf7_js_css' );/*** contact form 7のjsとcssを読み込み */
function my_enable_cf7_js_css() { /** * スラッグが「contact」のページだけ読み込み */
if( is_page( 'contact' ) ) {
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) { wpcf7_enqueue_scripts(); }
if ( function_exists( 'wpcf7_enqueue_styles' ) ) { wpcf7_enqueue_styles(); } }
} add_action( 'wp_enqueue_scripts', 'my_enable_cf7_js_css' );対策
Contact form7のjavascriptの読み込み指定で、固定ページのslugが固定されていないか確認しましょう。
contactというslugだけ書かれているのが原因です。
次のように、設置した別のページのslugも追加しましょう。
/*** contact form 7のjsとcssを読み込み */
function my_enable_cf7_js_css() { /** * スラッグが「contact」のページだけ読み込み */
if( is_page( 'contact' ) || is_page( '他のslug' ) ) {
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) { wpcf7_enqueue_scripts(); }
if ( function_exists( 'wpcf7_enqueue_styles' ) ) { wpcf7_enqueue_styles(); } }
} add_action( 'wp_enqueue_scripts', 'my_enable_cf7_js_css' );古いサンクスページへの遷移方法を使っていないか確認すべし
公式サイトに、
on_sent_ok と on_submit は Contact Form 7 5.0 で正式に削除されました。
とありますので、その記述を使っていないか確認した方が良いでしょう。
追加設定 “on_sent_ok” はフォーム送信が完了しメールの送信にも成功した時に実行される JavaScript コードを割り当てるために使用されるものです。ウェブアナリティクスサービスでフォーム送信をトラッキングしたり、フォーム送信後に異なるページにリダイレクトさせる用途でよく使われます。
“on_sent_ok” とその兄弟設定 “on_submit” は非推奨となっており、2017年末までに廃止される予定です。これらの設定を使うことが即危険だということではないですが、万が一このプラグインやあるいはあなたのサイトの他の部分に脆弱性があった場合にリスクを増大させる可能性があります。より安全な代替方法に置き換えるべきです。
続報:
on_sent_okとon_submitは Contact Form 7 5.0 で正式に削除されました。引用元：https://contactform7.com/ja/2017/06/07/on-sent-ok-is-deprecated/
検証ツールなどでJavascriptのエラーが無いことを確認すべし
Contact form7に限りませんが、何かが正常に動かない時に疑うべきは、Javascriptにエラーが出ていないかどうか？です。
実際にはContact form7とは直接関係ないですが、Google recaptcha v3との組み合わせでメールが正常に送信できななくなる現象も、recaptchaのjavascriptのエラーが原因の場合がほとんどです。
様々なサイトを拝見していると、javascriptエラーが出まくっているサイトがいかに多いか。そうしたケースは、コピペミス、コピペ位置の間違い、さらに古いプラグインを使っていてエラーになっているなどが原因です。
こういう人たちは、Chromeの検証ツールなどを使わないので、そもそもjavascriptにエラーが出ていることを認識していません。ですので、そのまま放置されています。
ろくに原因解析もできない人たちが何でもコピペできてしまうのも考えものだと思いました。
まとめ
Contact form7は非常に多くの利用者がいますので、ネットで検索して訳も分からずコピペしている人が多いと思いますContact form7の作者はあまり親切じゃないので、何か問題があったら自分で解決できるようにしておきましょう。
