Jak tworzyć dynamiczne formularze z wykorzystaniem logiki warunkowej

Formularze statyczne zadają wszystkim te same pytania. Formularze dynamiczne dostosowują się. Wybierz „Zapytanie biznesowe”, a pojawią się pola firmy. Wybierz „Inne”, a otworzy się pole tekstowe. Odpowiedz „Tak”, a pojawią się pytania uzupełniające. Logika warunkowa przekształca sztywne kwestionariusze w inteligentne konwersacje, które reagują na sytuację każdego użytkownika.

W tym przewodniku dowiesz się, jak tworzyć dynamiczne formularze z logiką warunkową, które wyświetlają właściwe pola właściwym osobom we właściwym czasie.

Co sprawia, że ​​formularz jest dynamiczny?

Forma statyczna

• Każdy użytkownik widzi każde pole
• Stała struktura
• Żadnej adaptacji
• Jeden rozmiar dla wszystkich

Dynamiczna forma

• Pola pojawiają się na podstawie odpowiedzi
• Dostosowuje się do kontekstu użytkownika
• Spersonalizowane doświadczenie
• Wyświetlane są tylko istotne pytania

Różnica

STATYCZNE: Imię → E-mail → Telefon → Firma → Budżet → Wiadomość (wszyscy widzą wszystkie 6) DYNAMICZNE: Imię → E-mail → „Rodzaj zapytania?” → JEŚLI Osobiste: Telefon → Wiadomość (4 pola) → JEŚLI Firmowe: Firma → Telefon → Budżet → Wiadomość (6 pól)

Jak działa logika warunkowa

Podstawowa struktura

JEŻELI [warunek jest spełniony] WTEDY [pokaż/ukryj pole(a)]

Komponenty

• Pole wyzwalające: Pole, które decyduje o tym, co się dzieje
• Stan: Jaka wartość wyzwala akcję
• Akcja: Pokaż lub ukryj
• Pola docelowe: Co się pojawia lub znika

Przykład

Wyzwalacz: „Czy jesteś istniejącym klientem?” Warunek: Wartość równa się „Tak” Działanie: Pokaż Cel: Pole „Identyfikator klienta”

Tworzenie pierwszego formularza dynamicznego

Krok 1: Zaplanuj swoją logikę

Przed rozpoczęciem budowy należy zaplanować:

• Jakie pytania zapalne zadasz?
• Które pola zależą od których odpowiedzi?
• Które ustawienie jest domyślne (ukryte lub widoczne)?

Krok 2: Zbuduj formularz bazowy

1. Otwórz formularz w A.F.B.
2. Dodaj wszystkie pola (zarówno zawsze wyświetlane, jak i warunkowe)
3. Ułóż w logicznej kolejności

Krok 3: Identyfikacja pól wyzwalających

Dobre pola wyzwalające:

• Rozwijane listy z przejrzystymi kategoriami
• Przyciski radiowe (Tak/Nie, wybór typu)
• Checkboxes

Krok 4: Skonfiguruj warunki

1. Wybierz pole docelowe (to, które chcesz pokazać/ukryć)
2. Otwórz ustawienia logiki warunkowej
3. Wybierz pole wyzwalacza
4. Ustaw warunek (równa się, zawiera, itd.)
5. Zdefiniuj akcję (pokaż/ukryj)

Krok 5: Przetestuj każdą ścieżkę

1. Podgląd formularza
2. Przetestuj każdą opcję wyzwalacza
3. Sprawdź, czy wyświetlają się prawidłowe pola
4. Prześlij wpisy testowe
5. Sprawdź, czy dane zapisują się prawidłowo

Typowe wzorce formularzy dynamicznych

Wzorzec 1: Kontynuacja odpowiedzi Tak/Nie

Struktura:

Czy masz stronę internetową? ○ Tak ○ Nie JEŚLI Tak → Pokaż: pole „Adres URL witryny” JEŚLI Nie → Pokaż: pole „Czy potrzebujesz pomocy w jej utworzeniu?”

Używać do: Pytania kwalifikacyjne z różnymi działaniami następczymi

Wzorzec 2: Rozgałęzienie kategorii

Struktura:

Jaki typ zapytania? ○ Sprzedaż ○ Wsparcie ○ Rozliczenia ○ Inne JEŚLI Sprzedaż → Pokaż: Budżet, Harmonogram, Wielkość firmy JEŚLI Wsparcie → Pokaż: Numer zamówienia, Opis problemu JEŚLI Rozliczenia → Pokaż: Numer faktury, Adres e-mail konta JEŚLI Inne → Pokaż: Obszar tekstowy „Proszę opisać”

