Un utente ha compilato un modulo, ha cliccato «Invia» e non è successo nulla. La pagina si è ricaricata, i campi si sono svuotati, ma non è chiaro se l'email sia stata effettivamente inviata.

Contact Form 7 non mostra notifiche visive dopo l'invio nella configurazione base. I messaggi di successo o errore compaiono sotto il modulo in caratteri piccoli, senza animazione, senza enfasi. Gli utenti semplicemente non li notano e se ne vanno senza sapere se il loro invio è stato ricevuto.

Puoi risolvere questo problema in 10 minuti. Ti servono solo Contact Form 7, un qualsiasi plugin per popup con API JavaScript e 25 righe di codice. Il risultato: dopo l'invio del modulo, una finestra ampia appare con un effetto fluido sopra la pagina (verde per il successo, rossa per l'errore) e scompare automaticamente dopo un intervallo prestabilito. Nessun ricaricamento della pagina, nessun lead perso.

💡 Panoramica rapida:

• Quali eventi DOM genera Contact Form 7 e come i nomi moderni differiscono da quelli legacy
• Come creare popup di successo ed errore in qualsiasi plugin per popup WordPress
• Stili CSS per i popup: overlay, animazione, z-index
• Uno script jQuery pronto all'uso: collegamento degli eventi CF7 all'apertura e chiusura automatica del popup
• Un'alternativa moderna che usa addEventListener senza jQuery
• Configurazione della durata di visualizzazione separata per successo ed errore

Quali eventi DOM genera Contact Form 7

Contact Form 7 genera eventi DOM personalizzati in ogni fase dell'elaborazione del modulo. Ecco l'elenco completo dalla documentazione ufficiale:

Per i popup post-invio, ti servono due eventi: wpcf7mailsent (successo) e wpcf7invalid (errore di validazione). Potresti anche usare wpcf7spam per una finestra di avviso separata, ma nella pratica i primi due sono sufficienti.

Nota importante: in guide e snippet più vecchi, gli eventi sono scritti con i due punti. Per esempio, wpcf7:mailsent e wpcf7:invalid. Questa sintassi era usata negli hook jQuery delle prime versioni di CF7. Oggi funziona ancora per retrocompatibilità, ma i nomi canonici non includono i due punti. Nel codice qui sotto fornirò entrambe le varianti: quella moderna con addEventListener e la variante jQuery per i progetti in cui jQuery è già caricato.

L'oggetto event.detail contiene proprietà utili: contactFormId (l'ID del modulo specifico), pluginVersion (versione di CF7), inputs (array dei dati inseriti). Se hai più moduli su una pagina, filtra per contactFormId in modo che il popup si apra solo per il modulo desiderato.

Passo 1: scegli un plugin per popup e crea le finestre

Ti serve un plugin per popup con un'API JavaScript, in modo che la finestra possa essere aperta programmaticamente da uno script. Due opzioni gratuite e affidabili dalla directory dei plugin di WordPress.org:

• Popup Maker, oltre 700.000 installazioni attive, valutazione 4,9/5. Chiamata: PUM.open(popup_id). Nucleo gratuito potente, targeting per pagina, trigger temporali e di scroll, integrazione con i form più diffusi. La community più ampia dove troverai risposte a qualsiasi domanda.
• WP Popups, oltre 20.000 installazioni attive. Chiamata: SPU.show(popup_id). Editor visuale basato su Gutenberg, filtri di visualizzazione, supporto nativo per Contact Form 7. Leggero e veloce.

Crea due popup: uno per l'invio riuscito, un altro per gli errori. In ciascuno inserisci un'immagine, un testo e, se vuoi, un pulsante «Chiudi». Prendi nota dell'ID di ogni finestra perché ti serviranno nello script del passo 3. Gli esempi qui sotto usano gli ID 1068 (successo) e 1065 (errore); i tuoi saranno diversi.

Ecco come appaiono i popup con gli stili configurati:

Popup di invio riuscito: sfondo verde, icona di conferma e testo.

Finestra di errore: sfondo rosso, icona di avviso e richiesta di controllare i dati inseriti.

Ed ecco le immagini da inserire all'interno dei popup:

Puoi sostituire queste immagini con le tue specificando percorsi diversi nelle impostazioni del plugin per popup.

Passo 2: stili CSS per i popup

I plugin popup non sempre esportano i CSS personalizzati. Se gli stili non vengono applicati dopo aver creato le finestre, aggiungili manualmente: Impostazioni Plugin → CSS Personalizzato, oppure Appearance → Customize → Additional CSS.

Stili per il popup di invio riuscito (overlay verde, z-index massimo):

