お問い合わせフォーム7 AJAXコールバック

Question

しばらくこの記事を検索していますが、達成したいことの概要を説明するドキュメントはありません。

私はwordpressとContact Form 7プラグインを使用していますが、すべてが完璧に動作しています。私が達成したいのはフォーム提出時に特定のjavascriptを実行することです。追加設定で "on_sent_ok：フォームが実際に送信された場合にのみ実行されます。

私がしたいのは、フォームがOKを送信しないときに他のjavascriptを実行して、検証しなかったセクションにユーザーを戻すことです。

フォーム送信の1.7秒後に実行するには次のコードを使用できますが、ユーザーが低速接続で実行していたように少しうっすらです。フォームが正しく送信される前に実行される可能性があります。

$('.wpcf7-submit').click(function() { 
setTimeout(function() { 
    if ($('.fs1 input,.fs1 textarea').hasClass('wpcf7-not-valid')) { 
     $('.pop-up-form').removeClass('pustep2').removeClass('pu-closing'); 
     $('.form-step').hide(); 
     $('.fs1').show(); 

    } 
    if ($('.fs2 *').hasClass('wpcf7-not-valid')) { 
     alert('error on page 2 - take user back to the area with issues') 
    } 
}, 1700); 
}); 

フォームAJAXが完了したときにJSを実行するために使用できる特定の機能やフックはありますか？

ありがとうございます！

3.3新しいjQueryのカスタムイベントトリガーが導入されたバージョンで

Answer 1

：

新：

無効wpcf7：スパム

5新しいjQueryのカスタムイベントを紹介して

• wpcf7をトリガーwpcf7：mailsent
• wpcf7：mailfailed
• wpcf7：

を提出あなたは以下の例のようにwpcf7:invalidを使用することができます：それは引き金ているため

が

$(".wpcf7").on('wpcf7:invalid', function(event){ 
    // Your code here 
}); 

Answer 2

時にはそれが最も可能性の高い、イベントが動作Martin Klassonが指摘したように、唯一の「提出」、動作しない場合がありますフォームで選択したオブジェクトまでバブルします。また、私が理解できるように、今イベントは要するになど、「invalid.wpcf7」、「mailsent.wpcf7」のような他の名前を持っている、これは動作するはずです：

jQuery('.wpcf7').on('invalid.wpcf7', function(e) { 
    // your code here 
}); 

ここでは詳細な説明：How to add additional settings on error in Contact form 7?

Answer 3

このトピックに関するさまざまな回答があるため、プラグインの開発者は、これがどのように5分ごとに機能するかについての心が変わっているようです。現在、（Q1 2017）、これは加工方法である：

document.addEventListener('wpcf7mailsent', function(event) { 
    alert("Fire!"); 
}, false); 

、有効なイベントは以下のとおりです。

• は wpcf7invalid - Ajaxのフォーム送信が正常に を完了しましたが、メールはしていない時に火災を の入力が無効なフィールドがあるため送信されました。
• wpcf7spam - 火災Ajaxフォームの提出が が正常に完了しているが、可能 スパム活動が検出されたためメールが送信されていません。
• wpcf7mailsent - Ajax フォーム提出が正常に完了してメールが送信されたときに起動します。
• wpcf7mailfailed - Ajaxフォームの提出が完了したときに発生します。 正常にメールを送信できませんでした。
• wpcf7submit - 火災 Ajaxフォームの提出にかかわらず 他の事件の、正常に完了しました。

ソース：https://contactform7.com/dom-events/