Skip to content

Campi condizionali con Contact Form 7 per WordPress

Torna agli articoli

Contact Form 7 è uno dei più popolari plugin per la realizzazione di moduli di contatto. Permette infatti in modo semplice di creare moduli con svariate tipologie di campi (testo, email, checkbox, select ecc.), di gestirne la validazione e di inviare un’email al destinatario del sito web (o ad un indirizzo personalizzato) con la mail di dettaglio con tutti i campi compilati dall’utente.

Contact Form 7 è davvero duttile, oltre che per implementare semplici moduli di contatto è possibile utilizzarlo per la registrazione ad una newsletter, per permettere in pagamento agli utenti e molto altro. Inoltre sono presenti una serie di estensioni che gli aggiungono i “super poteri” e lo rendono uno strumento molto valido per chi realizza siti web.

Contact Form 7 e campi condizionali: mostrare campi specifici o descrizioni in base alla scelta di un altro campo

Nella sua semplicità Contact Form 7 ha un pecca: non integra i campi condizionali.
Cosa sono i campi condizionali?

Semplice, prendiamo in esempio la scelta della tipologia di utente tra privato ed azienda.
Nel secondo caso potrebbe essere necessario mostrare il campo partita iva oppure PEC (oppure entrambe).

Prendiamo invece il caso di un Hotel che permette di prenotare sia la cena che il soggiorno.
Dovremmo permettere all’utente di scegliere la tipologia del servizio (cena, soggiorno, oppure entrambe) e nel caso di soggiorno mostrare data di arrivo e di partenza.

Ecco, purtroppo nativamente Contact Form 7 non integra quest’opzione, però ci viene in aiuto un plugin chiamato Conditional Fields for Contact Form 7. E’ totalmente gratuito e disponibile nella directory dei plugin ufficiale di WordPress.

Come utilizzare Conditional Fields for Contact Form 7

Ipotizziamo di partire da un modulo classico di Contact Form 7 dove richiederemo Nome, E-mail e messaggio. La situazione, all’interno del modulo sarebbe la seguente:

<label> Il tuo nome
[text* your-name] </label>

<label> La tua email
[email* your-email] </label>

<label> Il tuo messaggio (facoltativo)
[textarea your-message] </label>

[submit "Invia"]

Bene, a questo punto vogliamo appunto dare la possibilità di aggiungere un campo di scelta dove l’utente specificherà se è un privato o un’azienda. Aggiungeremo quindi un campo di tipo “menu a discesa”  dove andremo a specificare entrambe le voci:

[select* tipocliente include_blank "azienda" "privato"]

Sarà importante impostare anche il valore include_blank in modo che si possa partire da un campo vuoto, che quindi l’utente dovrà compilare. Quindi il nostro campo sarà di tipo select, sarà obbligatorio, si chiamerà tipocliente e avrà due opzioni di scelta “azienda” o “privato”.

A questo punto all’interno dei moduli selezionabili cliccate su Conditional Fields Group. Questo vi permetterà di creare un gruppo di campi condizionali personalizzato. A questo punto dovrete andare ad inserire i campi che devono comparire quando quel gruppo sarà selezionato.

[group group-campi-azienda]
[text* partitaiva]
[/group]

Nello nostro caso il gruppo si chiamerà gruppo-campi-azienda, lo mostreremo quando tipocliente sarà impostato su azienda  e mostrerà il campo di testo partitaiva.

Fatto questo abbiamo “apparecchiato” tutto, non ci resta che spostarci nella tab Conditional Field di Contact Form 7, cliccare su “add new conditional rule”

ShowSelezionare group-campi-azienda
IfSelezionare tipocliente
equalsLasciarlo uguale, è l’operatore logico che sta per “uguale”
valueScrivere azienda (valore del nostro campo tipocliente)

Ok, se avete fatto tutto corretto il risultato sarà che quando scegliete dalla tendina il valore “azienda” a quel punto il modulo di contatto vi mostrerà il nuovo campo “Partita Iva”.
Se duplicate il gruppo per i campi relativi al privato e configurate dalla tab Conditional Field di Contact Form una nuova condizione, potrete mostrare i campi per il privato. Ipotiziamo che il nostro gruppo si chiami group-campi-privato ecco che la nostra nuova condizione sarà così configurata:

ShowSelezionare group-campi-privato
IfSelezionare tipocliente
equalsLasciarlo uguale, è l’operatore logico che sta per “uguale”
valueScrivere privato (valore del nostro campo tipocliente)

Et’ voilà!

Campi condizionali di Contact Form e obbligatorietà

Adesso probabilmente ti chiederai: ma se imposto il campo Partita IVA obbligatorio e poi seleziono il Tipo Cliente “privato”, il modulo andrà in errore per non aver validato il campo obbligatorio Partita IVA?

No! Conditional Fields for Contact Form 7 permette di creare campi obbligatori che se non inclusi in un gruppo attivo (quindi se non visibili) perdono la loro obbligatorietà!

 

Buon divertimento con questo utilissimo plugin! Se hai bisogno di maggiori informazioni scrivi pure nei commenti, sarò lieto di aiutarti!

Preventivo Gratuito