1
div#spu-bg-1068 {
2
    opacity: 0.6;
3
    background-color: green;
4
    z-index: 9999999;
5
}
6
div#spu-1068 {
7
    z-index: 99999999;
8
}

Stili per il popup di errore (overlay rosso):

1
div#spu-bg-1065 {
2
    opacity: 0.6;
3
    background-color: #F44336;
4
    z-index: 9999999;
5
}
6
div#spu-1065 {
7
    z-index: 99999999;
8
}

Cosa succede qui: #spu-bg-N è lo sfondo semi-trasparente (overlay). #spu-N è la finestra stessa. Lo z-index elevato garantisce che il popup copra tutti gli elementi della pagina, inclusa la barra di amministrazione.

Se usi un plugin popup diverso, sostituisci i selettori. Popup Maker genera #pum-N e .pum-overlay[data-popmake*="N"]. WP Popups usa i propri prefissi; controlla con l'ispettore del browser (F12) gli ID effettivi delle tue finestre.

Step 3: script jQuery che collega CF7 e i popup

Lo script può essere inserito in tre modi: nel functions.php del tuo tema child, tramite il plugin Code Snippets, o nella sezione JavaScript personalizzato del tuo tema. Prima di modificare functions.php, fai un backup; un solo errore di sintassi manda in crash il sito.

Di seguito il codice completo con commenti. Intercetta due eventi di Contact Form 7 e chiama l'API del plugin popup:

1
// START: Contact Form 7 + Popups — popups for success and error
2
jQuery(document).ready(function($) {
3
 
4
    // Popup for validation ERROR (fields empty or invalid)
5
    $(".wpcf7").on('wpcf7:invalid', function(event) {
6
        SPU.show(1065);   // Error popup ID — replace with yours
7
        setTimeout(function() {
8
            $('div#spu-1065, div#spu-bg-1065').fadeOut(600, 'swing');
9
        }, 5500);          // auto-close after 5.5 seconds
10
    });
11
 
12
    // Popup for SUCCESSFUL submission
13
    $(".wpcf7").on('wpcf7:mailsent', function(event) {
14
        SPU.show(1068);   // Success popup ID — replace with yours
15
        setTimeout(function() {
16
            $('div#spu-1068, div#spu-bg-1068').fadeOut(600, 'swing');
17
        }, 3500);          // auto-close after 3.5 seconds
18
    });
19
 
20
});
21
// END: Contact Form 7 + Popups

Cosa devi sostituire per il tuo progetto:

• SPU.show(N) con il metodo del tuo plugin popup. Per Popup Maker: PUM.open(N).
• 1065 e 1068 con gli ID dei tuoi popup. Li trovi nel pannello di amministrazione del plugin.
• Il tempo in setTimeout (millisecondi). 5500 = 5,5 secondi, 3500 = 3,5 secondi. Regolalo in base alle tue preferenze.
• I selettori div#spu-N e div#spu-bg-N; sostituiscili se il tuo plugin genera ID diversi.

Alternativa moderna senza jQuery. Se il tuo tema non carica jQuery o vuoi un'opzione più leggera, usa gli eventi nativi di CF7 tramite addEventListener:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    // event.detail.contactFormId — ID of specific form (if there are multiple)
3
    PUM.open(1068);
4
    setTimeout(function() {
5
        document.querySelector('#pum-1068').style.display = 'none';
6
        document.querySelector('.pum-overlay[data-popmake*="1068"]').style.display = 'none';
7
    }, 3500);
8
}, false);
9
 
10
document.addEventListener('wpcf7invalid', function(event) {
11
    PUM.open(1065);
12
    setTimeout(function() {
13
        document.querySelector('#pum-1065').style.display = 'none';
14
        document.querySelector('.pum-overlay[data-popmake*="1065"]').style.display = 'none';
15
    }, 5500);
16
}, false);

Questa variante funziona con Popup Maker e non richiede jQuery. Gli eventi wpcf7mailsent e wpcf7invalid (senza i due punti) sono lo standard moderno.

Se hai più form su una pagina, filtra per contactFormId:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    if ('123' === event.detail.contactFormId) {
3
        PUM.open(1068);  // popup only for form ID=123
4
    }
5
}, false);

Configurare il tempo di chiusura automatica

L'intervallo per ogni popup si imposta separatamente usando il secondo argomento di setTimeout in millisecondi. Consigli pratici:

• Successo: 3-5 secondi. L'utente ha già letto "inviato", quindi non serve trattenerlo più a lungo.
• Errore: 5-7 secondi. La persona ha bisogno di tempo per elaborare il problema, rileggere il messaggio e capire quali campi correggere.
• Spam (wpcf7spam): 8-10 secondi. Dai abbastanza tempo per leggere l'avviso per intero, ma senza bloccare del tutto la pagina.

