Help us understand the problem. What is going on with this article?

【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>

konweb
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away