Contact Form 7 AJAX Callback

cherche autour de cela depuis un moment et ne peut pas venir avec n'importe quelle documentation pour décrire ce que je veux accomplir.

j'utilise wordpress et le formulaire de Contact 7 plugin, tout fonctionne parfaitement, ce que je veux accomplir est d'exécuter un javascript particulier sur le formulaire soumettre, je sais que nous pouvons utiliser" on_sent_ok: "dans les paramètres supplémentaires, mais cela n'effectue que si le formulaire est effectivement soumis.

ce que j'aimerais faire, c'est autre javascript lorsque le formulaire ne soumet pas ok, ce qui renvoie l'utilisateur à la section qui n'a pas été validée.

je peux utiliser le code suivant pour courir après 1.7 s du formulaire soumettre étant cliqué, cependant c'est un peu bâclé comme si l'utilisateur courait avec une connexion lente, il y a un potentiel que cela pourrait courir avant que le formulaire soit soumis correctement. 

 $('.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);
});

y a-t-il une fonction ou un crochet particulier que je puisse utiliser pour exécuter JS lorsque la forme AJAX a terminé?

Merci!

29
demandé sur fish_r 2015-01-06 15:02:29

4 réponses

étant donné la variété des réponses sur ce sujet, le développeur de plugin semble changer d'avis sur la façon dont cela devrait fonctionner toutes les 5 minutes. Actuellement (T1 2017) c'est la méthode de travail: 

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

et les événements valides sont:

  • wpcf7invalid - incendies lorsqu'un formulaire Ajax a été soumis avec succès, mais le courrier n'a pas été envoyé car il y a des champs avec une entrée non valide.
  • wpcf7spam - incendies lorsque la présentation D'un formulaire Ajax a complété avec succès, mais le courrier n'a pas été envoyé parce qu'une possibilité une activité de spam a été détectée.
  • wpcf7mailsent - incendies lorsqu'un Ajax la soumission du formulaire a été complétée avec succès, et le courrier a été envoyé.
  • wpcf7mailfail - incendies lorsqu'un formulaire Ajax a été soumis avec succès, mais il a échoué dans l'envoi de mail.
  • wpcf7submit - incendies lorsqu'un formulaire Ajax a été soumis avec succès, peu importe d'autres incidents.

Sauce: https://contactform7.com/dom-events /

11
répondu Nathan Hornby 2017-03-21 11:42:06

dans la version 3.3 de nouveaux déclencheurs d'événements personnalisés jQuery ont été introduits:

Nouveau: introduire 5 nouveaux déclencheurs d'événements personnalisés jQuery

  • wpcf7: invalide
  • wpcf7: spam
  • wpcf7: mailsent
  • wpcf7: mailfailed
  • wpcf7:soumettre

Vous pouvez utiliser wpcf7:invalid comme dans l'exemple ci-dessous: 

$(".wpcf7").on('wpcf7:invalid', function(event){
  // Your code here
});
50
répondu vicente 2015-10-15 16:39:46

parfois, cela peut ne pas fonctionner, comme Martin Klasson l'a fait remarquer, seul l'événement "submit" fonctionne, très probablement parce qu'il est déclenché par une forme et des bulles jusqu'à l'objet sélectionné. Aussi comme je peux comprendre, maintenant les événements ont d'autres noms, comme "invalide.wpcf7", " mailsent.wpcf7", etc. En bref, cela devrait fonctionner: 

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

explication plus détaillée ici: comment ajouter des paramètres supplémentaires sur erreur dans le formulaire de Contact 7?

2
répondu smesh 2017-05-23 11:47:10

j'ai eu un bon coup à cela, et j'ai trouvé que quand seulement l'événement Submit fonctionne, cela signifie qu'il y a un problème / conflit js dans votre thème.

si c'est un thème personnalisé que vous avez créé, assurez-vous que jQuery et jQuery migrate sont tous les deux chargés, dans cet ordre, et que le formulaire de Contact 7 js est également chargé dans le pied de page.

assurez-vous d'avoir wp_head , et wp_footer dans vos modèles php.

pour DOM events à travail, votre formulaire doit être en mode Ajax. Si la page se recharge lors de la soumission, oubliez les événements DOM. Si l'ID du formulaire apparaît dans L'URL, c'est la même chose. Mon formulaire n'était initialement pas en mode Ajax parce que le formulaire de Contact JS n'était pas chargé, et jQuery migre non plus.

le formulaire doit se comporter exactement comme indiqué sur cette page pour que les événements DOM soient bien allumés. Une fois que tu as ça, ça devrait marcher.

j'ai testé ceci avec jQuery 3.3.1 et Migrate 3.0.1 et l'écouteur d'événements suivant a fonctionné: 

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

pour vérifier si votre thème est le coupable, testez votre forme en utilisant le thème par défaut de Wordpress, s'il fonctionne, vous savez que le problème est de votre côté et pas tellement dans le Doc du dev!

1
répondu clementb 2018-03-16 08:48:15