Skip to content
🕵️ Come nascondere il pulsante di invio in Contact Form 7 fino al completamento dei campi: 3 metodi funzionanti
Plugin WordPressSviluppo web
8 min1,679 parole

🕵️ Come nascondere il pulsante di invio in Contact Form 7 fino al completamento dei campi: 3 metodi funzionanti

Un utente apre un modulo, vede il pulsante «Invia», ci clicca sopra e riceve errori di validazione. La finestra evidenzia i campi in rosso: «Obbligatorio». Ti suona familiare?

Contact Form 7, il plugin per moduli più diffuso per WordPress, conta oltre 5 milioni di installazioni attive. Ma nella configurazione base mostra sempre il pulsante di invio, anche quando i campi sono vuoti. Per l'utente questo significa un clic extra e frustrazione. Per il proprietario del sito significa lead persi: un terzo dei visitatori che incontra un errore in un modulo semplicemente se ne va e non torna più.

Puoi risolvere il problema con tre righe di jQuery. Oppure puoi farlo senza alcuno script, usando solo CSS. In questa guida trovi entrambi gli approcci, più un plugin già pronto per chi non vuole toccare codice.

💡 Panoramica rapida:

  • Monitoraggio jQuery: nascondi il pulsante e mostralo solo quando la lunghezza del testo in tutti i campi raggiunge i limiti che hai impostato
  • CSS puro: un trucco con :valid, :has() e l'attributo required, senza una sola riga di JavaScript
  • Plugin Conditional Fields per Contact Form 7: un costruttore visivo di condizioni per logiche complesse senza codice

Perché nascondere il pulsante di invio

Un utente non dovrebbe dover indovinare cosa è andato storto. Quando un pulsante è visibile e cliccabile ma il modulo non è pronto, si crea una dissonanza cognitiva. La persona clicca, riceve un errore, cerca i campi evidenziati, li corregge, clicca di nuovo. Ogni ciclo di questo tipo abbassa la conversione.

Un pulsante nascosto finché tutto è pronto risolve tre problemi:

  • Elimina i tentativi di invio a vuoto. Nessun pulsante, nessun clic prematuro.
  • Fornisce un feedback visivo. La comparsa del pulsante = un segnale che il modulo è pronto per essere inviato.
  • Riduce l'attrito. L'utente compila i campi, il pulsante appare, un clic, fatto.

Contact Form 7 non ha un meccanismo integrato per questo comportamento. Ma aggiungerlo richiede 10 minuti di lavoro.

Metodo 1: monitoraggio degli input con jQuery

L'approccio più flessibile. Imposti le tue regole: quanti caratteri deve contenere ogni campo prima che il pulsante appaia. Funziona con qualsiasi tipo di campo (testo, email, area di testo, telefono).

Corpo del modulo di Contact Form 7

Come esempio, prendiamo un modulo di contatto standard con tre campi, Google reCAPTCHA e un pulsante di invio. Ecco il suo markup nell'editor di CF7:

1[text text-776 id:bim-name class:bim-name placeholder "Name"]
2[email email-498 id:bim-email class:bim-email placeholder "Email"]
3[textarea textarea-697 id:bim-message class:bim-message placeholder "Message"]
4 
5<style>
6.g-recaptcha > div {
7    width: 100% !important;
8}
9.g-recaptcha iframe {
10    width: 100% !important;
11}
12div#GoogleReCapchaFullWidth {
13    width: 100% !important;
14    padding-bottom: 6px;
15}
16</style>
17 
18[recaptcha id:GoogleReCapchaFullWidth]
19 
20[submit id:bim-button class:bim-button "Submit"]

Il blocco CSS all'interno del modulo è un espediente per estendere reCAPTCHA a tutta la larghezza del contenitore; torna utile se il modulo si trova in una colonna stretta.

Script jQuery

Copia questo codice nel file custom.js del tuo tema o nel campo «Script aggiuntivi» del plugin Code Snippets:

1jQuery(document).ready(function ($) {
2 
3    // Initially the button is hidden
4    $('#bim-button').css('display', 'none');
5 
6    // Listen for input on all three fields
7    $('#bim-name, input#bim-email, #bim-message').on('input', function () {
8        var nameVal = $('#bim-name').val().trim();
9        var emailVal = $('#bim-email').val().trim();
10        var messageVal = $('#bim-message').val().trim();
11 
12        // Conditions: name > 4 characters, email > 6, message > 20
13        if (nameVal.length > 4 && emailVal.length > 6 && messageVal.length > 20) {
14            $('#bim-button').fadeIn(200);
15        } else {
16            $('#bim-button').fadeOut(200);
17        }
18    });
19 
20});

