web-dev-qa-db-fra.com

Formulaire de contact 7 - ajouter une fonction personnalisée à l'envoi d'e-mail

Je joue avec Wordpress / Contact Form 7.

Est-il possible d'ajouter une fonction javascript personnalisée lors d'un événement d'envoi d'email réussi?

wordpresswordpress-plugincontact-form-7
9
Iladarsda

Ecrivez ceci dans les paramètres supplémentaires au bas de la page de configuration du formulaire de contact:

on_sent_ok: "some js code here"

UPDATE: Vous pouvez l'utiliser pour appeler des fonctions comme celle-ci:

on_sent_ok: "your_function();"

Ou écrivez du code (celui-ci redirige vers la page de remerciement):

on_sent_ok: "document.location='/thank-you-page/';"
27
Igor Jerosimić

Le formulaire de contact 7 émet un certain nombre d’événements Javascript qui se propagent jusqu’à l’objet document. Dans la version 4.1, ils se trouvent dans contact-form-7/includes/js/scripts.js. Si vous utilisez jQuery, vous pouvez accéder à ces événements comme ceci:

$(document).on('spam.wpcf7', function () {
    console.log('submit.wpcf7 was triggered!');
});

$(document).on('invalid.wpcf7', function () {
    console.log('invalid.wpcf7 was triggered!');
});

$(document).on('mailsent.wpcf7', function () {
    console.log('mailsent.wpcf7 was triggered!');
});


$(document).on('mailfailed.wpcf7', function () {
    console.log('mailfailed.wpcf7 was triggered!');
});
26
likesalmon

essaye ça:

$( document ).ajaxComplete(function( event,request, settings ) {
   if($('.sent').length > 0){
       console.log('sent');
   }else{
       console.log('didnt sent');
   }

});
3
Erez Lieberman

Juste une note rapide que on_sent_ok est obsolète.

Le formulaire de contact 7 utilise maintenant des écouteurs d'événements, comme ceci;

<script type="text/javascript">
  document.addEventListener( 'wpcf7mailsent', function( event ) {
      if ( '11875' == event.detail.contactFormId ) { // if you want to identify the form
       // do something
      }
  }, true );
</script>

Ajoutez ensuite ceci à l'action wp_footer.

comme ça;

add_action( 'wp_footer', 'wp1568dd4_wpcf7_on_sent' );

function wp1568dd4_wpcf7_on_sent() { 
  // the script above
}
1
Chris Pink

Exemple 1: 

on_sent_ok: "location = 'http://mysite.com/thanks/';"

Exemple 2: Dans le script de formulaire:

<div id="hidecform">
<p>You name<br />
    [text* your-name] </p>
...
</div>

Ensuite, au bas de la page d'administration, sous "Paramètres supplémentaires", indiquez ce qui suit:

on_sent_ok: "document.getElementById('hidecform').style.display = 'none';"
1
Clevelus