Contact Form 7 リダイレクトの設定 DOMイベントで



Contact Form 7で送信完了ページにリダイレクトしたり、Googleアナリティクスのトラッキングを取るためにon_sent_okフックを使っているんですが、

on_sent_ok のフックを使用する方法は現在では非推奨になっています。この機能は2017年中に廃止される予定です。

とのこと。

on_sent_okフックを使かわないでDOMイベントで対応するそうです。
詳しくは公式サイトにも書かれていますが、備忘録として残しておきます。

on_sent_ok を DOM イベントに置き換える

送信完了後に別ページにリダイレクトする場合(サンキューページへ遷移する場合など)

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

http://example.com/sent_okの部分を遷移したいURLにする。

このスクリプトを該当のフォームに挿入する。
これはfunctions.phpで対応。

//フッターにスクリプト表示
function add_footer_script() {
	if(is_page('entryform')){
		echo '<script type="text/javascript">
        document.addEventListener( \'wpcf7mailsent\', function( event ) {
            location = \'/sent_ok\';
        }, false );
      </script>';
	}
}
add_action( 'wp_print_footer_scripts', 'add_footer_script', 100 );

2行目で、「entryform」というページのみに表示させるよう条件分岐
3行目のecho~以下にスクリプトを挿入。
sent_okというURL(スラッグ)のページへリダイレクト

特定のコンタクトフォームのみに適用したい場合はコンタクトフォームのIDを指定する

//フッターにスクリプト表示
function add_footer_script() {
	if(is_page('entryform')){
		echo '<script type="text/javascript">
        document.addEventListener( \'wpcf7mailsent\', function( event ) {
          if ( \'1515\' == event.detail.contactFormId ) {
            location = \'/sent_ok\';
          }
        }, false );
      </script>';
	}
}
add_action( 'wp_print_footer_scripts', 'add_footer_script', 100 );

上記の場合はコンタクトフォームIDが1515

Googleアナリティクスのトラッキング

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    ga('send', 'event', 'Contact Form', 'submit');
}, false );
</script>

イベントカテゴリーが “Contact Form”、イベントアクションが “submit” のイベントとしてトラッキング

function add_head_script() {
echo '<script>
		document.addEventListener( 'wpcf7mailsent', function( event ) {
   		 ga('send', 'event', 'Contact Form', 'submit');
		}, false );
	</script>'."\n";
}
add_action('wp_head', 'add_head_script');

※HTMLヘッダーに挿入する場合(このソース未検証)
※ページリダイレクトとGAトラッキング両方やるなら併せてヘッダーに挿入したほうがスマートかも

詳しくは公式サイトより

on_sent_ok は廃止されます
https://contactform7.com/ja/2017/06/07/on-sent-ok-is-deprecated/

DOM イベント
https://contactform7.com/ja/dom-events/

フォーム送信を Google Analytics でトラッキングする
https://contactform7.com/ja/tracking-form-submissions-with-google-analytics/

送信後に異なる URL にリダイレクトさせるには
https://contactform7.com/ja/redirecting-to-another-url-after-submissions/

シェアする

  • このエントリーをはてなブックマークに追加

フォローする