💡 Come impostare un modulo CF7 universale con un campo nascosto

• Installa il plugin Dynamic Text Extension e attivalo nella sezione Plugin
• Aggiungi al modulo un tag hidden dinamico con l'identificatore id:HIDDENINPUT per passare il titolo del blocco
• Crea un popup in Popup Maker, inserisci lo shortcode del modulo e configura l'attivazione Click Open
• Collega uno script jQuery che cattura il titolo del blocco e lo inserisce nel campo nascosto
• Aggiungi [dynamichidden-120] al template email per vedere da quale blocco proviene l'invio
• Testa l'invio: popup di errore con modulo vuoto e popup di successo dopo l'invio riuscito

Step 1: plugin per il campo nascosto, Dynamic Text Extension

Contact Form 7 base non può aggiungere campi nascosti in modo nativo. Fino a poco tempo fa, il plugin Contact Form 7** Modules** gestiva questa funzione, ma non viene aggiornato dal 2017 e non è stato testato con le versioni recenti di WordPress.

L'alternativa attuale è Contact Form 7 - Dynamic Text Extension (DTX). Questo plugin è mantenuto attivamente (ultimo aggiornamento giugno 2026), funziona con WordPress 7.0 e fa molto più dei semplici campi nascosti: valori dinamici da URL, cookie, meta field dei post, dati dell'utente corrente e shortcode personalizzati.

Installa il plugin da Plugin → Aggiungi nuovo plugin, cerca "Dynamic Text Extension", clicca "Installa ora" e attiva. Nel menu a tendina del generatore di tag dell'editor di Contact Form 7 compariranno due nuovi pulsanti: dynamic text e dynamic hidden.

Per il nostro scenario, ci serve dynamic hidden. Crea un campo nascosto con un identificatore attraverso il quale lo script jQuery passerà il titolo del blocco:

1
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Se per qualche motivo DTX non fa al caso tuo, puoi ancora usare il vecchio Contact Form 7 Modules: resta funzionante per i campi nascosti di base, ma non è stato testato con le versioni recenti di WordPress e non viene aggiornato dal 2017. Lo shortcode sarebbe simile a questo: [hidden hidden-120 id:HIDDENINPUT].

Step 2: modulo e template email

Il modulo è composto dai campi standard di CF7 più il nostro campo nascosto. Ecco un template funzionante; copialo nell'editor del modulo:

1
[text* text-59 placeholder "Your Name*"]
2
[tel* tel-116 placeholder "Phone*"]
3
[email Email placeholder "Email"]
4
[recaptcha]
5
[submit "Send"]
6
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

I campi text-59, tel-116 e Email sono obbligatori (asterisco dopo il tipo). reCAPTCHA protegge dallo spam. Il pulsante di invio e il campo nascosto completano il modulo.

Ora configura il template email nella scheda "Mail" dell'editor del modulo. Il punto chiave è aggiungere [dynamichidden-120] (o [hidden-120] per i moduli CF7) al corpo dell'email, così da vedere da quale blocco proviene l'invio:

A: moc.niamodruoy@liame-ruoy

Da: [Email]

Oggetto: Richiesta dal sito, [dynamichidden-120]

Corpo email:

1
Selected product/service: [dynamichidden-120]
2
---
3
Name: [text-59]
4
Phone: [tel-116]
5
Email: [Email]
6
---
7
Message sent from page: [_url]

Assicurati di spuntare la casella "Use HTML content type", altrimenti la formattazione si romperà. Per una consegna affidabile delle email, configura SMTP (tramite un qualsiasi plugin SMTP: Post SMTP, WP Mail SMTP o Google Gmail API); senza questo passaggio, le email di CF7 finiscono spesso nello spam.

Step 3: creare un popup con Popup Maker

Il vecchio plugin Popups - WordPress Popup è stato chiuso a luglio 2022 a causa di una vulnerabilità e non è più disponibile per l'installazione. La moderna alternativa è Popup Maker: oltre 780.000 installazioni attive, integrazione nativa con CF7 e decine di trigger e regole di targeting.

