Conditional Fields per Contact Form 7

Ho avuto modo di testare l’addon Conditional Fields per Contact Form 7 e devo dire che l’ho trovato molto ingegnoso. Una volta capito il meccanismo, potrai creare un modulo di contatto interattivo, che esegue una determinata funzione in base ad una determinata scelta da parte dell’utente.

In questo articolo fornirò un esempio pratico di come creare le “condizioni preliminari” e di come impostare le relative risposte.

Scarica Conditional Fields

Se hai già letto l’articolo su Come Creare Moduli di Contatto con Contact Form 7 e l’articolo su Come modificarne il Layout, allora sei già a buon punto. Passiamo quindi al download dell’addon:

In alternativa, vai sul menù

Plugin ► Aggiungi Nuovo ► Conditional Fields

Installato l’addon, troverai queste due voci nel modulo di Contact Form 7:

La sezione in alto serve a impostare le relazioni tra i vari campi, quella in basso a creare le condizioni (campi condizionali) affinché si ottengano i risultati predeterminati. Probabilmente sembra complicato, ma dopo l’utilizzo pratico ti sarà sicuramente tutto più chiaro.

Passiamo all’esempio pratico

Prima di tutto ho creato il menù a discesa (menu-635) con i valori:

• Elemento vuoto come prima opzione
• Livello Base
• Livello Medio
• Livello Avanzato

In seguito cliccando sul bottone “Conditional Fields Groups” ho creato i tre gruppi di risposte:

• group-base, shortcode = [group group-base]
• group-medio, shortcode = [group group-medio]
• group-avanzato, shortcode = [group group-avanzato]

E infine tra i comandi [group] e [/group] ho inserito le relative risposte (in base al gruppo di appartenenza) sfruttando le caselle di controllo (checkbox). Ti mostro adesso l’intero codice del modulo, con i tre gruppi:

Cliccando su Salva, Contact Form 7 memorizza i nuovi campi creati (con i relativi shortcodes posti in alto).

Impostiamo le relazioni

Ed ora andiamo sulla sezione in alto “Conditional Fields”. Clicca sulla voce in verde “Add new conditional rule” e imposta le relazioni (nel nostro esempio tra il menu-635 e i 3 group).

Presta attenzione nell’inserire correttamente i valori, una lettera errata e il modulo non funziona. Il resto è abbastanza intuitivo.

Riceviamo il risultato in email

Ultimo passaggio: riceviamo le informazioni in email. Ecco come le ho inserite nel Modulo di Contact Form 7 (scheda Mail):

Ed ecco il testo che ho ricevuto in email: (simulando che l’utente abbia scelto Livello Medio e cliccato sui checkbox Tema Child e Imposta la cache)

Conclusioni

Trovo che questo plugin sia davvero fantastico e che si possano creare moduli di contatto realmente interattivi e dinamici. Avevo cercato su Google una guida italiana, ma non ne avevo trovato nessuna che spiegasse i vari passaggi. Da qui la mia idea di crearne una. E tu cosa ne pensi?

Per approfondire, ecco una Guida in inglese: clicca qui.

E un video in inglese dal canale YouTube Wp Learning Lab

 

Adesso mi piacerebbe conoscere la tua opinione nei commenti qui in basso. 🙂 Stay tuned!