WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。

管理画面から

WordPressの管理画面 > コンタクトフォームの編集画面 > その他の設定
を選択して、記入エリアにon_sent_ok:(送信完了時)、on_submit:(送信された時常に) のキーワードに続けて実行したいjavascriptのコードをテキスト形式で記述する。

on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"

恐らく最も簡単な方法です。google Analyticsのコードを追加したりはこれで十分だと思います。
しかし、複雑なコードを書いたり、自前のスクリプトで即時関数の中にあるオブジェクトなどを触ろうとすると少し大変です。

設定されているdispatcherを利用する

ContactForm7がサイト上で実行しているjsファイルを見ていると次のようなdispatcherが設定されていました。

// contact-form-7/includes/js/scripts.js
//   wpcf7.triggerEvent
$(data.into).trigger('wpcf7:invalid');
$(data.into).trigger('wpcf7:spam');
$(data.into).trigger('wpcf7:mailsent');
$(data.into).trigger('wpcf7:mailfailed');
$(data.into).trigger('wpcf7:submit');

管理画面から設定できる on_sent_ok、on_submit はそれぞれ mailsent.wpcf7、submit.wpcf7 でイベントの発火を受け取ることができそうです。
それ以外にもエラーになった時やメール送信失敗時のevent dispacherも用意されています。

on_submit (送信された時常に) 実行したい場合は次のようにdocumentにイベントを付けておけばOKです。

$(document).on('wpcf7:submit', function(evt) {
  alert('submit');
});

このdeprecatedさえれるイベントを利用すれば、独自に書いているjsの中でも比較的自由にContactForm7のイベント実行時に合わせて独自の処理を加える事ができそうです。

---

[参考]

• その他の設定 | Contact Form 7 [日本語]
• 意外と知らない !? お問い合わせフォーム「Contact Form 7」をもっと便利に使いこなすための3つのポイント | 無料WordPressテーマ BizVektor [ ビズベクトル ]
• wordpress - Contact Form 7 - add custom function on email send - Stack Overflow

小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!