Installa Popup Maker da Plugin → Aggiungi nuovo plugin, poi vai su Popup Maker → Crea popup. Assegna un nome al popup e inserisci lo shortcode del modulo nell'editor di contenuto:

1
[contact-form-7 id="123" title="Universal Form"]

Trova l'ID del modulo nella lista dei moduli CF7 (colonna "Shortcode"). Nelle impostazioni del popup sulla destra, nel blocco Trigger, seleziona Click Open e specifica il selettore CSS del pulsante che aprirà il popup (ad esempio, .jet-button-order). È analogo al "Manual Triggering" del vecchio plugin Popups.

Ora trova l'ID del popup che hai creato. Apri il popup nell'editor e guarda l'URL del browser: post.php?post=4197&action=edit; il numero dopo post= è l'ID (4197 in questo esempio). Ti servirà per lo script nel prossimo step.

Step 4: script jQuery per catturare il titolo del blocco

Lo script risolve il compito principale: al clic su un pulsante all'interno di un blocco, cattura il testo del titolo di quel blocco e lo inserisce sia nel titolo del popup sia nel campo nascosto del modulo. Analizziamolo.

Per prima cosa, assegna una classe CSS comune a tutti i blocchi in cui devi trovare il titolo (ad esempio, ForContactForm7HiddenInput). In Elementor, si fa da "Avanzate → Classi CSS" per la sezione contenitore.

Lo script stesso si collega tramite il functions.php del tema child o il plugin Code Snippets (più sicuro, non si perde con l'aggiornamento del tema):

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'cf7-universal-form',
4
        get_stylesheet_directory_uri() . '/cf7-universal-form.js',
5
        ['jquery'],
6
        '1.0',
7
        true
8
    );
9
});

Contenuto del file cf7-universal-form.js:

1
jQuery(document).ready(function ($) {
2
 
3
    // Variable for storing the block title
4
    var blockTitle = '';
5
 
6
    // Capture the title text on button click
7
    $('.ForContactForm7HiddenInput .jet-button-order').on('click', function () {
8
        blockTitle = $(this)
9
            .closest('.ForContactForm7HiddenInput')
10
            .find('h3.elementor-heading-title')
11
            .text()
12
            .trim();
13
    });
14
 
15
    // Wait for popup to open via MutationObserver
16
    var popupId = '4197'; // Your popup ID from Popup Maker
17
    var observer = new MutationObserver(function (mutations) {
18
        mutations.forEach(function (mutation) {
19
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
20
                var $popup = $('#popmake-' + popupId);
21
                if ($popup.hasClass('active') && blockTitle) {
22
                    // Insert the title into the popup
23
                    $popup.find('.popup-title').text(blockTitle);
24
                    // Insert the title into the form's hidden field
25
                    $('#HIDDENINPUT').val(blockTitle);
26
                }
27
            }
28
        });
29
    });
30
 
31
    // Start observing the popup
32
    var $popupContainer = $('#popmake-' + popupId);
33
    if ($popupContainer.length) {
34
        observer.observe($popupContainer[0], {
35
            attributes: true,
36
            attributeFilter: ['class']
37
        });
38
    }
39
 
40
});

Cosa succede qui:

• Cattura del titolo: al clic sul pulsante con classe .jet-button-order, lo script risale il DOM fino al blocco padre .ForContactForm7HiddenInput, trova al suo interno h3.elementor-heading-title e memorizza il suo testo nella variabile blockTitle.
• Monitoraggio del popup: invece del datato attrchange.js (il cui CDN rawgit.com non è più attivo), lo script utilizza il MutationObserver nativo, che osserva i cambiamenti di classe sul contenitore di Popup Maker. Quando compare la classe active (il popup è aperto), lo script inserisce il titolo salvato nell'intestazione del popup e nel campo nascosto #HIDDENINPUT.
• Selettori: .jet-button-order è la classe del pulsante Elementor JetElements; sostituiscila con la classe del tuo pulsante. Popup Maker viene renderizzato con ID #popmake-{ID}, quindi il codice usa #popmake-4197; sostituisci 4197 con l'ID del tuo popup.

Sotto il blocco jQuery c'è un esempio visivo di come appare una pagina con più blocchi e pulsanti "Ordina ora":

