Cum să creați un formular de contact versatil Divi cu logică condiționată

Nu toți vizitatorii vin pe site-ul dvs. din același motiv. Probabil oferiți o gamă de produse sau servicii, nu doar o singură opțiune pentru clienți și clienți. De aceea, dacă aveți mai multe formulare de contact direcționate, puteți ajuta la îmbunătățirea UX-ului site-ului dvs., astfel încât clienții (și potențialii) dvs. să vă poată contacta cu exactitate despre ceea ce au nevoie cu cât mai puțină frecare posibil. Folosind modulul formularului de contact Divi și caracteristica noastră de logică condițională, vă vom ajuta să creați cea mai bună conductă posibilă între dvs. și utilizatorii dvs.

Previzualizarea formularului de contact condiționat

Când totul este spus și făcut, veți avea ceva similar cu acest lucru pe site-ul dvs., pregătit de vizitatori.

Desktop

Mobil

Ce este Logica condiționată?

În primul rând, dorim să abordăm pe scurt ce înțelegem prin logică condițională . Ceea ce vom face în acest tutorial este configurarea unei serii de formulare de contact care apar în funcție de alegerile pe care le face sau nu utilizatorul.

De exemplu, puteți avea un singur formular de contact care se ajustează în funcție de ce serviciu sau produs are nevoie vizitatorul. În acest fel, puteți obține informațiile în formatul de care aveți nevoie, în loc să fie nevoite să le scrie. Logica condițională a formularelor de contact poate îmbunătăți comunicarea și vă poate accelera capacitatea de a furniza utilizatorilor dvs.

Având în vedere acest lucru, haideți să creăm formularele de contact vizate.

Cum se creează formulare de contact utilizând logica condiționată

Încărcați Divi Builder

Deoarece utilizăm modulul Divi Contact Form, va trebui să intrăm în Divi Builder. Vom folosi pachetul de layout Landscape Maintenance ca exemplu în acest tutorial. Puteți utiliza orice aspect sau design doriți, dar va trebui să puteți utiliza și stiliza modulul Divi Contact Form.

Pentru început, introduceți Divi Builder din backend-ul site-ului dvs. WordPress. În Editorul de pagini, veți vedea un buton violet pe care scrie Utilizați Divi Builder (sau Editați cu Divi Builder dacă ați creat deja pagina).

Adăugați sau găsiți modulul de formular de contact

Apoi, veți dori să găsiți modulul Formular de contact care există deja pe pagină sau să faceți clic pe pictograma Cerc negru + și să găsiți Formularul de contact în meniul derulant.

Introduceți setările formularului de contact

Modulul Formular de contact Divi vine în mod implicit cu 3 câmpuri: Nume , E-mail și Mesaj . Ceea ce vom face este să creăm un formular de contact în care aceste opțiuni să nu apară până când vizitatorul nu ne-a oferit suficiente informații pentru a-și putea direcționa interogarea.

Adăugați prima întrebare condiționată

Sub fila Conținut și sub orice câmpuri deja în formular, veți vedea butonul Adăugați un câmp nou . Faceți clic pe asta.

Dacă faceți acest lucru, se deschide fereastra Setări câmp și ar trebui să vedeți locuri pentru intrările ID câmp și Titlu . ID-ul câmpului este pentru dvs. Aceasta este ceea ce apare în setările modulului pentru a putea urmări. Titlul este textul pe care îl vor vedea vizitatorii dvs. în partea din față a formularului. (Titlul va apărea și în e-mailul pe care îl primiți la trimiterea formularului.)

Am etichetat ID-ul câmpului cu „Condițional”, deoarece aceasta este prima întrebare pe care vizitatorul o va vedea pe formular. Răspunsul lor la aceasta va determina ce vor vedea în continuare. Acesta este un mod ușor de a urmări fluxul de întrebări și răspunsuri ale formularului.

Adăugați Opțiuni de câmp

Apoi, derulați sub fila Conținut până la secțiunea Opțiuni câmp . Aici veți adăuga opțiunile pe care utilizatorul le poate alege. Fiecare dintre acestea va fi un factor declanșator pentru anumite întrebări ulterioare. Pentru acest exemplu, folosim casetele de selectare ca tip de intrare. Aceasta înseamnă că utilizatorul poate alege câte doresc.

În plus față de casetele de selectare , Divi permite și alte opțiuni: Câmp de intrare și Textarea pentru propriile răspunsuri tastate ale utilizatorului, Selectați meniurile derulante și butoanele radio pentru alegerile unice pe care le furnizați, precum și Câmpul de e-mail pentru introducerea adresei de e-mail. Câmpul implicit Nume este un câmp de intrare , iar mesajul este o zonă text .

