Contact Form 7 Conditional Fields – Come nascondere pulsante invio se le condizioni non vengono accettate.

come nascondere condizione di invio

Come nascondere il pulsante di invio di un form CF7

Qualche giorno fa, durante la costruzione di un form con Contact Form 7, mi è capitato di imbattermi in un piccolo problemino che riguarda più la user experience che altro.

Il modulo funziona benissimo, ma il pulsante di invio appare sempre. Nel caso in cui l’accettazione dei termini e delle condizioni sia obbligatoria il pulsante viene disattivato  automaticamente da CF7. Questo non è un problema da computer desktop o laptop, ma lo diventa da smartphone, in quanto, nei primi casi, passando con il mouse sul pulsante, compare il simbolo di divieto, avvertendo l’utente che qualcosa non va.

Questo non succede da smartphone. Il pulsante, una volta premuto, non reagisce e all’utente potrebbe sembrare di aver compilato correttamente in tutte le sue parti il modulo, magari non accorgendosi dell’obbligo di flaggare la casellina di controllo. Con il risultato di essere convinti di aver inviato correttamente il modulo. Ricordiamoci che la gente non legge!

Ed ecco che entra in gioco Conditional Fields di Contact Form 7.

In questo caso basta una sola condizione:

Visualizza pulsante di invio se accettazione è uguale a 1 (on)

condizione di invio

Dove si mette il campo condizionale?

Abbiamo già visto qui che il campo condizionale crea uno shortcode chiamato “Group” in cui all’interno possiamo mettere qualsiasi campo dobbiamo mostrare o nascondere. Di default il campo dentro allo shortcode è nascosto, quindi dobbiamo farlo apparire se e quando si verifica la condizione che ci interessa.

In questo caso ci interessa che il pulsante invio appaia solo se il il campo “accettazione” è stato correttamente flaggato.

invio condizionale

Semplice e veloce, in questo modo finché il campo di accettazione non è stato spuntato, il pulsante di invio non compare.

N.B. Dato che di default CF7  disabilita il pulsante “invia” se il campo accettazione è obbligatorio, questo sistema non funziona mettendo obbligatoria l’accettazione. Funziona se è facoltativa. Nascondendo il pulsante di invio otteniamo comunque il risultato di far accettare i termini e le condizioni.

Lascia un commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Su di me

Genovese di origine, trasferito in Riviera, da sempre appassionato di tecnologia comincio nel 2003 a smanettare su internet per poi fare della passione un lavoro.

Articoli recenti

tapulli checkout field

Tapulli Checkout Field

Per un progetto un po’ particolare mi serviva un semplice sistema per nascondere alcuni campi di checkout di Woocommerce. Niente di particolare, ma per Woocommerce

Leggi Tutto »