Używać do: Różne pytania dla różnych typów użytkowników

Wzór 3: Specyfikacja „Inne”

Struktura:

Skąd się o nas dowiedziałeś/aś? ☐ Google ☐ Media społecznościowe ☐ Znajomy ☐ Inne JEŚLI zaznaczono Inne → Pokaż: pole tekstowe „Proszę określić”

Używać do: Przechwytywanie niestandardowych odpowiedzi

Wzorzec 4: Ujawnianie progresywne

Struktura:

Informacje podstawowe: Imię i nazwisko, adres e-mail (zawsze wyświetlane) Chcesz podać więcej szczegółów? ○ Tak ○ Nie JEŚLI TAK → Pokaż: Firma, Telefon, Opis projektu, Budżet

Używać do: Opcjonalne szczegółowe informacje

Wzorzec 5: Warunkowe przesyłanie plików

Struktura:

Czy posiadasz dokumenty potwierdzające? ○ Tak ○ Nie JEŚLI TAK → Pokaż: pole Prześlij plik

Używać do: Opcjonalne załączniki

Wzór 6: Klient kontra potencjalny klient

Struktura:

Czy jesteś obecnym klientem? ○ Tak ○ Nie JEŚLI Tak → Pokaż: Identyfikator klienta, Adres e-mail konta JEŚLI Nie → Pokaż: Firma, Skąd się o nas dowiedziałeś?

Używać do: Różne przepływy dla istniejących i nowych

Tworzenie kompletnego formularza dynamicznego: przykład

Formularz zapytania serwisowego

Pola zawsze widoczne:

• Imię *
• E-mail (wymagane)
• Zainteresowanie usługą (lista rozwijana – wyzwalacz)

Opcje dotyczące odsetek od usług:

• Web Design
• SEO
• Marketing
• Konsulting
• Inne

Pola warunkowe:

IF Projektowanie stron internetowych:

• Aktualny adres URL witryny
• Liczba potrzebnych stron
• Preferencje projektowe (menu rozwijane)

JEŚLI SEO:

• Aktualny adres URL witryny
• Słowa kluczowe docelowe (pole tekstowe)
• Miesięczny zakres budżetu

Marketing IF:

• Kanały marketingowe (pola wyboru)
• Grupa docelowa
• Miesięczny zakres budżetu

IF Consulting:

• Temat konsultacyjny
• Preferowany czas spotkania

JEŚLI Inne:

• Proszę opisać (pole tekstowe)

Zawsze widoczne (po warunku):

• Dodatkowe uwagi (opcjonalne)
• Przycisk Prześlij

Wynik

• Odwiedzający witrynę Web Design widzą 6 pól
• Odwiedzający SEO widzą 6 pól
• Odwiedzający stronę marketingową widzą 6 pól
• Konsultanci widzą 5 pól
• Inni goście widzą 4 pola

Rodzaje warunków

Równa się

JEŻELI [Pole] jest równe „Wartość”

Wymagane jest dokładne dopasowanie.

Nierówne

JEŻELI [Pole] nie jest równe „Wartość”

Cokolwiek oprócz tej wartości.

zawiera

JEŻELI [Pole] zawiera „tekst”

Wartość zawiera gdzieś tekst.

Jest pusty

JEŻELI [Pole] jest puste

Nie wprowadzono żadnej wartości.

Nie jest pusty

JEŻELI [Pole] nie jest puste

Wprowadź dowolną wartość.

Większy niż / Mniejszy niż

JEŻELI [Pole liczbowe] jest większe niż 100 JEŻELI [Pole liczbowe] jest mniejsze niż 50

Porównania liczbowe.

Wiele warunków

I Logika

Pokaż pole JEŻELI: Usługa = „Przedsiębiorstwo” ORAZ Budżet > 10000 ORAZ Harmonogram = „Ten kwartał”

WSZYSTKIE warunki muszą być spełnione.

LUB Logika

Pokaż pole JEŻELI: Usługa = "Projektowanie stron internetowych" LUB Usługa = "SEO" LUB Usługa = "Marketing"

Wystarczy, że KAŻDY warunek będzie spełniony.

Połączone AND/OR

Pokaż pole JEŻELI: (Usługa = „Projektowanie stron internetowych” LUB Usługa = „SEO”) ORAZ Budżet > 5000