Cu casetele de selectare selectate, vom introduce opțiunile pe care dorim să le declanșăm mai târziu. Apoi vrem să ne asigurăm că acesta este un câmp obligatoriu, astfel încât utilizatorul să nu poată trimite formularul prematur.

Este important să rețineți aici că nu adăugăm Logică condițională la acest pas. Acesta este declanșatorul, astfel încât acesta apare utilizatorului indiferent.

Adăugați câmpuri noi pentru răspunsuri condiționate

Totuși, vom adăuga apoi Logică condițională pentru noile câmpuri pe care le adăugăm ca răspunsuri de urmărire. Deoarece am inclus 3 opțiuni pentru întrebarea inițială, vom adăuga 3 noi câmpuri corespunzătoare la formular . Veți repeta următorii pași pentru fiecare.

Denumiți răspunsurile condiționate în câmpurile noi

Rețineți că am folosit o convenție de numire a condiționalului 1 (pentru a indica primul declanșator condițional) și apoi 1a , 1b și 1c pentru răspunsuri de urmărire. De asemenea, le-am etichetat corespunzător, astfel încât să putem urmări ceea ce sunt.

La fel ca prima întrebare, vom introduce și titlul ca întrebare pe care vizitatorul o va vedea.

Adăugați o logică condițională la câmpurile de răspuns

După aceea, derulați în jos până la secțiunea Logică condiționată de sub fila Conținut a câmpului respectiv. Activați comutarea pentru Logica condiționată . Apoi, alegeți relația pentru aceasta, ceea ce înseamnă că o puteți seta la orice (orice număr de răspunsuri poate face ca această opțiune să apară) sau toate (numai combinația specifică de răspunsuri face ca acest câmp să apară).

Dacă folosiți doar o singură regulă de declanșare ca noi, oricare sau toate vor funcționa.

Sub Reguli , veți vedea câmpul care îl declanșează și, în dreapta, puteți selecta ce alegere îl va declanșa. Centrul este calificativul, cum ar fi egal, nu este egal, este mai mic decât, este mai mare decât și așa mai departe. Pentru acest câmp special, selectăm întrebarea pe care am setat-o ​​ca Condițional 1 și apoi opțiunea din acesta care declanșează în mod specific ca acest câmp să apară.

Repetați acest lucru pentru toate răspunsurile condiționate

Deoarece am adăugat trei răspunsuri diferite la întrebarea noastră condițională unică, vom repeta acest proces exact și pentru celelalte câmpuri. Crearea doar a răspunsurilor corelative adecvate pentru acea selecție.

Setați Formularul de contact Fiends „Nume / E-mail / Mesaj” să apară

După ce ați configurat răspunsurile pentru logica condițională, dorim ca vizitatorul să poată trimite formularul. Pentru aceasta, vom ajusta logica condițională în câmpurile Nume , E-mail și Mesaj . Configurarea pentru fiecare dintre acestea este exact aceeași, deci încă o dată, veți repeta acest lucru de 3 ori.

În setările câmpurilor Nume , E-mail și Mesaj , accesați Logica condiționată . Activați-l și adăugați cât de multe aveți răspunsuri finale la întrebările dvs. ulterioare condiționate. În cazul nostru, avem 3 întrebări suplimentare, deci folosim 3 reguli.

Pentru fiecare regulă, alegeți întrebarea de urmărire ca declanșator. Setați calificatorul la nu este gol , ceea ce înseamnă că atâta timp cât vizitatorul a răspuns la întrebare, condiția este îndeplinită. Acest lucru va înnegri caseta finală, indicând că orice răspuns este suficient.

Salvați modificările și repetați acest lucru pentru toate câmpurile pe care doriți să apară pentru a permite trimiterea formularului . Si asta e! Formularul dvs. se va adapta imediat la nevoile utilizatorilor dvs.

Rezultate finale

Puteți vedea mai jos cum funcționează logica condițională în practică.

Desktop

Mobil

Încheierea

Formularul de contact este unul dintre cele mai omniprezente elemente ale unui site web. Aproape fiecare site are unul și aproape fiecare site are nevoie de unul. Dar nu toți utilizatorii vin pe site-ul dvs. din același motiv. Utilizând funcția logică condițională Divi, vă puteți personaliza formularele de contact într-un instrument versatil cu care utilizatorii dvs. pot comunica.

Ce tipuri de formulare ați realizat utilizând caracteristica Logică condiționată Divi?

Imagine prezentată de articol de către Kubko / shutterstock.com