Potrzebny jest formularz kontaktowy, który dostosowuje się do wyboru użytkownika: dla działu wsparcia technicznego pokazuje jedne pola, dla działu sprzedaży, zupełnie inne. Standardowy Contact Form 7 nie ma takiej funkcji. Bez logiki warunkowej na stronie wisi „kobyła" ze wszystkich pól naraz, z których połowa jest odwiedzającemu niepotrzebna. Wygląda to niechlujnie i dezorientuje.

Wtyczka Conditional Fields** for Contact Form 7** rozwiązuje ten problem: pola pojawiają się i znikają w zależności od tego, co wybrał użytkownik. Poniżej przedstawiam krok po kroku budowę rzeczywistego formularza wsparcia: od instalacji wtyczki po spersonalizowane odpowiedzi e-mail. To samo podejście można skalować na kalkulatory, ankiety i wieloetapowe wnioski.

💡 Szybki przegląd:

• Instalujemy CF7 i Conditional Fields, tworzymy podstawowy formularz z typem zgłoszenia
• Opakowujemy grupy pól w [group]…[/group], konfigurujemy warunki wyświetlania w zakładce „Conditional fields"
• Składamy finalny formularz z zagnieżdżonymi grupami, dynamicznymi etykietami i niestandardową gałęzią „Inne"
• Konfigurujemy spersonalizowany e-mail: inny tekst i inny zestaw pól dla wsparcia technicznego i sprzedaży

Co dają pola warunkowe

Contact Form 7, najpopularniejszy kreator formularzy dla WordPress: ponad 10 milionów aktywnych instalacji, minimalny narzut. Jednak od razu po instalacji jest statyczny: wszystkie pola są widoczne przez cały czas. Jeśli formularz ma trzy gałęzie logiczne (wsparcie techniczne, sprzedaż, partnerstwo), odwiedzający widzi dziewięć zbędnych pól, które nie dotyczą jego zapytania.

Conditional Fields for Contact Form 7 dodaje logikę „jeśli-to" bezpośrednio w edytorze formularzy. Wtyczka jest bezpłatna, ma ocenę 4,8 na WordPress.org i ponad 100 000 aktywnych instalacji. Jej autor, Jules Colle, rozwija również wersję Pro z polami powtarzalnymi, formularzami wieloetapowymi i wartościami obliczanymi.

Ważne: wtyczka nie usuwa ukrytych pól ze znaczników, a jedynie ukrywa je za pomocą JavaScript. Dlatego wszystkie pola wewnątrz ukrytych grup i tak są wysyłane na serwer. Nazwy pól (field names) muszą być unikalne nawet w różnych grupach, w przeciwnym razie wartości zostaną nadpisane. To zasada numer jeden i w praktyce to o nią potykają się użytkownicy najczęściej.

Instalacja i początkowy formularz

Zainstaluj obie wtyczki przez Wtyczki → Dodaj nową:

• Contact Form 7, sam kreator formularzy
• Conditional Fields for Contact Form 7, silnik logiki warunkowej

Po aktywacji przejdź do Kontakt → Dodaj nowy i wklej szablon formularza. Na razie bez grup warunkowych, po prostu wszystkie pola razem:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
8
 
9
In case you selected Technical support:
10
Please specify your OS version: [text version]
11
 
