だーるいね。
どういうアレか
CF7にはサンクスページがない。ページ遷移がない。
アフィリエイトとかで、サンクスページにタグを仕込む事がある。
どうすんだよ、って話。
やりたいこと
フォーム送信完了時にjsを発火させたい。
当然ながらエラー時には発火させたくない。
サンクスページ設置（ページ遷移）はしたくない。
参考にしたかった
仕様が変わってるくさい。
現状、「contact-form-7/includes/js/scripts.js」がない。
調べた
公式を読んで解決した。
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '【CF7のID】' == event.detail.contactFormId ) {
}
/* 発火させたい内容 */
}, false );変数「wpcf7Elm」を宣言してイベントを取得。
送信完了時をトリガーにするから指定イベントは「wpcf7mailsent」。
ついでに、「contactFormId」で特定のフォームを指定できるのも嬉しい。この場合のIDはショートコード内のidじゃなくて、「コンタクトフォームの編集」のURLにあるpostの値。以前はショートコードのIDも同じだったんだけど、今は変わってた。
掘り下げてやっていく
初期状態のフォームが前提で、指定したコンタクトフォームの指定した項目の内容を拾って出力する場合。
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '****' == event.detail.contactFormId ) {
var inputs = event.detail.inputs;
for ( var i = 0; i < inputs.length; i++ ) {
if ( 'your-name' == inputs[i].name ) {
var valueName = inputs[i].value;
console.log(valueName);
}else if('your-email' == inputs[i].name ){
var valueEmail = inputs[i].value;
console.log(valueEmail);
}else if('your-subject' == inputs[i].name ){
var valueSubject = inputs[i].value;
console.log(valueSubject);
}else if('your-message' == inputs[i].name ){
var valueMessage = inputs[i].value;
console.log(valueMessage);
}
}
}
}, false );アラートはめんどくさいからコンソールに出力するようにしたのでそっちで確認。
まとめ
5年以上経てば仕様も変わってるだろうってことで、当然組み方だって変わる。
それは今後も同じことなので、通用しなくなったら新しい手法でやっていかないといけない。
今回はアフィタグだから対応年数的に別段問題にならないんだけど、まあそれも大型アップデートが来たらって話で、アテにできない安心感ですね。
ともあれ、CF7はサンクスページがないので計測関連で色々と面倒がある。WPではメジャーだけどタグ配布側がカバーしきれないところにいる感じなんで、使うなら知っとけって内容かもですね。
おまけ：functions.phpで管理したい場合
ページ別に入力するよりもfunctions.phpで管理したほうが楽じゃない？ってことで。
そうすると一元管理しながら2重の指定ができるようになる。
- phpで挿入ページを指定
- jsで発火フォームを指定
これにより、フォームは使いまわしてるけど特定ページのものだけ対象に取るということができるようになる。
例えばこんな感じ。
<?php
add_action('wp_head', 'function_sample');
function function_sample(){
// ページ指定
if( is_page(array(***,***,***))){
?>
<script type="text/javascript">
var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('wpcf7mailsent', function(event) {
var cf7ID = event.detail.contactFormId;
// フォーム指定
if('***' == cf7ID || '***' == cf7ID || '***' == cf7ID){
/* 発火させたい内容 */
}
}, false );
</script>
<?php
}
コメント