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

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

サイト運営

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を読み込むようにしています。

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の作者はあまり親切じゃないので、何か問題があったら自分で解決できるようにしておきましょう。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました