Conditional Fields per Contact Form 7

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:

Anteprima Conditional Fields

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]

shortcode conditional fields

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:

<p>Quanto conosci WordPress?</p>

[select menu-635 include_blank "Livello Base" "Livello Medio" "Livello Avanzato"]

[group group-base]
<p>Cosa sai fare?</p>

[checkbox checkbox-249 "Installare Wp in locale" "Installare Temi e Plugin" "Creare Moduli di Contatto"]

[/group]

[group group-medio]
<p>Cosa sai fare?</p>

[checkbox checkbox-339 "Creare un Tema Child" "Impostare la cache" "Gestire la Newsletter"]

[/group]

[group group-avanzato]
<p>Cosa sai fare?</p>

[checkbox checkbox-302 "Modificare l'Html" "Modificare il Css" "Minificare il codice"]

[/group]

[submit "Inviaci le risposte"]

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-365 e i 3 group).

imposta conditional fields

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):

imposta email conditional fields

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)

risultato email conditional fields

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!

Condividi sui Social



Potrebbero interessarti anche...



Lascia un commento

Il tuo indirizzo email non sarà pubblicato.