Il valore 600 in fadeOut(600, 'swing') è la durata dell'animazione di dissolvenza in millisecondi. Meno di 400 sembra scattoso, più di 800 risulta lento. 600 è il punto di equilibrio.

Se hai più popup e vuoi durate diverse per form diversi, racchiudi la chiamata setTimeout in un controllo contactFormId, come mostrato nell'esempio sopra.

Video tutorial passo passo: configurare da zero un popup dopo l'invio di Contact Form 7. Se sei nuovo a WordPress o preferisci guardare piuttosto che leggere codice, questi 8 minuti di video coprono metà dell'articolo.

⁉️🤔 Domande frequenti

Il popup non si apre dopo l'invio del form. Cosa c'è che non va?

La causa più comune: l'ID del popup non corrisponde a quello specificato nello script. Vai nel pannello di amministrazione del tuo plugin per popup, trova l'ID effettivo della finestra e sostituiscilo nella chiamata SPU.show(N) o PUM.open(N). La seconda causa: jQuery non è caricato o è in conflitto. Controlla la console del browser (F12 → Console) per eventuali errori. I plugin per popup assegnano nuovi numeri alle finestre durante la clonazione o l'importazione, mentre il vecchio ID dello snippet rimane; verifica sempre i numeri dopo l'importazione.

Devo installare un plugin per popup separato? Posso usare semplicemente un alert?

Tecnicamente sì: sostituisci SPU.show(N) con alert('Thank you!') e apparirà una notifica. Ma l'alert blocca la pagina, ha un aspetto estraneo e infastidisce i visitatori. Un popup personalizzato con il tuo design, la tua icona e un'animazione fluida è parte del sito, non una finestra di dialogo di sistema del browser. Nella nostra esperienza su diversi progetti, sostituire l'alert con un popup brandizzato riduce sensibilmente la frequenza di rimbalzo immediata.

Il codice funziona solo per un form. Come faccio a farlo funzionare per più form?

Usa il filtro tramite event.detail.contactFormId. Per la variante jQuery, racchiudi la chiamata in un controllo: if (event.detail.contactFormId === 123) { SPU.show(1068); }. Per JavaScript vanilla, un esempio con una condizione è fornito nel passaggio 3.

Cosa succede se jQuery non è caricato sul sito?

Usa la variante con addEventListener del passaggio 3. Non richiede jQuery e funziona in tutti i browser moderni. L'unica sfumatura: la chiusura del popup tramite DOM nativo si fa nascondendo manualmente l'elemento, poiché il metodo fadeOut non è disponibile. In alternativa, aggiungi una classe CSS con transition e attivala/disattivala.

Posso usare un solo popup per tutti i form del sito?

Sì, se il testo della notifica è universale. Crea un popup di successo e uno di errore, quindi aprili per tutti gli eventi wpcf7mailsent e wpcf7invalid senza filtrare per contactFormId. Tuttavia, se i form su pagine diverse hanno contesti diversi, è meglio creare finestre separate. "Richiesta di consulenza ricevuta" e "Iscrizione confermata" hanno un aspetto diverso.

Popup Maker o WP Popups: quale scegliere per il tuo progetto

La scelta si riduce a tre scenari:

• Hai bisogno del massimo delle funzionalità e integrazioni? Scegli Popup Maker. Targeting per pagina, trigger su tempo e scroll, integrazione con decine di plugin per form, community enorme. Il core gratuito copre il 90% dei casi d'uso.
• Vuoi semplicità e un editor visuale Gutenberg? La tua scelta è WP Popups. Interfaccia moderna, configurazione rapida, minor carico. Funziona con Contact Form 7 senza configurazioni aggiuntive.
• Hai bisogno di un popup con un form di Contact Form 7 al suo interno? È uno scenario diverso (non notifiche dopo l'invio, ma un form in una finestra modale attivata dal clic su un pulsante). Per questo esiste il plugin specializzato WPB Popup for Contact Form 7, che apre un form CF7 in un popup anziché reagire al suo invio.

Entrambi i plugin di notifica sono gratuiti e disponibili nella directory di WordPress.org. Scegli quello che si adatta meglio al tuo stack e sostituisci la sua chiamata API nello script del passaggio 3. Il tema dei popup in sé può essere esplorato all'infinito: test A/B del testo di notifica, ritardi basati sul tempo di lettura, finestre diverse per form diversi. Ma le fondamenta (evento CF7 + chiamata popup + chiusura automatica) coprono la stragrande maggioranza dei compiti reali sui siti WordPress.