Di recente, abbiamo riscontrato un problema in cui stavamo utilizzando l’impostazione Posta (2) per inviare un’e-mail automatica a un utente che invia il modulo con un allegato. Il problema era che questo allegato era un file di 2 MB, quindi prima di vedere il messaggio di successo, devi attendere l’invio dell’allegato che può richiedere un po’ di tempo. Per questo motivo, gli utenti finiscono per inviare i moduli varie volte causando invii multipli ed e-mail inviate a entrambe le parti (soprattutto quando si utilizza un host SMTP di terze parti come SendGrid o MailGun).
Ecco il metodo che abbiamo usato per impedire questo tipo di azione che può essere semplicemente aggiunto al tuo file functions.php per essere chiamato in ogni pagina.
<?php
// Prevent Multi Submit on all WPCF7 forms
add_action( 'wp_footer', 'prevent_cf7_multiple_emails' );
function prevent_cf7_multiple_emails() {
?>
<script type="text/javascript">
var disableSubmit = false;
jQuery('input.wpcf7-submit[type="submit"]').click(function() {
jQuery(':input[type="submit"]').attr('value',"Sending...");
if (disableSubmit == true) {
return false;
}
disableSubmit = true;
return true;
})
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7_before_send_mail', function( event ) {
jQuery(':input[type="submit"]').attr('value',"Sent");
disableSubmit = false;
}, false );
wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
jQuery(':input[type="submit"]').attr('value',"Submit")
disableSubmit = false;
}, false );
</script>
<?php
} ?>Quello che succede sopra è cambiare il testo del pulsante di invio dei moduli in ‘Invio…’ e disabilitare qualsiasi ulteriore clic fino alla consegna del messaggio. Una volta consegnato il messaggio, il pulsante di invio cambierà in “Inviato”.
Oltre a questo, se ci sono errori nel modulo, possiamo utilizzare l’ wpcf7invalidevento DOM che possiamo utilizzare per riportare il valore del pulsante di invio al valore originale; nel nostro caso, l’abbiamo cambiato in ‘Invia’.
Nel nostro caso, avevamo pagine con più moduli e avevamo solo bisogno che questo fosse aggiunto a uno dei moduli sul sito web. Per fare ciò, puoi visualizzare l’origine della pagina e ottenere l’attributo ID per il modulo (es. #wpcf7-f4-o1) e aggiungerlo semplicemente prima di ciascuno dei selettori, in questo modo; jQuery('#wpcf7-f4-o1 :input[type="submit"]')
Ci sono altri modi per farlo, come l’utilizzo di un preloader all’invio, ma il nostro particolare cliente è stato piuttosto soddisfatto della soluzione che gli abbiamo fornito.
Sentiti libero di lasciare un commento qui sotto se questo ha aiutato o se hai un altro metodo preferito per eseguire tale compito.
Se hai problemi con il mobile aggiungi semplicemente il seguente codice alla fine sopra il </script>tag:
wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
jQuery('#wpcf7-f549-o1 :input[type="submit"]').attr('value',"Submit")
disableSubmit = false;
}, false );Cambia semplicemente il valore Submitin quello che vuoi che sia il testo del pulsante se ci sono errori di convalida.