【Contact Form 7】JavaScriptで送信ボタン押下時・送信成功時などの処理を設定する（DOM イベント）

Contact Form 7で送信ボタンを押した時、送信成功時などにJavaScript（DOM イベント）で処理を加える方法です。

今回はリダイレクトを設定してみます。

送信ボタン押下時（wpcf7submit）

条件に関係なく、Ajax のフォーム送信が完了した場合に実行されます。

<script>
document.addEventListener( 'wpcf7submit', function( event ) {
    location = 'https://example.com/thanks/';
}, false );
</script>

送信成功時（wpcf7mailsent）

Ajax のフォーム送信が完了し、またメールの送信も行われた場合に実行されます。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'https://example.com/thanks/';
}, false );
</script>

スパム行為の疑い時（wpcf7spam）

Ajax のフォーム送信が完了し、スパム行為の疑いがあった場合に実行されます。

<script>
document.addEventListener( 'wpcf7spam', function( event ) {
    location = 'https://example.com/thanks/';
}, false );
</script>

正しくない入力があった時（wpcf7invalid）

Ajax のフォーム送信が完了したが、正しくない入力があった場合に実行されます。

<script>
document.addEventListener( 'wpcf7invalid', function( event ) {
    location = 'https://example.com/thanks/';
}, false );
</script>

メールの送信に失敗時（wpcf7mailfailed）

Ajax のフォーム送信が完了したが、メールの送信には失敗した場合に実行されます。

<script>
document.addEventListener( 'wpcf7mailfailed', function( event ) {
    location = 'https://example.com/thanks/';
}, false );
</script>

まとめ

Contact Form 7では、様々なDOMイベントで制御できます。

公式サイトはこちら▼

DOM イベント | Contact Form 7 [日本語]

contactform7.com