Formulario de contacto 7 - agregar una función personalizada en el envío de correo electrónico

Question

Simplemente jugando con Wordpress/Contact Form 7.

¿Es posible agregar una función de JavaScript personalizada en el evento de envío de correo electrónico exitoso?

Answer 1

escribir esto en la configuración adicional en la parte inferior de la página de configuración de formulario de contacto:

on_sent_ok: "some js code here" 

ACTUALIZACIÓN: Se puede utilizar para llamar a funciones como esto:

on_sent_ok: "your_function();" 

O escribir algo de código (esto redirige a la página de agradecimiento):

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

Answer 2

Ejemplo 1:

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

Ejemplo 2: En forma de script:

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

Luego, en la parte inferior de la página de administración bajo "Otros parámetros" poner el siguiente:

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

Answer 3

Formulario de contacto 7 emite una serie de eventos Javascript que aparecen en el objeto del documento. En la versión 4.1 se pueden encontrar en contact-form-7/includes/js/scripts.js. Si estás usando jQuery se puede acceder a esos eventos como éste:

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

probar esto:

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

}); 

Answer 5

Sólo una pequeña nota que on_sent_ok está en desuso.

Formulario de contacto 7 ahora está utilizando escuchas de eventos, como esta;

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

A continuación, agregue esto a la acción wp_footer.

les gusta esto;

add_action('wp_footer', 'wp1568dd4_wpcf7_on_sent'); 

function wp1568dd4_wpcf7_on_sent() { 
    // the script above 
}