Modulo di contatto 7 - aggiungi la funzione personalizzata all'e-mail invia

Question

Stai solo giocando con Wordpress/Contact Form 7.

È possibile aggiungere la funzione javascript personalizzata all'evento di invio e-mail di successo?

Answer 1

Write questo nelle impostazioni aggiuntive nella parte inferiore della pagina di configurazione modulo di contatto:

on_sent_ok: "some js code here" 

UPDATE: Si può usare per richiamare le funzioni in questo modo:

on_sent_ok: "your_function();" 

O scrivere del codice (questo reindirizza alla pagina di ringraziamento):

on_sent_ok: "document.location='/thank-you-page/';" 

Answer 2

Esempio 1:

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

Esempio 2: In forma di script:

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

Poi nella parte inferiore della pagina di amministrazione in "Impostazioni aggiuntive" inserire il seguente:

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

Answer 3

Il modulo di contatto 7 emette un numero di eventi Javascript che si illuminano fino all'oggetto del documento. Nella versione 4.1 possono essere trovati in contact-form-7/includes/js/scripts.js. Se stai usando jQuery è possibile accedere a quegli eventi come questo:

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

Answer 4

provare questo:

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

}); 

Answer 5

Solo una breve nota che on_sent_ok è deprecato.

Il modulo di contatto 7 utilizza ora listener di eventi, come questo;

<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> 

Quindi aggiungere questo all'azione wp_footer.

come questo;

add_action('wp_footer', 'wp1568dd4_wpcf7_on_sent'); 

function wp1568dd4_wpcf7_on_sent() { 
    // the script above 
}