Jak stworzyć wszechstronny formularz kontaktowy Divi z logiką warunkową?

Nie każdy użytkownik odwiedza Twoją witrynę z tego samego powodu. Prawdopodobnie oferujesz szereg produktów lub usług, a nie tylko jedną opcję dla klientów i klientów. Dlatego posiadanie wielu ukierunkowanych formularzy kontaktowych może pomóc w wygładzeniu UX Twojej witryny, tak aby Twoi klienci (i potencjalni klienci) mogli skontaktować się z Tobą w sprawie dokładnie tego, czego potrzebują, przy jak najmniejszym tarciu. Korzystając z modułu formularza kontaktowego Divi i naszej funkcji logiki warunkowej, przeprowadzimy Cię przez proces tworzenia najlepszego potoku między Tobą a Twoimi użytkownikami, jak to tylko możliwe.

Podgląd formularza kontaktowego warunkowego

Kiedy wszystko zostanie powiedziane i zrobione, będziesz mieć coś podobnego na swojej stronie, gotowe do użycia przez odwiedzających.

Pulpit

mobilny

Co to jest logika warunkowa?

Najpierw chcemy krótko omówić, co rozumiemy przez logikę warunkową . To, co zrobimy w tym samouczku, to skonfigurowanie serii formularzy kontaktowych, które pojawiają się w oparciu o wybory dokonywane przez użytkownika lub nie.

Na przykład możesz mieć pojedynczy formularz kontaktowy, który dostosowuje się w zależności od tego, jakiej usługi lub produktu potrzebuje odwiedzający. W ten sposób możesz uzyskać informacje w wymaganym formacie, zamiast je zapisywać. Logika warunkowa w formularzach kontaktowych może usprawnić komunikację i przyspieszyć możliwość obsługi użytkowników.

Mając to na uwadze, zajmijmy się tworzeniem ukierunkowanych formularzy kontaktowych.

Jak tworzyć formularze kontaktowe za pomocą logiki warunkowej?

Załaduj Divi Builder

Ponieważ używamy modułu Divi Contact Form, będziemy musieli wejść do Divi Builder. Jako przykładu w tym samouczku użyjemy pakietu układu Landscape Maintenance. Możesz użyć dowolnego układu lub projektu, który chcesz, ale będziesz musiał mieć możliwość używania i stylizowania modułu formularza kontaktowego Divi.

Na początek wejdź do Divi Builder z zaplecza swojej witryny WordPress. Wewnątrz edytora stron zobaczysz fioletowy przycisk z napisem Użyj Divi Builder (lub Edytuj za pomocą Divi Builder, jeśli już utworzyłeś stronę).

Dodaj lub znajdź moduł formularza kontaktowego

Następnie będziesz chciał znaleźć Moduł Formularza Kontaktowego, który już istnieje na stronie lub kliknąć ikonę Czarny + Kółko i znaleźć Formularz Kontaktowy w rozwijanym menu.

Wprowadź ustawienia formularza kontaktowego

Moduł Divi Contact Form zawiera domyślnie 3 pola: Imię , E-mail i Wiadomość . Zamierzamy stworzyć formularz kontaktowy, w którym te opcje nie pojawią się, dopóki odwiedzający nie poda nam wystarczających informacji, aby móc skierować swoje zapytanie.

Dodaj pierwsze pytanie warunkowe

Pod zakładką Treść i pod polami już w formularzu zobaczysz przycisk Dodaj nowe pole . Kliknij to.

Spowoduje to otwarcie okna Ustawienia pola i powinieneś zobaczyć miejsca na wpisy identyfikatora pola i tytułu . Identyfikator pola jest dla Ciebie. To właśnie pojawia się w ustawieniach modułu, abyś mógł je śledzić. Tytuł to tekst, który odwiedzający zobaczą w przedniej części formularza. (Tytuł pojawi się również w wiadomości e-mail, którą otrzymasz po przesłaniu formularza).

Oznaczyliśmy identyfikator pola jako „Warunkowe”, ponieważ jest to pierwsze pytanie, które odwiedzający zobaczy w formularzu. Ich reakcja na to określi, co zobaczą dalej. Jest to łatwy sposób na śledzenie przepływu pytań i odpowiedzi w formularzu.

Dodaj opcje pola

Następnie przewiń pod zakładką Zawartość do sekcji Opcje pola . W tym miejscu dodasz opcje, z których użytkownik może wybrać. Każdy z nich będzie wyzwalaczem dla pewnych pytań uzupełniających. W tym przykładzie używamy pól wyboru jako naszego typu danych wejściowych. Oznacza to, że użytkownik może wybrać tyle, ile chce.

Oprócz pól wyboru Divi umożliwia również inne opcje: pole wejściowe i obszar tekstowy do wpisywania odpowiedzi użytkownika, przyciski wyboru listy rozwijanej i przycisków radiowych do pojedynczych opcji, które podajesz, a także pole e-mail do wprowadzania adresu e-mail. Domyślnym polem Nazwa jest pole wejściowe , a Wiadomość to obszar tekstowy .