Dopo aver cliccato il pulsante sul primo blocco, lo script cattura il testo "Roller Blinds", lo inserisce nel titolo del popup e nel campo nascosto del form:

Lo stesso vale per tutti e cinque i blocchi: il titolo cambia dinamicamente mentre il form rimane lo stesso.

Step 5: popup per invio riuscito ed errore

Popup Maker ti permette di creare tutti i popup che ti servono. Per i messaggi di stato (successo / errore), crea altri due popup in modo simile allo step 3. Non devi associarli manualmente ai trigger; CF7 li controlla tramite eventi JavaScript.

Il popup di errore compare quando il form non supera la validazione. Contenuto:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/flag.svg" alt="Error icon" width="177" height="161">
3
</p>
4
<p style="text-align: center;">
5
    The form has errors. Check the messages under the input fields and try again.
6
</p>

Il popup di successo compare dopo l'invio riuscito. Contenuto:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/like.svg" alt="Successful submission icon" width="177" height="161">
3
</p>
4
<p style="text-align: center; padding-top: 15px;">
5
    Done! Your message has been sent successfully. We will contact you shortly.
6
</p>

Queste icone SVG erano usate nel vecchio popup per indicare lo stato dell'invio. Puoi sostituirle con le tue o lasciarle così come sono; sono neutre e non legate a nessun plugin specifico.

Collega i popup di stato tramite gli eventi di CF7. Aggiungi questo codice allo stesso file JS cf7-universal-form.js dopo lo script principale:

1
// Show popup on CF7 validation error
2
document.addEventListener('wpcf7invalid', function () {
3
    $('#popmake-1065').popmake('open');
4
}, false);
5
 
6
// Show popup on successful submission
7
document.addEventListener('wpcf7mailsent', function () {
8
    $('#popmake-1068').popmake('open');
9
}, false);

Sostituisci 1065 e 1068 con gli ID effettivi dei tuoi popup di stato presi da Popup Maker.

Gli stili CSS di base per i popup di stato si collegano tramite Aspetto → Personalizza → CSS aggiuntivo o nel file del tema:

1
/* Error popup */
2
div#popmake-1065 {
3
    z-index: 99999999;
4
}
5
div#popmake-1065 .popmake-close {
6
    font-size: 30px;
7
    color: #9e9e9e;
8
}
9
 
10
/* Success popup */
11
div#popmake-1068 {
12
    z-index: 99999999;
13
}
14
div#popmake-1068 .popmake-close {
15
    font-size: 30px;
16
    color: #9e9e9e;
17
}

Step 6: test e debug

Prima di pubblicare su un sito in produzione, verifica ogni scenario:

• Clic su blocchi diversi: il titolo nel popup e nel campo nascosto cambia correttamente per ogni blocco.
• Form vuoto: l'invio senza compilare i campi obbligatori mostra il popup di errore.
• Invio completo: l'email arriva e il campo nascosto contiene il titolo corretto del blocco.
• Riapertura: dopo aver chiuso e riaperto il popup, il titolo si aggiorna.

Se il titolo non viene inserito, verifica nella console del browser (F12 → Console) che:

• Il selettore jQuery .ForContactForm7HiddenInput h3.elementor-heading-title trovi un elemento nella pagina;
• La variabile popupId corrisponda all'ID reale del popup nell'admin;
• La classe del pulsante (.jet-button-order) corrisponda alla classe effettiva nella pagina.

I selettori nel codice sono legati a Elementor + JetElements. Se usi un builder diverso (Gutenberg, Bricks, Oxygen), sostituisci con le tue classi e la struttura del titolo. Il principio resta lo stesso: pulsante → blocco genitore → titolo → campo nascosto.

Guarda questo video per una dimostrazione visiva su come impostare un form in popup con Contact Form 7:

⁉️🤔 Domande frequenti

Posso fare a meno di un plugin aggiuntivo per il campo nascosto?

