Come creare un modulo di contatto Divi versatile con logica condizionale

Non tutti i visitatori arrivano al tuo sito per lo stesso motivo. Probabilmente offri una gamma di prodotti o servizi, non solo una singola opzione per clienti e clienti. Ecco perché avere più moduli di contatto mirati può aiutare a rendere più fluida la UX del tuo sito in modo che i tuoi clienti (e potenziali) possano mettersi in contatto con te su esattamente ciò di cui hanno bisogno con il minor attrito possibile. Utilizzando il modulo di contatto Divi e la nostra funzione di logica condizionale, ti guideremo attraverso la creazione della migliore pipeline possibile tra te e i tuoi utenti.

Anteprima del modulo di contatto condizionale

Quando tutto sarà stato detto e fatto, avrai qualcosa di simile a questo sul tuo sito, pronto per l'uso da parte dei tuoi visitatori.

Desktop

Mobile

Cos'è la logica condizionale?

Innanzitutto, vogliamo affrontare brevemente cosa intendiamo per logica condizionale . Quello che faremo in questo tutorial è impostare una serie di moduli di contatto che appaiono in base alle scelte che l'utente fa o non fa.

Ad esempio, puoi avere un unico modulo di contatto che si adatta in base a quale servizio o prodotto ha bisogno il visitatore. In questo modo, puoi ottenere le informazioni nel formato di cui hai bisogno invece di doverle scrivere. La logica condizionale sui moduli di contatto può migliorare la comunicazione e accelerare la tua capacità di fornire servizi ai tuoi utenti.

Con questo in mente, approfondiamo la creazione dei moduli di contatto mirati.

Come creare moduli di contatto utilizzando la logica condizionale

Carica il Divi Builder

Poiché stiamo utilizzando il modulo Divi Contact Form, dovremo entrare nel Divi Builder. Utilizzeremo il pacchetto di layout Landscape Maintenance come esempio in questo tutorial. Puoi utilizzare qualsiasi layout o design che desideri, ma dovrai essere in grado di utilizzare e modellare il modulo Modulo di contatto Divi.

Per iniziare, accedi a Divi Builder dal backend del tuo sito Web WordPress. All'interno del Page Editor, vedrai un pulsante viola che dice Usa Divi Builder (o Modifica con Divi Builder se hai già creato la pagina).

Aggiungi o trova il modulo del modulo di contatto

Quindi vorrai trovare il modulo del modulo di contatto che esiste già nella pagina o fare clic sull'icona Nero + Cerchio e trovare il modulo di contatto nel menu a discesa.

Inserisci le impostazioni del modulo di contatto

Il modulo Divi Contact Form viene fornito con 3 campi per impostazione predefinita: Nome , Email e Messaggio . Quello che faremo è creare un modulo di contatto in cui tali opzioni non vengono visualizzate finché il visitatore non ci ha fornito informazioni sufficienti per poter indirizzare la sua richiesta.

Aggiungi la prima domanda condizionale

Nella scheda Contenuto e sotto tutti i campi già presenti nel modulo, vedrai il pulsante Aggiungi nuovo campo . Fare clic su quello.

