お問い合わせはコチラから

Contact form7 サンクスページに遷移しない、その原因は?

サイト運営

Contact form7はプラグインにサンクスページ表示の機能はついていませんが、javascriptでサンクスページを表示できるTipsがよく知られています。

この記事では、Contact form7でサンクスページを表示させるTipsを使ったけどなぜかサンクスページに遷移しないというトラブルの対処方法についてまとめています。

もし、Contact form7でサンクスページを表示させようとして、上手くいかないな?という人はぜひ読み進めてください。

Contact form7でサンクスページに遷移させる方法

最も簡単な方法は Contact Form 7 のカスタム DOM イベントを使って JavaScript を実行することです。

カスタムDOMイベントについては、以下を参照

以下は wpcf7mailsent イベント発生時に異なる URL にリダイレクトさせるスクリプトの例です:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>

このサンクスページを表示するカスタマイズ自体は書くだけで簡単に組み込めるので、おススメです。

コンタクトフォーム毎にサンクスページを分ける

コンタクトフォーム毎にサンクスページを分けるには次のようにfunction.phpに追加します。

000はcontact form7のショートコードに割り当てられた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を読み込むようにしています。

Plugin Load Filter
Dynamically activate the selected plugins for each page. Response will be faster by filtering plugins.

しかし、そこまでやりたくないという人は、次のような方法で対処していることが多いようです。

Contact form7 cssとjsだけ読み込まない方法

cssとjsだけというのが個人的にはよくわからないのですが、検索するととても多くヒットします。Page speed Insightのブロッキング対策だと思います。

そういうカスタマイズをしたWebサイトを第三者が引き継いで、他のページにコンタクトフォームを追加した時から悲劇が始まります。

Contact form7を特定ページだけ読み込んでいるサイトで起きた悲劇

Contact form7を特定ページだけ読み込んでいるサイトを引き継いでコンタクトフォームを追加してみるとおそらく2つの状態が起きます。

  1. 別の固定ページにContact form7のショートコードがそのまま表示される
  2. 別の固定ページに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の作者はあまり親切じゃないので、何か問題があったら自分で解決できるようにしておきましょう。

 

タイトルとURLをコピーしました