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

メールフォームが簡単に作成できる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>