In questo modo si apre la finestra Impostazioni campo e dovresti vedere i posti per le voci ID campo e Titolo . L' ID campo è per te. Questo è ciò che appare all'interno delle impostazioni del modulo di cui tenere traccia. Il titolo è il testo che i tuoi visitatori vedranno sul front-end del modulo. (Il titolo apparirà anche nell'e-mail che riceverai quando il modulo viene inviato.)

Abbiamo etichettato l' ID campo con "Condizionale" perché questa è la prima domanda che il visitatore vedrà nel modulo. La loro risposta determinerà ciò che vedranno dopo. Questo è un modo semplice per tenere traccia del flusso delle domande e delle risposte del modulo.

Aggiungi opzioni di campo

Quindi, scorri sotto la scheda Contenuto fino alla sezione Opzioni campo . Qui è dove aggiungerai le scelte tra cui l'utente può scegliere. Ognuno di questi sarà un trigger per alcune domande di follow-up. Per questo esempio, utilizziamo le caselle di controllo come tipo di input. Ciò significa che l'utente può sceglierne quanti ne vuole.

Oltre a Caselle di controllo, Divi permette anche altre opzioni: Input Campo e Textarea per proprie risposte tipizzati dell'utente, Select discesa e bottoni radio per le scelte singolari forniti dall'utente, così come e-mail campo per l'ingresso indirizzo e-mail. Il campo predefinito Nome è un campo di input, e messaggi è una textarea.

Con le caselle di controllo selezionate, inseriremo le scelte che vogliamo attivare diverse opzioni in un secondo momento. Vogliamo quindi assicurarci che questo sia un campo obbligatorio in modo che l'utente non possa inviare il modulo prematuramente.

È importante notare qui che non aggiungiamo la logica condizionale a questo passaggio. Questo è il trigger, quindi appare all'utente a prescindere.

Aggiungi nuovi campi per le risposte condizionali

Successivamente, tuttavia, aggiungeremo la logica condizionale per i nuovi campi che aggiungiamo come risposte di follow-up. Poiché abbiamo incluso 3 opzioni per la domanda iniziale, aggiungeremo 3 nuovi campi corrispondenti al modulo . Ripeterete i seguenti passaggi per ciascuno di essi.

Assegna un nome alle risposte condizionali nei nuovi campi

Nota che abbiamo usato una convenzione di denominazione di Condizionale 1 (per indicare il primo trigger condizionale) e poi 1a , 1b e 1c per le risposte di follow-up. Li abbiamo anche etichettati in modo appropriato in modo da poter tenere traccia di ciò che sono.

Come la prima domanda, inseriremo anche il Titolo come domanda che vedrà il visitatore.

Aggiungi logica condizionale ai campi di risposta

Successivamente, scorri verso il basso fino alla sezione Logica condizionale nella scheda Contenuto di quel campo. Abilita l'interruttore per Logica condizionale . Quindi, scegli la Relazione per questa, il che significa che puoi impostarla su qualsiasi (qualsiasi numero di risposte può far apparire questa opzione) o su tutte (solo la combinazione specifica di risposte fa apparire questo campo).

Se stai usando solo una singola regola di innesco come noi, sia uno o tutti funzionerà.

Sotto Regole , vedrai il campo che attiva questo e, a destra, puoi selezionare quale scelta lo attiverà. Il centro è il qualificatore, ad esempio uguale, non uguale, è minore di, è maggiore di e così via. Per questo particolare campo, stiamo selezionando la domanda che abbiamo impostato come Condizionale 1 e quindi l'opzione al suo interno che attiva specificamente la visualizzazione di questo campo.

Ripeti questa operazione per tutte le risposte condizionali

Poiché abbiamo aggiunto tre diverse risposte alla nostra singola domanda condizionale, ripeteremo questo processo esatto anche per gli altri campi. Solo creando le risposte correlate appropriate per quella selezione.

Imposta il modulo di contatto "Nome/Email/Messaggio" in modo che appaia

Una volta impostate le risposte per la logica condizionale, vogliamo che il visitatore sia effettivamente in grado di inviare il modulo. Per questo, regoleremo la logica condizionale nei campi Nome , Email e Messaggio . L'impostazione per ciascuno di questi è esattamente la stessa, quindi ancora una volta, lo ripeterai 3 volte.

All'interno delle impostazioni dei campi Nome , Email e Messaggio , vai in Logica condizionale . Abilitalo e aggiungi tutte le risposte finali alle tue domande condizionali di follow-up. Nel nostro caso, abbiamo 3 domande di follow-up, quindi stiamo usando 3 regole.

Per ogni regola, scegli la domanda di follow-up come trigger. Imposta il qualificatore su non è vuoto , il che significa che finché il visitatore ha risposto alla domanda, la condizione è soddisfatta. Ciò renderà grigia la casella finale, indicando che qualsiasi risposta è sufficiente.

Salva le modifiche e ripeti l'operazione per tutti i campi che desideri vengano visualizzati per consentire l'invio del modulo . E questo è tutto! Il tuo modulo si adatterà immediatamente alle esigenze dei tuoi utenti.

Risultati finali

Di seguito puoi vedere come funziona in pratica la logica condizionale.

Desktop

Mobile

Avvolgendo

Il modulo di contatto è uno degli elementi più onnipresenti di un sito web. Praticamente ogni sito ne ha uno e praticamente ogni sito ne ha bisogno. Ma non tutti gli utenti vengono sul tuo sito per lo stesso motivo. Utilizzando la funzione di logica condizionale di Divi, puoi personalizzare i tuoi moduli di contatto in uno strumento versatile con cui i tuoi utenti possono comunicare.

Che tipo di moduli hai creato utilizzando la funzione Divi Conditional Logic?

Immagine in primo piano dell'articolo di Kubko / shutterstock.com