web-dev-qa-db-ja.com

問い合わせフォーム7 AJAX Callback

しばらくこれについて探していて、私が達成したいことを概説するドキュメントを思い付くことができません。

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

私がやりたいのは、フォームが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を実行するために使用できる特定の関数またはフックはありますか？

ありがとう！

javascriptjqueryajaxwordpresscontact-form-7
32
fish_r

このトピックに関するさまざまな反応を考えると、プラグイン開発者は、これが5分ごとにどのように機能するかについて考えを変えているようです。現在（2017年第1四半期）、これが作業方法です。

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

有効なイベントは次のとおりです。

  • wpcf7invalid— Ajaxフォームの送信が正常に完了したが、入力が無効なフィールドがあるためメールが送信されなかったときに発生します。
  • wpcf7spam— Ajaxフォームの送信が正常に完了したが、スパム活動の可能性が検出されたためメールが送信されなかったときに起動します。
  • wpcf7mailsent— Ajaxフォームの送信が正常に完了し、メールが送信されたときに起動します。
  • wpcf7mailfailed— Ajaxフォームの送信が正常に完了したが、メールの送信に失敗したときに起動します。
  • wpcf7submit—他のインシデントに関係なく、Ajaxフォームの送信が正常に完了したときに起動します。

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

17
Nathan Hornby

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

新規：5つの新しいjQueryカスタムイベントトリガーを導入

  • wpcf7：無効
  • wpcf7：spam
  • wpcf7：mailsent
  • wpcf7：mailfailed
  • wpcf7：submit

次の例のようにwpcf7:invalidを使用できます。

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

Martin Klasson が指摘したように、動作しない場合があります。「送信」イベントのみが動作します。これは、フォームによってトリガーされ、選択したオブジェクトにバブルアップするためです。また、理解できるように、イベントには「invalid.wpcf7」、「mailsent.wpcf7」などの他の名前が付けられています。要するに、これは機能するはずです。

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

ここでより詳細な説明： お問い合わせフォーム7でエラー時に追加設定を追加する方法？

3
smesh

私はこれにかなり取り組みましたが、Submitイベントのみが機能する場合、それはテーマにjsの問題/競合があることを意味していることがわかりました。

作成したカスタムテーマの場合は、jQueryとjQuery migrateの両方がこの順序でロードされ、Contact form 7 jsもフッターにロードされていることを確認してください。

wp_head、およびwp_footer phpテンプレート。

DOMイベントが機能するには、フォームがAjaxモードになっている必要があります。送信時にページがリロードされる場合は、DOMイベントを忘れてください。フォームIDがURLに表示されている場合、同じことです。 Contact Form JSがロードされず、jQuery Migrateでもないため、フォームは当初Ajaxモードではありませんでした。

DOMイベントが適切に発生するためには、フォームは このページに表示されているとおり で動作する必要があります。それが得られたら、動作するはずです。

これをjQuery 3.3.1およびMigrate 3.0.1でテストし、次のイベントリスナーが機能しました。

document.addEventListener( 'wpcf7mailsent', function( event ) {
    console.log('mail sent OK');
    // Stuff
}, false );

テーマが原因かどうかを確認するには、Wordpressのデフォルトテーマを使用してフォームをテストします。それが機能する場合は、開発者のドキュメントではなく、問題が終わりであることがわかります。

2
clementb