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

2017-08-172024-05-04

WordPress Tips

この記事にはプロモーションが含まれています

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トラッキング両方やるなら併せてヘッダーに挿入したほうがスマートかも