・contactform7がバージョンアップし、on_confirm、on_sent_okが利用できない
・contactform7 add confirmも2018/02/06にアップデート
ということで、調べながらやりました。
▼やりたいこと
フォームの遷移をGAで以下のように計測するよう設定したい。
・入力:/sampleform ←入力ページのURLそのまま
・確認:/sampleform_confirm.html ←確認画面遷移時に仮想URLを送る
・完了:/sampleform_complete/ ←完了時は完了画面へ遷移させてこのURLを計測させる
▼プラグインのバージョン
Contact Form 7:4.9.2
Contact Form 7 add confirm:5.0
▼対応方法
1.固定ページで完了ページを作成
http://sample.com/sampleform_complete というURLで作成
2.コンタクトフォーム編集画面から、フォームのボタンを編集
入力ページでは 「確認」ボタン
確認ページでは 「戻る」ボタン、「送信」ボタン
が表示されるように、
ボタン箇所を以下の通り編集する。
<p class="form_btn wpcf7c-elm-step1">[confirm]</p>
<div class="wpcf7c-elm-step2">
<p>[back]</p>
<p>[submit]</p>
</div>
3.functions.phpに以下コードを追記する
<?php
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '123' == event.detail.contactFormId ) {
//フォームID=123の時のみ動作させる
if(event.detail.status == "mail_sent"){
location.href = "http://sample.com/sampleform_complete/";
}else{
ga('send', 'pageview', {'page':'/sampleform_confirm.html', 'title':'サンプルフォーム(確認)'});
}
}
}, false );
</script>
<?php
}
?>
★補足事項★
●DOMイベント「wpcf7submit」をlistenする
→確認、完了を拾う(戻ったときは動かない)。
●if ( ‘123’ == event.detail.contactFormId ) { でフォームIDを指定し、特定のフォームだけ動かす
→フォームタグ
[contact-form-7 id=”123″ title=”サンプルフォーム”]
のid(この場合は123)を指定する
●イベントオブジェクトのプロパティでstatusを拾う
→mail_sentの時は送信完了、それ以外は確認、とする。
add confirm制作会社さんのサイトに書いてあった以下コードが動かず、
switch ( event.detail.status ) {
case 'wpcf7c_confirmed':
確認後に実施したい処理
break;
}
event.detail.statusの中身を確認したら、
完了時 event.detail.status=”mail_sent”
確認時 event.detail.status=””
だったため。
●確認端末は以下
Win10 / Firefox
Win10 / Chrome
Win10 / IE11
Win10 / MicrosoftEdge
iOSX / Safari
iPhone10 / Safari
Android / Chrome
▼参考サイト
DOM イベント | Contact Form 7 [日本語]
on_sent_ok は廃止されます | Contact Form 7 [日本語]
Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン | アイティーエー株式会社