CF7 base non supporta i campi nascosti. DTX è una soluzione minimale e attivamente mantenuta. In teoria, potresti aggiungere <input type="hidden"> direttamente al DOM del form via JavaScript, ma è meno affidabile: lo script potrebbe non eseguirsi prima dell'invio e il valore non comparirà nell'email se non è legato a un tag specifico di CF7. Usa DTX o il vecchio Contact Form 7 Modules; entrambi aggiungono il supporto ai campi nascosti a livello di tag e il valore apparirà garantito nell'email.

Perché Popup Maker è migliore del vecchio plugin Popups?

Popup Maker è aggiornato attivamente (ultima versione aprile 2026), ha integrazione nativa con CF7 e altri form e supporta decine di trigger e regole di targeting. Il vecchio Popups è stato chiuso ufficialmente da WordPress.org a luglio 2022 a causa di una vulnerabilità non corretta e non dovrebbe essere usato su siti live. Popup Maker è il suo successore diretto e sicuro con oltre 780.000 installazioni attive. Vantaggio chiave: integrazione nativa con CF7 (gli eventi wpcf7mailsent / wpcf7invalid funzionano senza codice aggiuntivo) e un editor visuale dei popup.

Perché usare MutationObserver invece di attrchange.js?

La libreria attrchange.js era distribuita tramite rawgit.com, servizio chiuso nel 2020. Il repository GitHub in sé è ancora attivo, ma collegare lo script da lì è scomodo. MutationObserver è un'API nativa del browser, supportata da tutti i browser moderni dal 2014, non richiede dipendenze esterne e risolve lo stesso compito: tracciare i cambiamenti degli attributi nel DOM. Meno richieste HTTP, nessun aggiornamento di dipendenze necessario.

Cosa fare se il titolo nel campo nascosto appare come caratteri cirillici illeggibili nell'email?

Verifica la codifica nelle impostazioni di CF7 e del plugin SMTP; deve essere UTF-8. Assicurati che l'oggetto dell'email non contenga caratteri corrotti. Se usi SMTP via Gmail API, il problema potrebbe essere nella codifica dell'header dell'email; controlla le impostazioni del plugin Post SMTP o WP Mail SMTP. Di solito, l'origine del problema è il server di posta, non lo script. Verifica: (1) wp-config.php, la riga define('DB_CHARSET', 'utf8'); senza spazi extra prima di <?php; (2) impostazioni del plugin SMTP, codifica email UTF-8; (3) oggetto email di CF7, rimuovi caratteri non standard, lascia solo [dynamichidden-120] senza parentesi o virgolette extra.

Posso usare questo approccio per più form diversi su uno stesso sito?

Sì. Crea un form separato in CF7 per ogni tipologia di blocco e un popup separato in Popup Maker. Nello script, duplica la logica per ogni coppia "selettore blocco → ID popup → ID campo nascosto". In alternativa, usa un solo popup e un solo form con classi di blocco diverse; il campo nascosto riceverà il titolo del blocco su cui è stato fatto clic, senza configurazioni aggiuntive.

Un form universale per tutti i blocchi della pagina è il punto centrale di questa soluzione. Per tipologie di blocco completamente diverse (prodotti vs servizi), crea due set: form_prodotto + popup_prodotto e form_servizio + popup_servizio. Nello script, duplica semplicemente il blocco di codice con selettori diversi.

Quale stack di plugin usare nel 2026

Un form universale con campo nascosto è una soluzione collaudata per landing page con decine di blocchi simili. Invece di 30 form separati, ne configuri uno e lo script inserisce automaticamente il titolo del blocco. Ecco lo stack che consigliamo nel 2026:

• Contact Form 7: oltre 10 milioni di installazioni, leggero, gratuito.
• Dynamic Text Extension (DTX): campi nascosti e dinamici, supporto attivo.
• Popup Maker: popup con trigger al clic e integrazione nativa con CF7.
• MutationObserver (JS nativo): tracciamento dell'apertura del popup senza librerie esterne.

Se devi catturare il titolo di un blocco e passarlo a un form, usa questo stack. Nella pratica funziona senza problemi e la configurazione richiede circa un'ora anche con conoscenze base di WordPress.

🔗 Dynamic Text Extension su WordPress.org | 🔗 Popup Maker su WordPress.org