Miksuj dla uzyskania złożonej logiki.

Najlepsze praktyki dotyczące formularzy dynamicznych

1. Zacznij od czegoś prostego

• Zacznij od jednego lub dwóch warunków
• Stopniowo dodawaj złożoność
• Przetestuj każdy dodatek

2. Zachowaj przejrzystość logiczną

• Zadawaj oczywiste pytania wyzwalające
• Unikaj mylących zależności
• Udokumentuj swoją logikę

3. Logiczne rozmieszczenie pól

• Pola warunkowe pojawiają się po wyzwoleniu
• Utrzymuj naturalny przepływ
• Powiązane pola grupowe

4. Obsługuj pola wymagane

• Ukryte pola nie powinny być wymagane
• Ustaw jako wymagane tylko wtedy, gdy jest widoczne
• Przesłanie testu z ukrytymi wymaganymi polami

5. Zapewnij wizualną informację zwrotną

• Płynne animacje pojawiających się pól
• Wyraźne przejścia
• Żadnych drastycznych zmian

6. Przetestuj wszystkie ścieżki

• Każda opcja wyzwalacza
• Każda kombinacja z użyciem AND/OR
• Mobilne i stacjonarne
• Różne przeglądarki

Przykłady dynamicznych form w świecie rzeczywistym

Przykład 1: Rejestracja na wydarzenie

wyzwalania: Rodzaj obecności

• Osobiście → Pokaż: Ograniczenia dietetyczne, Rozmiar koszulki, Kontakt alarmowy
• Wirtualny → Pokaż: Strefa czasowa, Preferencje platformy
• Hybryda → Pokaż: Wszystkie powyższe

Przykład 2: Podanie o pracę

wyzwalania: Typ stanowiska

• Pełny etat → Pokaż: Oczekiwania płacowe, Data rozpoczęcia
• Praca w niepełnym wymiarze godzin → Pokaż: Dostępne godziny, Preferencje dotyczące harmonogramu
• Umowa → Pokaż: Stawka godzinowa, Czas trwania projektu

Przykład 3: Zgłoszenie do pomocy technicznej

wyzwalania: Kategoria wydania

• Techniczne → Pokaż: Przeglądarka, System operacyjny, Komunikat o błędzie, Przesyłanie zrzutu ekranu
• Rozliczanie → Pokaż: Numer zamówienia, Numer faktury
• Konto → Pokaż: Nazwa użytkownika, Adres e-mail konta
• Prośba o funkcję → Pokaż: Opis funkcji, Przypadek użycia

Przykład 4: Zapytanie ofertowe

wyzwalania: Typ zabudowy:

• Nowa strona internetowa → Pokaż: Branża, Liczba stron, Potrzebne funkcje
• Przeprojektuj → Pokaż: Aktualny adres URL, Co zachować, Co zmienić
• Konserwacja → Pokaż: Aktualny adres URL, Wymagane zadania, Częstotliwość

Przykład 5: Formularz opinii

wyzwalania: Ocena satysfakcji

• 1-3 (niski) → Pokaż: pole tekstowe „Co poszło nie tak?”
• 4-5 (Wysoki) → Pokaż: „Co zrobiliśmy dobrze?”

Rozwiązywanie problemów z formularzami dynamicznymi

Pole nie jest wyświetlane

• Sprawdź, czy warunek jest ustawiony poprawnie
• Sprawdź, czy wartość pola wyzwalacza dokładnie odpowiada
• Sprawdź, czy w wartościach warunków nie ma literówek
• Potwierdź akcję „Pokaż”, a nie „Ukryj”

Pole nie jest ukryte

• Sprawdź stan domyślny (powinien zaczynać się od ukrytego)
• Sprawdź logikę stanu
• Wyczyść pamięć podręczną przeglądarki

Wymagane pole blokujące przesłanie

• Ukryte pola nie powinny być wymagane
• Zestaw wymagany tylko wtedy, gdy jest widoczny
• Sprawdź wymagane ustawienia warunkowe

Logika nie działa na urządzeniach mobilnych

• Przetestuj na rzeczywistym urządzeniu
• Sprawdź błędy JavaScript
• Sprawdź zachowanie responsywne

Dane nie zapisują się poprawnie

• Sprawdź obsługę danych w ukrytym polu
• Sprawdź, czy ukryte wartości powinny zostać wyczyszczone
• Przetestuj przesłanie dla każdej ścieżki

