スキルアップを始める!

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

WordPress(ワードプレス)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

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 [日本語]
URLをコピーしました!