web-dev-qa-db-fra.com

Formulaire de contact 7 AJAX Rappel

J'ai cherché autour de cela pendant un certain temps et je ne peux pas trouver de documentation pour décrire ce que je veux réaliser.

J'utilise wordpress et le plugin Contact Form 7, tout fonctionne parfaitement, ce que je veux réaliser est d'exécuter un javascript particulier lors de la soumission du formulaire, je sais que nous pouvons utiliser "on_sent_ok:" dans les paramètres supplémentaires, mais cela ne fonctionne que si le formulaire est réellement soumis.

Ce que je voudrais faire, c'est de faire un autre javascript lorsque le formulaire ne se soumet pas correctement, ce qui renvoie l'utilisateur à la section qui n'a pas été validée.

Je peux utiliser le code suivant pour exécuter après avoir cliqué sur 1,7s du formulaire, mais c'est un peu bâclé comme si l'utilisateur s'exécutait avec une connexion lente, il est possible que cela s'exécute avant que le formulaire ne 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);
});

Existe-t-il une fonction ou un crochet particulier que je peux utiliser pour exécuter JS lorsque le formulaire AJAX est terminé?

Merci!

javascriptjqueryajaxwordpresscontact-form-7
32
fish_r

Étant donné la variété des réponses sur ce sujet, le développeur du 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 - Se déclenche lorsqu'une soumission de formulaire Ajax s'est terminée avec succès, mais le courrier n'a pas été envoyé car il existe des champs avec une entrée non valide.
  • wpcf7spam - Se déclenche lorsqu'une soumission de formulaire Ajax s'est terminée avec succès, mais aucun courrier n'a été envoyé car une éventuelle activité de spam a été détectée.
  • wpcf7mailsent - Se déclenche lorsqu'une soumission de formulaire Ajax s'est terminée avec succès et qu'un courrier a été envoyé.
  • wpcf7mailfailed - Se déclenche lorsqu'une soumission de formulaire Ajax s'est terminée avec succès, mais il a échoué lors de l'envoi du courrier.
  • wpcf7submit - Se déclenche lorsqu'une soumission de formulaire Ajax s'est terminée avec succès, quels que soient les autres incidents.

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

17
Nathan Hornby

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

Nouveau: introduction de 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
});
55
vicente

Parfois, cela peut ne pas fonctionner, comme Martin Klasson l'a souligné, seul l'événement "soumettre" fonctionne, très probablement parce qu'il est déclenché par un formulaire et des bulles jusqu'à l'objet sélectionné. Aussi, comme je peux le comprendre, les événements ont maintenant d'autres noms, comme "invalid.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 en cas d'erreur dans le formulaire de contact 7?

3
smesh

J'ai fait un essai, et j'ai constaté que lorsque seul l'événement Submit fonctionne, cela signifie qu'il y a un problème/conflit js dans votre thème.

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

Assurez-vous que vous avez wp_head, et wp_footer dans vos modèles php.

Pour que les événements DOM fonctionnent, 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 car le formulaire de contact JS n'était pas chargé et jQuery Migrate non plus.

Le formulaire doit se comporter exactement comme indiqué sur cette page pour que les événements DOM soient déclenchés correctement. Une fois que vous avez cela, cela devrait fonctionner.

J'ai testé cela avec jQuery 3.3.1 et Migrate 3.0.1 et l'écouteur d'événement 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 formulaire en utilisant le thème par défaut de Wordpress, si cela fonctionne, vous savez que le problème est de votre côté et pas tellement dans le document du développeur!

2
clementb