Zaawansowane techniki formularzy dynamicznych

Warunki łańcuchowe

Pole A wyzwala pole B, które wyzwala pole C:

Typ usługi → JEŚLI „Przedsiębiorstwo” → Pokaż: Wielkość firmy → JEŚLI „1000+” → Pokaż: Pole wyboru Dedykowany menedżer konta

Sekcje warunkowe

Pokaż/ukryj grupy pól razem:

JEŚLI „Wymagana wysyłka” = Tak → Pokaż całą sekcję Adres wysyłki (5 pól)

Warunkowe kierowanie wiadomościami e-mail

Różni odbiorcy w zależności od dokonanych wyborów:

JEŻELI Dział = „Sprzedaż” → Wyślij e-mail do [email chroniony]
JEŚLI Dział = „Wsparcie” → Wyślij e-mail na adres [email chroniony]

Wiadomości potwierdzające warunkowo

Różne wiadomości z podziękowaniami:

JEŚLI Typ zapytania = „Sprzedaż” → Pokaż: „Nasz zespół sprzedaży skontaktuje się z Tobą w ciągu 24 godzin” JEŚLI Typ zapytania = „Wsparcie” → Pokaż: „Zgłoszenie utworzone. Sprawdź numer zgłoszenia w e-mailu”

Najczęściej zadawane pytania

Ile schorzeń mogę mieć?

Technicznie nieograniczony, ale zachowaj go w granicach rozsądku. 5-10 dobrze zaplanowanych warunków sprawdza się dobrze. Więcej niż 15-20 warunków zazwyczaj oznacza, że ​​formularz powinien zostać podzielony.

Czy pola ukryte nadal przesyłają dane?

Zależy od implementacji. Zazwyczaj pola ukryte nie są przesyłane (czystsze dane). Niektóre systemy przesyłają puste wartości. Przetestuj swoją konkretną konfigurację.

Czy mogę używać warunków w przycisku „Wyślij”?

Generalnie, przycisk „Wyślij” powinien być zawsze widoczny. Jego ukrycie dezorientuje użytkowników. Zamiast tego, do kontroli przepływu używaj pól warunkowo wymaganych.

Czy logika warunkowa spowolni mój formularz?

Nowoczesne implementacje mają znikomy wpływ na wydajność. Tylko wyjątkowo złożona logika z wieloma polami może powodować niewielkie opóźnienia.

Czy mogę przeprowadzić test bez przesyłania?

Użyj trybu podglądu, aby przetestować widoczność. Do pełnego testowania, w tym przesyłania danych, użyj przesłanych danych testowych, które możesz usunąć.

Podsumowanie

Tworzenie formularzy dynamicznych z logiką warunkową:

1. Zaplanuj swoją logikę – Mapa wyzwalaczy, warunków i celów
2. Zbuduj formularz bazowy – Wszystkie pola, odpowiednio ułożone
3. Dodaj pola wyzwalające – Listy rozwijane, przyciski radiowe, pola wyboru
4. Ustaw warunki – Połącz wyzwalacze z polami docelowymi
5. Konfiguruj pokaż/ukryj – Zdefiniuj, co się pojawia, kiedy
6. Wymagania dotyczące obsługi – Wymagane tylko wtedy, gdy jest widoczne
7. Przetestuj dokładnie – Każda ścieżka, każde urządzenie

Wniosek

Dynamiczne formularze z logiką warunkową tworzą spersonalizowane doświadczenia, których nie oferują formularze statyczne. Użytkownicy widzą tylko trafne pytania, formularze wydają się krótsze, a Ty zbierasz lepsze dane. Zacznij od prostych warunków – odpowiedzi Tak/Nie i rozgałęzień kategorii – a następnie zwiększaj złożoność w razie potrzeby. Kluczem jest ukrycie logiki przed użytkownikami, a jednocześnie dostarczenie im dokładnie tych pól, które są odpowiednie dla ich sytuacji.

Kreator formularzy automatycznych Dodatek Conditional Logic ułatwia tworzenie dynamicznych formularzy. Konfiguruj reguły „pokaż/ukryj” za pomocą wizualnego interfejsu, używaj logiki AND/OR w przypadku złożonych warunków i twórz formularze, które dostosowują się do każdego użytkownika.

Gotowy na tworzenie formularzy dynamicznych? Pobierz Auto Form Builder i zacznij tworzyć formularze, które inteligentnie reagują na dane wprowadzane przez użytkownika.