WordPress Tips

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

2017-08-17

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

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/

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大30%キャッシュバッグ月額693円&ドメイン永久無料 - 2024年5月1日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年4月19日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WordPress Tips
-