Edited at

【WordPress】Contact Form 7のajaxトリガーを引き当てる

More than 3 years have passed since last update.

メールフォームが簡単に作成できるContact Form 7。とても便利です。

こちらはsubmit時にajaxで色々な値の更新を行っていますが、submitが成功した場合、エラーが発生した場合などをJSで検知したい時があります。

/wp-content/plugins/contact-form-7/includes/js/scripts.js の中を見ると $(data.into).trigger('wpcf7:hogehoge'); といった記述がいくつか見られます。

$(data.into)に対してtriggerが登録されていますので、これに .no() でイベントを引き当てることができます。

triggerの種類はざっと見た感じ以下があります。

※ wp_head()とwp_footer()関数が記述されていないと、ajaxが動作しませんので、header.phpとfooter.phpに記述するようにしてください。

参考:どうして私のコンタクトフォームは AJAX っぽく動かないのか?

/*

* /includes/js/scripts.js内の記述
*/

// エラー時
$(data.into).trigger('wpcf7:invalid');

// メールアドレスがスパムだった場合
$(data.into).trigger('wpcf7:spam');

// メールの送信が成功した場合
$(data.into).trigger('wpcf7:mailsent');

// メールの送信が失敗した場合
$(data.into).trigger('wpcf7:mailfailed');

// ajaxが成功した際に必ず呼ばれる
$(data.into).trigger('wpcf7:submit');

/*
* /includes/js/jquery.form.js内の記述
*/

// ajax開始前 ajax送信前に実行され、ajax実行時の一番初めに呼ばれるイベント
$.event.trigger('ajaxStart');

// ajax送信時 ajax送信前に実行され、ajaxStartの後に呼ばれる
$.event.trigger('ajaxSend');

// ajax成功時 ajax後に呼ばれる
$.event.trigger('ajaxSuccess');

// ajax失敗時 ajax後に呼ばれる
$.event.trigger('ajaxError');

// ajax完了時 成功、失敗どちらの場合も呼ばれ、ajaxSuccess、ajaxErrorの後に呼ばれる
$.event.trigger('ajaxComplete');

// ajax終了時 成功、失敗どちらの場合も呼ばれ、ajaxCompleteの後に呼ばれる
$.event.trigger('ajaxStop');

結構細かくtriggerが用意してあるので、どんな場合にも対応できそうです。

引き当てる際は $('.wpcf7').on('event_name', function() {}); といった感じで .wpcf7 に対して .on() で引き当てることが可能です。

例えば、エラーがある際にフォームの一番上までスクロールしたい場合は以下のようにします。


hoge.html

<script>

var $ = jQuery.noConflict(); // $の衝突回避
var formTop = $('#form').offset().top;

// ajax後にエラーがある場合のイベントを引き当てる
$('.wpcf7').on('wpcf7:invalid', function() {
// スクロール位置をフォームトップに移動する
$('html, body').animate({
scrollTop: formTop - headerHeight
}, 700);
});
</script>