Po zaznaczeniu pól wyboru wprowadzimy opcje, które później chcemy wywołać. Następnie chcemy się upewnić, że jest to pole wymagane, aby użytkownik nie mógł przedwcześnie przesłać formularza.

Należy zauważyć, że nie dodajemy logiki warunkowej do tego kroku. To jest wyzwalacz, więc niezależnie od tego wydaje się użytkownikowi.

Dodaj nowe pola dla odpowiedzi warunkowych

Następnie dodamy jednak logikę warunkową dla nowych pól, które dodamy jako odpowiedzi uzupełniające. Ponieważ w pierwszym pytaniu uwzględniliśmy 3 opcje, do formularza dodamy 3 nowe odpowiadające pola . Powtórzysz następujące kroki dla każdego z nich.

Nazwij odpowiedzi warunkowe w nowych polach

Zauważ, że zastosowaliśmy konwencję nazewnictwa Warunek 1 (aby wskazać pierwszy warunkowy wyzwalacz), a następnie 1a , 1b i 1c dla odpowiedzi uzupełniających. Odpowiednio je oznaczyliśmy, abyśmy mogli śledzić, czym one są.

Podobnie jak w przypadku pierwszego pytania, wprowadzimy również Tytuł jako pytanie, które zobaczy odwiedzający.

Dodaj logikę warunkową do pól odpowiedzi

Następnie przewiń w dół do sekcji Logika warunkowa na karcie Zawartość tego pola. Włącz przełącznik dla logiki warunkowej . Następnie wybierz Relację dla tego, co oznacza, że ​​możesz ustawić ją na dowolną (dowolna liczba odpowiedzi może spowodować wyświetlenie tej opcji) lub wszystkie (tylko konkretna kombinacja odpowiedzi powoduje wyświetlenie tego pola).

Jeśli używasz tylko jednej reguły wyzwalającej, tak jak my, każda lub wszystkie będą działać.

W sekcji Reguły zobaczysz pole, które uruchamia to, a po prawej stronie możesz wybrać, który wybór go wywoła. Centrum jest kwalifikatorem, takim jak równa się, nie równa się, jest mniejszy niż, jest większy niż i tak dalej. Dla tego konkretnego pola wybieramy pytanie, które ustawiliśmy jako Warunek 1, a następnie opcję w nim, która konkretnie uruchamia to pole.

Powtórz to dla wszystkich odpowiedzi warunkowych

Ponieważ dodaliśmy trzy różne odpowiedzi do naszego pojedynczego pytania warunkowego, powtórzymy ten dokładny proces również dla pozostałych pól. Tylko tworzenie odpowiednich korelacji odpowiedzi dla tego wyboru.

Ustaw „Imię/E-mail/Wiadomość” znajomych formularzy kontaktowych na wyświetlanie

Po skonfigurowaniu odpowiedzi dla logiki warunkowej chcemy, aby odwiedzający rzeczywiście mógł przesłać formularz. W tym celu dostosujemy logikę warunkową w polach Nazwa , E-mail i Wiadomość . Konfiguracja dla każdego z nich jest dokładnie taka sama, więc ponownie powtórzysz to 3 razy.

W ustawieniach pól Nazwa , E-mail i Wiadomość przejdź do opcji Logika warunkowa . Włącz go i dodaj tyle, ile masz ostatecznych odpowiedzi na swoje warunkowe pytania uzupełniające. W naszym przypadku mamy 3 pytania uzupełniające, więc stosujemy 3 zasady.

Dla każdej reguły wybierz pytanie uzupełniające jako wyzwalacz. Ustaw kwalifikator na nie jest pusty , co oznacza, że ​​dopóki gość odpowiedział na pytanie, warunek jest spełniony. Spowoduje to wyszarzenie ostatniego pola, wskazując, że każda odpowiedź jest wystarczająca.

Zapisz zmiany i powtórz to dla wszystkich pól, które mają być wyświetlane, aby umożliwić przesyłanie formularzy . I to wszystko! Twój formularz od razu dostosuje się do potrzeb Twoich użytkowników.

Ostateczne rezultaty

Poniżej możesz zobaczyć, jak w praktyce działa logika warunkowa.

Pulpit

mobilny

Zawijanie

Formularz kontaktowy to jeden z najbardziej wszechobecnych elementów strony internetowej. Prawie każda witryna ma jeden i prawie każda witryna go potrzebuje. Ale nie każdy użytkownik odwiedza Twoją witrynę z tego samego powodu. Korzystając z funkcji logiki warunkowej Divi, możesz dostosować swoje formularze kontaktowe do wszechstronnego narzędzia, z którym Twoi użytkownicy mogą się komunikować.

Jakie rodzaje formularzy stworzyłeś za pomocą funkcji Divi Conditional Logic?

Artykuł wyróżniony obrazem autorstwa Kubko / shutterstock.com