Cosa succede qui:

  • Riga 4: il pulsante viene nascosto immediatamente al caricamento della pagina (display: none).
  • Riga 7: il metodo .on('input', ...) resta in ascolto di qualsiasi modifica testuale nei tre campi (l'utente che digita, incolla dagli appunti, cancella caratteri). In passato si usava .keyup(), ma input è più affidabile: si attiva anche con l'incolla tramite mouse.
  • Righe 8-10: leggiamo i valori correnti e rimuoviamo gli spazi bianchi ai bordi tramite .trim().
  • Riga 13: controllo della condizione. Puoi cambiare i numeri in base alle tue esigenze: per esempio, > 1 può bastare per un campo nome, > 10 per un messaggio.
  • Righe 14 e 16: fadeIn e fadeOut producono una comparsa e scomparsa graduale del pulsante in 200 millisecondi. È visivamente più pulito di uno show()/hide() brusco.

Fisicamente l'elemento pulsante è sempre nell'albero DOM della pagina; la visibilità è controllata dalla proprietà CSS display. Questo è sicuro: anche se lo script non viene caricato (problema di rete, ad blocker), il pulsante rimane semplicemente visibile e l'utente non perde la possibilità di inviare il modulo.

Come adattarlo al tuo modulo

Cambia tre cose:

  • ID dei campi: nel markup di CF7 sostituisci bim-name, bim-email e bim-message con i tuoi identificativi.
  • Limiti di caratteri: nella condizione if inserisci i numeri che ti servono. Per un campo telefono puoi verificare .replace(/\D/g, '').length > 9 (solo cifre, almeno 10).
  • Elenco dei campi: se hai 5 campi, aggiungili al selettore $('#id1, #id2, ...') e alla condizione if.

Per i tipi di campo [checkbox], [select] o [radio], la lunghezza del testo non funziona; verifica direttamente la selezione:

1var agreeChecked = $('#bim-agree').is(':checked');

Metodo 2: CSS puro senza script

Per moduli semplici con uno o due campi puoi saltare del tutto JavaScript. L'idea è che i browser moderni possono verificare la validità del campo tramite la pseudo-classe :valid, e il combinatore CSS :has() (supportato in tutti i browser dal 2023) ti permette di guardare «dentro» un elemento genitore.

Funziona così:

1form.wpcf7-form .wpcf7-submit {
2    display: none;
3}
4 
5form.wpcf7-form:has(input[required]:invalid) .wpcf7-submit {
6    display: none;
7}
8 
9form.wpcf7-form:not(:has(input[required]:invalid)) .wpcf7-submit {
10    display: block;
11}

Ma c'è una sfumatura: CF7 non aggiunge automaticamente l'attributo required ai campi. Devi aggiungerlo manualmente nel markup del modulo; un asterisco * accanto al nome del campo nell'editor di CF7 è sufficiente:

1[text* text-776 id:bim-name placeholder "Name"]
2[email* email-498 id:bim-email placeholder "Email"]

L'asterisco dopo il tipo di campo (text*, email*) attiva lo stato obbligatorio. CF7 stesso inserirà l'attributo HTML required nel tag <input> e il selettore CSS funzionerà.

Il vantaggio del metodo CSS: zero script, non si rompe in caso di conflitti jQuery e funziona anche con JavaScript disabilitato. Lo svantaggio: la logica è più semplice («tutti i campi obbligatori sono compilati» invece di «il campo nome è più lungo di 4 caratteri»). Per la maggior parte dei moduli di contatto questo è sufficiente.

Metodo 3: plugin Conditional Fields per Contact Form 7

Quando la logica si fa più complessa (per esempio, mostra il pulsante solo se una voce specifica in [select] è selezionata e l'email è compilata), il codice jQuery cresce. È qui che viene in soccorso il plugin gratuito Conditional Fields for Contact Form 7 (oltre 100.000 installazioni attive, valutazione 5 stelle).

Il plugin aggiunge un editor visivo di condizioni direttamente nell'interfaccia di CF7. Imposti le regole in un paio di clic:

  • «Mostra il pulsante se il campo 'Nome' non è vuoto E il campo 'Email' non è vuoto E il campo 'Messaggio' contiene più di 20 caratteri.»
  • Oppure: «Mostra il campo 'Indirizzo di consegna' se il pulsante radio 'Consegna tramite corriere' è selezionato.»

Nessun codice richiesto. Le condizioni possono essere applicate a qualsiasi campo o gruppo di campi, incluso il pulsante di invio stesso. Il plugin è attivamente mantenuto e regolarmente aggiornato; a giugno 2026 è compatibile con la versione corrente di WordPress.

Quale soluzione scegliere

Tre approcci coprono tre scenari diversi:

  • CSS puro: ideale per una landing page con un modulo semplice da 2-3 campi. Minime parti in movimento, niente che si possa rompere.
  • Script jQuery: la scelta giusta quando hai bisogno di limiti precisi («nome più lungo di 4 caratteri, messaggio più lungo di 20»). Pieno controllo sulle condizioni.
  • Conditional Fields: usalo quando la logica si ramifica (diversi set di campi per scelte diverse, condizioni annidate, mostrare/nascondere intere sezioni del modulo). Il costruttore visivo fa risparmiare ore di debugging.

Per la maggior parte dei siti WordPress la combinazione «jQuery + buon senso» è sufficiente. Lo script qui sopra (20 righe) si inserisce una volta e funziona per anni senza aggiornamenti.

Video: configurazione passo passo

Questo tutorial di 8 minuti illustra l'intero processo, dalla creazione di un modulo in CF7 allo script finale per nascondere il pulsante che verifica se tutti i campi sono compilati:

⁉️🤔 Domande frequenti

Lo script funziona con i plugin di caching?

Sì, a patto che venga usato il corretto wrapper jQuery(document).ready(...). Se il sito utilizza una minificazione aggressiva (Autoptimize, WP Rocket con combinazione degli script), escludi il file dello script dalla combinazione oppure usa il plugin Code Snippets: inserisce il codice nel footer della pagina come blocco separato che i minificatori non toccano.

Cosa succede se un utente ha JavaScript disabilitato?

Con JavaScript disabilitato il pulsante rimane visibile; lo script semplicemente non lo nasconde. Questa è una degradazione controllata: CF7 eseguirà la validazione lato server e mostrerà gli errori nel modo standard. Per il metodo CSS che usa :has() la situazione è la stessa: senza validazione JS, CF7 controlla comunque i campi sul server al momento dell'invio.

Posso nascondere il pulsante per un modulo specifico se ce ne sono diversi nella pagina?

Il modo più semplice è dare al pulsante un id univoco nell'editor di CF7, poi usare quell'ID come selettore nello script. Se ci sono più moduli, duplica il blocco di codice per ogni pulsante con il proprio ID, oppure trova dinamicamente il pulsante all'interno del modulo corrente tramite $(this).closest('form').find('.wpcf7-submit').

Perché non usare semplicemente required sui campi e affidarsi alla validazione del browser?

Perché required non nasconde il pulsante; blocca solo l'invio del modulo e mostra un tooltip nativo del browser. Il nostro obiettivo è eliminare la possibilità stessa di un clic errato. Inoltre, la validazione standard del browser non controlla la lunghezza del testo, ma solo il fatto che il campo sia compilato, e per un messaggio di 2 caratteri questa è una protezione debole.

Devo comunque validare i campi lato server?

Sì, assolutamente. La logica lato client per nascondere il pulsante non sostituisce la validazione lato server di CF7. Configura sempre i campi obbligatori nell'editor del modulo (l'asterisco * nel markup) e verifica che le email vengano recapitate. Due livelli di protezione: frontend per la comodità, backend per la sicurezza.

Pulsante nascosto, lead puliti: cosa usare sul tuo sito

L'approccio di nascondere il pulsante di invio è uno di quei micro-miglioramenti invisibili all'occhio ma percepibili all'uso. Un utente non dirà «fantastico, il pulsante è apparso al momento giusto». Ma completerà il modulo e non se ne andrà dopo il primo clic nel vuoto.

Per un semplice modulo di contatto, usa il metodo CSS con :has(): 5 righe di codice, zero dipendenze. Per limiti di lunghezza personalizzati sui campi, usa lo script jQuery del metodo 1 (copia e incolla in Code Snippets). Per moduli complessi con logiche ramificate, usa Conditional Fields.

Provalo subito: apri l'editor del tuo modulo di contatto in CF7, aggiungi id: ai campi e al pulsante, incolla lo script e verifica come il pulsante appare solo quando tutti i campi sono compilati in modo sensato, non a casaccio.

Redazione
RedazioneTeam editoriale→ All publications

Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.