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 la Video-Guida su 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ù in backend Plugin►Aggiungi Nuovo

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 con l’esempio pratico ti sarà sicuramente tutto più chiaro.

Esempio Pratico

Ho creato appositamente un modulo per questo articolo, proprio per mostrarvi Conditional Fields in azione. Nelle impostazioni aggiuntive di Contact Form 7 ho impostato il demo_mode:on, quindi puoi tranquillamente cliccare su “inviaci le risposte”.

Scegli una voce nel menù a discesa e leggi le relative domande, che cambiano a seconda della tua scelta.

Quanto conosci WordPress?

Cosa sai fare?

Installare Wp in localeInstallare Temi e PluginCreare Moduli di Contatto

Cosa sai fare?

Creare un Tema ChildImpostare la cacheGestire la Newsletter

Cosa sai fare?

Modificare l'HtmlModificare il CssMinificare il codice

N.b. Ovviamente si potranno aggiungere gli altri campi mancanti, quali il nome, l’email, l’area di testo e così via. Questa è solo una dimostrazione.

Passiamo alla spiegazione

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:

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!

Potrebbe interessarti anche...



Go WordPress

Questo Blog nasce dalla passione per WordPress. Nel tempo libero cerco di arricchirlo di nuove Guide. Se ti abboni alla Newsletter sarai sempre aggiornato sui nuovi contenuti (in regalo un Ebook fantastico!). Se ti va, puoi offrirmi un caffè seguendo il link sulla barra laterale. Buona lettura da Lino Tumminieri. Go WordPress!