12
In case you selected Sales:
13
Where is your business located? [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
14
 
15
[textarea comments]
16
 
17
[submit "Send"]

Tak wygląda formularz bez logiki: wybór systemu operacyjnego i pola wsparcia technicznego są widoczne zawsze, nawet jeśli odwiedzający wybrał „Sprzedaż". Opcji „Inny system" nie ma w ogóle, a etykieta pola wersji nie zmienia się w zależności od wybranego systemu. Naprawiamy to za pomocą grup.

Tworzenie grup pól

Grupa to para znaczników [group имя-группы] ... [/group]. Wszystko, co znajduje się między nimi, jest domyślnie ukryte i pokazuje się tylko po spełnieniu warunku. Grupy można zagnieżdżać jedna w drugiej, co przyda się przy logice kaskadowej.

W edytorze formularza kliknij przycisk Conditional group nad polem tekstowym, który dodaje znaczniki automatycznie.

W oknie, które się pojawi, podaj nazwę grupy i opcje:

• Clear on hide, czyści wszystkie pola wewnątrz grupy, gdy jest ona ukrywana. Przydatne, aby do e-maila nie trafiały wartości z niewidocznych pól.
• Inline, wyświetla grupę jako element liniowy. Przydaje się, gdy trzeba osadzić fragment tekstu bezpośrednio w zdaniu (później pokażę jak).

Utwórz pierwszą grupę technical-support-selected i przenieś do niej pola systemu operacyjnego i wersji:

1
[group technical-support-selected]
2
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
3
  [group os-selected]
4
    Please specify your OS version: [text version]
5
  [/group]
6
[/group]

Tutaj mamy już dwie grupy, jedna wewnątrz drugiej. Zewnętrzna (technical-support-selected), sam fakt wsparcia technicznego. Wewnętrzna (os-selected), doprecyzowanie wersji systemu operacyjnego, która pojawi się TYLKO wtedy, gdy użytkownik wybrał konkretny system operacyjny. Bez warunku obie grupy są na razie niewidoczne.

To samo dla działu sprzedaży:

1
[group sales-support-selected]
2
  Where is your business located?
3
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
4
[/group]

Proszę zapisać formularz, a grupy znikną z frontendu. To normalne: nie ma jeszcze warunków.

Ustawienia logiki warunkowej

Po zapisaniu formularza proszę przejść do zakładki Conditional fields. Są tu dwa tryby: wizualny (listy rozwijane) i tekstowy (pisze Pan/Pani reguły ręcznie). Tekstowy jest szybszy w przypadku złożonych formularzy, więc z niego skorzystamy.

Proszę kliknąć Add new conditional rule i wpisać pierwszą regułę:

1
show [technical-support-selected] if [support-type] equals "Technical support"

Składnia jest prosta: show <группа> if <поле> equals "<значение>". Po zapisaniu reguły grupa technical-support-selected stanie się widoczna, gdy tylko użytkownik wybierze „Technical support" z listy rozwijanej.

Proszę dodać regułę dla sprzedaży:

1
show [sales-support-selected] if [support-type] equals "Sales"

Teraz formularz przełącza się między dwiema ścieżkami, ale wewnątrz wsparcia technicznego pole wersji wciąż jest pokazywane zawsze. Potrzebujemy, aby pojawiało się ono dopiero po wyborze konkretnego systemu operacyjnego:

1
show [os-selected] if [operating-system] not equals ""

Sprawdzenie not equals "" działa, ponieważ używamy first_as_label, a wartość -- Choose your operating system -- nie jest uznawana za wybraną. Pole operating-system jest puste, dopóki odwiedzający faktycznie nie kliknie jakiejś opcji.

Idziemy dalej: do listy rozwijanej systemów operacyjnych warto dodać pozycję „Other". Jeśli użytkownik wybierze „Inny", nie wiemy, co to za system, więc udostępnimy dwa pola tekstowe: nazwę systemu i wersję. Potrzebna jest nowa grupa os-other-selected i reguła z operatorem AND:

1
show [os-selected] if [operating-system] not equals ""
2
               and if [operating-system] not equals "Other"
3
show [os-other-selected] if [operating-system] equals "Other"

Dwie reguły dla jednej grupy: pierwsza, pokazująca os-selected dla każdego systemu operacyjnego oprócz „Other", druga, pokazująca os-other-selected tylko dla „Other". Logika wzajemnie się wyklucza, nie będzie konfliktów.

Finalny formularz: dynamiczne etykiety i ścieżka „Inne"

Teraz zbierzemy wszystko razem. Dodamy grupy inline, które zmieniają etykietę pola wersji w zależności od wybranego systemu operacyjnego: Android, iOS, Linux lub Windows. Tekst etykiety jest „wszyty" bezpośrednio w grupę i pojawia się tylko przy spełnieniu warunku:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
[group technical-support-selected]
8
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"]
9
 
10
  [group os-selected]
11
    Please specify your [group os-android inline]Android[/group][group os-ios inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:
12
    [text version]
13
  [/group]
14
 
15
  [group os-other-selected]
16
    Please specify your OS and version.
17
    [text other-os "Operating System"][text other-version "Version"]
18
  [/group]
19
[/group]
20
 
21
[group sales-support-selected]
22
  Where is your business located?
23
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
24
[/group]
25
 
26
[textarea comments]
27
 
28
[submit "Send"]

Kluczowy moment: grupy inline z nazwami systemów operacyjnych ([group os-android inline]Android[/group]). Atrybut inline sprawia, że grupa staje się elementem liniowym, a tekst etykiety nie jest dzielony na akapity. Warunki dla tych grup w zakładce Conditional fields:

1
show [technical-support-selected] if [support-type] equals "Technical support"
2
show [sales-support-selected] if [support-type] equals "Sales"
3
show [os-selected] if [operating-system] not equals ""
4
               and if [operating-system] not equals "Other"
5
show [os-android] if [operating-system] equals "Android"
6
show [os-ios] if [operating-system] equals "iOS"
7
show [os-linux] if [operating-system] equals "Linux"
8
show [os-windows] if [operating-system] equals "Windows"
9
show [os-other-selected] if [operating-system] equals "Other"

Proszę kliknąć Save conditions, a następnie zapisać formularz. Proszę skopiować shortcode [contact-form-7 id="..." title="..."] na stronę i sprawdzić na frontendzie. Przełączanie między ścieżkami powinno działać natychmiastowo, bez przeładowania strony.

Personalizacja odpowiedzi e-mail

Grupy warunkowe działają nie tylko w formularzu, ale także w szablonie wiadomości e-mail. Oznacza to, że użytkownik może otrzymać inną wiadomość w zależności od tego, co wybrał.

Proszę otworzyć zakładkę Mail w edytorze formularza. W polu Message body proszę objąć tekst tymi samymi grupami, których użyto w formularzu:

1
[technical-support-selected]
2
Thank you for submitting your technical support question
3
[/technical-support-selected][sales-support-selected]
4
Thank you for your sales question
5
[/sales-support-selected]

Znacznik zamykający [/technical-support-selected] i otwierający [sales-support-selected] występują bezpośrednio po sobie, bez spacji, w przeciwnym razie w wiadomości pojawi się niepotrzebne wcięcie.

Teraz dodamy tabelę z wypełnionymi polami. Wewnątrz każdej grupy wymienimy TYLKO odpowiednie pola:

1
<table>
2
<tr><td>your-name</td><td>[your-name]</td></tr>
3
<tr><td>your-email</td><td>[your-email]</td></tr>
4
<tr><td>support-type</td><td>[support-type]</td></tr>
5
[technical-support-selected]
6
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
7
  [os-selected]
8
    <tr><td>version</td><td>[version]</td></tr>
9
  [/os-selected]
10
  [os-other-selected]
11
    <tr><td>other-os</td><td>[other-os]</td></tr>
12
    <tr><td>other-version</td><td>[other-version]</td></tr>
13
  [/os-other-selected]
14
[/technical-support-selected]
15
[sales-support-selected]
16
  <tr><td>continent</td><td>[continent]</td></tr>
17
[/sales-support-selected]
18
<tr><td>comments</td><td>[comments]</td></tr>
19
</table>

Kiedy formularz zostanie wysłany, wtyczka wytnie z wiadomości wszystko, co dotyczy ukrytych grup. Dział wsparcia technicznego otrzyma wiersze z systemem operacyjnym i wersją, dział sprzedaży tylko kontynent. Czysto i bez zamieszania.

Jeśli trzeba zbierać wiadomości ręcznie i poprawiać znaczniki, autor wtyczki przygotował konwerter online kodu CF7 na treść wiadomości. Wklejają Państwo kod formularza, otrzymują Państwo szablon tabeli do e-maila.

⁉️🤔 Często zadawane pytania

Dlaczego widoczne są wszystkie grupy, a warunki nie działają?

Po pierwsze, proszę sprawdzić konsolę przeglądarki (F12) pod kątem błędów JavaScript. Conditional Fields ładuje swój skrypt jako ostatni i każdy wcześniejszy błąd JS psuje całą logikę. Po drugie, motyw musi wywoływać wp_footer() w pliku footer.php. Bez tego haka skrypt nie zostanie podłączony. Najczęściej winny jest konflikt wtyczek: proszę wyłączyć wszystko oprócz CF7 i Conditional Fields, a następnie sprawdzić formularz. Jeśli zadziała, proszę włączać wtyczki pojedynczo, aż znajdą Państwo winowajcę.

Pola w wiadomości e-mail przychodzą z nieprawidłowymi lub pustymi wartościami.

Nazwy wszystkich pól w formularzu muszą być unikalne, nawet jeśli pola znajdują się w różnych grupach i nigdy nie są widoczne jednocześnie. Wtyczka NIE usuwa ukrytych pól podczas wysyłania, a jedynie ukrywa je wizualnie. Dwa pola o nazwie a w różnych grupach to dwie wartości dla jednego klucza i jedna z nich zwycięży. Proszę upewnić się, że każde pole ma własną nazwę.

Jak stworzyć formularz z krokami i powtarzalnymi polami?

Darmowa wersja tego nie obsługuje, potrzebny jest Conditional Fields Pro. Dodaje on multistep (podział na kroki z przyciskami „Dalej"), powtarzalne bloki pól (repeater) oraz wartości obliczane (calculated fields). Cena na stronie dewelopera zależy od liczby witryn. Jeśli formularz jest prosty i bez powtarzalnych pól, darmowa wersja wystarcza z dużym zapasem.

Co zrobić, jeśli wtyczka koliduje z motywem?

Proszę włączyć standardowy motyw WordPress (Twenty Twenty-Five) i sprawdzić na nim formularz. Jeśli działa, problem leży w motywie. Zazwyczaj pomaga ręczne wywołanie wp_footer() lub przeniesienie formularza na inną stronę, gdzie nie ma ciężkich skryptów motywu. Jeśli motyw jest niestandardowy, proszę poprosić dewelopera o upewnienie się, że hak wp_footer() jest wywoływany na wszystkich stronach z formularzami.

Czy można używać pól warunkowych do kalkulatora kosztów?

Tak i jest to jeden z najczęstszych scenariuszy. Zestaw list rozwijanych (typ usługi, zakres, pilność) z grupami warunkowymi dla każdego wariantu. Wersja Pro dodaje pełnoprawne pola obliczane, jeśli trzeba mnożyć i sumować wartości bezpośrednio w formularzu, proszę zwrócić na nią uwagę.

Co robić dalej: od prototypu do produkcyjnego formularza

Zbudowaliśmy formularz wsparcia z dwiema gałęziami logiki, zagnieżdżonymi grupami i spersonalizowanym e-mailem. To samo podejście sprawdza się w każdym scenariuszu warunkowym: ankiety z rozgałęzieniami, kalkulatory, rejestracje z różnymi rolami.

Na co zwrócić uwagę przed wdrożeniem:

• Proszę sprawdzić unikalność nazw WSZYSTKICH pól, powtórzmy, to zasada numer jeden.
• Proszę przetestować formularz na urządzeniu mobilnym: długie listy opcji i zagnieżdżone grupy mogą spowalniać działanie na słabszych urządzeniach.
• Proszę skonfigurować ochronę przed spamem, Contact Form 7 współpracuje z reCAPTCHA v3, Akismet i Turnstile.

Jeśli logika formularza wykracza poza „pokaż/ukryj" i potrzebne są powtarzalne pola, obliczenia lub wiele kroków, proszę przyjrzeć się Conditional Fields Pro. Do większości zadań darmowa wersja jest jednak wystarczająca: jest stabilna, aktualizowana co kilka tygodni i działa z Contact Form 7 w wersji 6.1.6 oraz WordPress 7.0.

Proszę obejrzeć demonstrację wideo całego procesu, od instalacji po gotowy formularz, utrwali to każdy krok na żywym przykładzie: