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

WordPress(ワードプレス)

2023.04.24

この記事は約3分で読めます。

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

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

送信ボタン押下時（wpcf7submit）

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

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

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

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

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

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

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

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

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

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

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

公式サイトはこちら▼