WordPressのContact Form 7のフォーム送信時に実行する

今回も備忘録です

ContactFormの送信ボタンを押した瞬間にいろいろと動かしたい時ありますよね。
だいたいの機能はContactForm7にあるんですが独自に実装したいときに融通が利きません。
エラーメッセージを個別にしたいとか、表示タイミングや消すタイミングを制御したい場合とか。

そこで送信ボタンを押した際にjQueryやJavaScriptを動かす方法です。
ちなみに単純にsubmitボタンにclickイベントくっつけるだけだと普通に送信が行われて実行されません。(やり方が悪いだけの可能性もありますが・・・)

流れとしては
１．functions.phpで対象のJSを読み込んでおく
２．上記[1]で指定したJSにクリック時の動作を記載しておく
という流れになります。

functions.php に以下のようなものを追記

function submit_cf7_scripts() {
    wp_enqueue_script('submit-cf7-js', get_template_directory_uri() . '/submit-cf7.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'submit_cf7_scripts');

次にテンプレートのあるフォルダ内（/wp-content/themes/の下にある現在使っているテーマフォルダ）に submit-cf7.js ファイルを作成します。
場所を変えたい時はfunctions.phpで指定したディレクトリの記述と一緒に変更してください。

submit-cf7.js (jQuery形式で書いた場合)

jQuery(document).ready(function($) {
    $(document).on('wpcf7invalid wpcf7spam wpcf7mailsent wpcf7mailfailed', function(event) {
        /* 各イベントに対する処理 */
        console.log(event.type + ' event Type issue');
        /* ここにカスタム処理を追加 */
        /* 項目チェックやエラー処理など */
        }
    });
});

もしくは

jQuery('.submitのクラス名など').click(function() {
    console.log('クリックされました！');
    /* alert('clickイベントが発生しました。'); */
});

とすることでContact Form 7の submit クリック時にイベントを動かすことが出来ます。

またContact Form 7のイベントに関して wpcf7invalid wpcf7spam wpcf7mailsent wpcf7mailfailed を複数指定していますが、複数指定も出来ますし単体での指定も可能です。
それぞれの意味は下記を参照してみてください。

Contact Form 7 DOM イベント

WordPress 開発 ContactForm7