Jak tworzyć formularze WordPress z polami rozwijanymi (łatwa metoda)

Odwiedzający zaczynają wypełniać formularz kontaktowy, a następnie nagle porzucają go w połowie. Jest to jedno z najbardziej frustrujących doświadczeń dla każdego właściciela witryny, zwłaszcza gdy wiesz, że te potencjalne kontakty mogłyby zmienić Twój biznes.

Prawda jest taka, że długie formularze odstraszają użytkowników i tworzą niepotrzebne tarcia w procesie konwersji.

Po latach pomagania właścicielom witryn WordPress w optymalizacji ich formularzy odkryliśmy, że używanie pól rozwijanych może poprawić wskaźniki ukończenia formularza.

Ponadto te proste elementy nie tylko oszczędzają cenne miejsce na ekranie, ale także kierują użytkowników do podania dokładnie tych informacji, które chcesz o nich poznać.

W tym samouczku pokażemy najprostszy sposób tworzenia formularzy WordPress z polami listy rozwijanej, które odwiedzający faktycznie chcą wypełnić.

Czym są pola rozwijane i dlaczego ich używać?

Pole rozwijane pozwala użytkownikom wybrać jedną opcję z ustalonej listy różnych wariantów. Użytkownicy mogą po prostu kliknąć pole, aby zobaczyć wszystkie rozwijane opcje.

Jako właściciel witryny możesz używać pól rozwijanych do tworzenia formularzy internetowych, takich jak formularze kontaktowe, formularze rejestracji na wydarzenia, formularze zapisu na newsletter e-mailowy lub formularze zamówień produktów.

Pola rozwijane mogą poprawić skuteczność Twojego formularza. Oto kilka zalet:

• Spójność. Ustalona lista opcji zapewnia spójność zebranych danych i zapobiega wprowadzaniu nieprawidłowych danych. To sprawia, że analiza danych jest dokładniejsza.
• Pola dynamiczne. Pola listy rozwijanej ułatwiają ustawianie logiki warunkowej. Ustawiona lista opcji pozwala na wyświetlanie dodatkowych pól w zależności od wyboru użytkownika, bez zbędnych przeszkód.
• Zmniejszona długość formularza. Połączenie wielu opcji w kompaktowe menu rozwijane sprawia, że formularz wygląda mniej onieśmielająco. Może to skutkować lepszym doświadczeniem użytkownika.

Mając to na uwadze, przyjrzyjmy się, jak tworzyć formularze z polami listy rozwijanej w WordPress. Oto szybki przegląd kroków, które omówimy w tym samouczku:

• Krok 1: Instalacja najlepszego wtyczki formularza kontaktowego
• Krok 2: Tworzenie nowego formularza za pomocą WPForms
• Krok 3: Dodawanie pola wyboru (dropdown) do Twojego formularza
• Krok 4: Konfiguracja pól rozwijanych z opcjami i logiką warunkową
• Krok 5: Personalizacja powiadomień i potwierdzeń formularza
• Krok 6: Osadzanie formularza w WordPress
• Krok 7: Publikowanie nowego formularza na Twojej stronie WordPress
• Dodatkowa wskazówka: Kreatywne sposoby wykorzystania pól rozwijanych
• FAQ: Używanie pól listy rozwijanej w formularzach WordPress
• Dodatkowe zasoby: Opanuj swoje formularze WordPress

Zacznijmy!

Krok 1: Instalacja wtyczki Najlepszy formularz kontaktowy

WPForms to najlepsza wtyczka formularzy kontaktowych dla WordPressa. Posiada narzędzia AI i ponad 2000 szablonów, które pomagają tworzyć formularze za pomocą kilku kliknięć.

W WPBeginner używamy WPForms do tworzenia naszych formularzy kontaktowych, corocznych ankiet użytkowników i próśb o migrację i nie moglibyśmy być bardziej zadowoleni!

Zapoznaj się ze wszystkimi jego funkcjami w naszej kompletnej recenzji WPForms.

Zatem zainstalujmy i aktywujmy wtyczkę WPForms. Możesz przejść do Wtyczki » Dodaj nową wtyczkę z panelu administratora WordPress.

Na następnym ekranie możesz użyć przycisku wyszukiwania, aby znaleźć wtyczkę WPForms. Po znalezieniu możesz kliknąć „Zainstaluj wtyczkę”, a następnie „Aktywuj”.

Szczegółowe instrukcje znajdziesz w naszym przewodniku jak zainstalować wtyczkę WordPress.

Krok 2: Tworzenie nowego formularza za pomocą WPForms

Po aktywacji w obszarze administracyjnym WordPress powinieneś zobaczyć menu WPForms, podobne do tego:

Teraz będziesz mógł uzyskać dostęp do interfejsu konstruktora WPForms i tworzyć formularze z polami listy rozwijanej.

Aby rozpocząć tworzenie nowego formularza, przejdź do WPForms » Dodaj nowy.

Teraz zobaczysz panel „Ustawienia” w kreatorze formularzy WPForms. W tym panelu pierwszą rzeczą, którą musisz zrobić, jest nazwanie swojego formularza.

Na przykład, możesz wpisać „Prosty formularz kontaktowy” lub po prostu „Formularz kontaktowy” w polu „Nazwij swój formularz”.

Gdy to zrobisz, nadszedł czas, aby wybrać sposób budowania formularza WordPress.

Z WPForms możesz tworzyć od podstaw, wybierać gotowy szablon lub korzystać z kreatora formularzy opartego na sztucznej inteligencji.

Jeśli chcesz skorzystać z kreatora formularzy AI, wystarczy wprowadzić proste polecenie. AI wygeneruje formularz w ciągu kilku sekund.

W tym przewodniku użyjemy jednak ‘Prostego formularza kontaktowego’.

Aby użyć szablonu formularza, wystarczy najechać na ten, który chcesz, i kliknąć „Użyj szablonu”.

Instrukcje krok po kroku znajdziesz w naszym szczegółowym przewodniku jak utworzyć formularz kontaktowy w WordPress.

Krok 3: Dodawanie pola wyboru (dropdown) do Twojego formularza

Po zakończeniu procesu konfiguracji zostaniesz przekierowany do kreatora formularzy, gdzie po lewej stronie znajduje się lista pól, a po prawej podgląd na żywo.

Teraz chcemy dodać pole rozwijane do naszego formularza kontaktowego.

Po prostu przeciągnij „Dropdown” i upuść go po prawej stronie formularza.

Po prawej stronie panelu zobaczysz pole rozwijane w swoim formularzu kontaktowym. Możesz najechać kursorem na pole, aby uzyskać dostęp do jego ustawień, które obejmują:

• Kopiuj
• Przycisk usuwania
• Instrukcja „Kliknij, aby edytować”
• Instrukcja „Przeciągnij, aby zmienić kolejność”

Używając funkcji przeciągnij i upuść, przenieśmy pole listy rozwijanej nad pole ‘Komentarz lub wiadomość’.

Umieszczenie pola akapitu „Komentarz lub wiadomość” bezpośrednio przed przyciskiem wysyłania zapewnia lepszy przepływ procesu wypełniania formularza. Sprawia również, że pole wyboru jest bardziej widoczne, dzięki czemu użytkownicy go nie przeoczą.

Krok 4: Konfiguracja pól rozwijanych z opcjami i logiką warunkową

W tym kroku ustawisz etykietę, opcje i opis pola wyboru. Twoja lista opcji powinna być zgodna z typem formularza. Ponieważ tworzymy formularz kontaktowy, zaproponujmy opcję subskrypcji newslettera.

Kliknij na swoje pole wyboru (dropdown), a następnie przejdź do „Opcje pola”.

W zakładce „Ogólne” uzupełnij niezbędne dane:

• Etykieta. W polach rozwijanych etykiety są zazwyczaj pytaniami. Jako przykład użyjemy „Czy chcesz zapisać się na nasz newsletter?”.
• Opcje. Dodajmy „Tak, proszę.” i „Nie, dziękuję.”
• Opis. W tym polu możesz pozostawić tekst „Możesz zrezygnować w dowolnym momencie”.
• Wymagane. Przełącz tę opcję, aby wymagać od odwiedzających wypełnienia tego pola.

Następnie skonfigurujmy logikę warunkową.

Logika warunkowa oznacza podejmowanie decyzji za pomocą instrukcji „jeśli” i „wtedy”. Używana w formularzach decyduje, co stanie się dalej, w zależności od odpowiedzi udzielonej przez użytkownika.

Ustawienie logiki warunkowej ułatwia wypełnianie formularzy. Pokazując tylko odpowiednie opcje na podstawie poprzednich wyborów, formularz nie przytłacza użytkowników niepotrzebnymi wyborami.

W tym przykładzie wyświetlimy dodatkowe pole, jeśli użytkownicy wybiorą opcję „Tak, proszę”. Pozwalamy subskrybentom wybrać, jak często chcieliby otrzymywać promocyjne wiadomości e-mail.

Wcześniej będziesz musiał przygotować nowe pole. Wróć do zakładki „Dodaj pola” i kliknij „Pole rozwijane” lub dowolny inny typ pola. Następnie uzupełnij szczegóły nowego pola.

Oto przykład:

Teraz, gdy nowe pole jest gotowe, kliknij je i przejdź do zakładki „Inteligentna logika”.

Stąd możesz aktywować logikę warunkową, przełączając opcję „Włącz logikę warunkową”.

Po aktywacji możesz skonfigurować logikę warunkową dla nowego pola.

Zacznij od wybrania opcji „Pokaż” lub „Ukryj” nowe pole. Następnie wybierz istniejące pole i dane wejściowe użytkownika.

Oto nasza konfiguracja jako odniesienie: „Pokaż” to pole, jeśli „Czy chcesz zapisać się na nasz newsletter” brzmi „Tak, proszę”.

Krok 5: Personalizacja powiadomień i potwierdzeń formularza

Czas spersonalizować swój nowy formularz.

Możesz zacząć od skonfigurowania powiadomień e-mail za każdym razem, gdy nowy użytkownik prześle formularz. Przejdź do Ustawienia » Powiadomienia i włącz opcję „Włącz powiadomienia”.

Następnie przejdź do domyślnych szczegółów powiadomień swojego formularza poniżej przełącznika.

Niektóre wpisy w polu „Domyślne powiadomienie” mają „Inteligentny tag”. Ten tag zakłada, gdzie wysłać powiadomienia o przesłaniu formularza, między innymi. Mimo to, możesz dostosować ustawienia do swoich potrzeb.

Na przykład pole „Adres e-mail do wysłania” ma „Inteligentny tag” {admin_email}. Domyślnie będzie to adres e-mail administratora Twojej witryny WordPress. Wszelkie powiadomienia o przesłaniu formularza trafią więc do skrzynki odbiorczej administratora.

Możesz dodać więcej odbiorców, takich jak specjalista ds. marketingu e-mailowego. Pamiętaj tylko, aby oddzielić każdy adres e-mail przecinkiem.

Jeśli chcesz dowiedzieć się, jak wysłać e-mail z formularza do wielu osób lub różnych działów, przeczytaj nasz poradnik na temat tworzenia formularza kontaktowego z wieloma odbiorcami.

Następnie domyślny tekst dla linii tematu wiadomości e-mail to „Nowe zgłoszenie: Nazwa Twojego formularza”. Możesz jednak zmienić linię tematu według własnych upodobań, o ile jest łatwa do zidentyfikowania.

Użytkownicy, którzy prześlą formularz, powinni otrzymywać powiadomienia na swoje e-maile. Pole „Nazwa nadawcy” informuje użytkowników, kto wysyła powiadomienie e-mailem.

Następnym polem jest „E-mail od”, a „Inteligentnym tagiem” dla tego pola jest {admin_email}.

Dzięki temu domyślnemu ustawieniu użytkownicy będą otrzymywać powiadomienia e-mailem z adresu administratora Twojej witryny.

Podświetlony fragment informuje, że adres e-mail administratora Twojej witryny znajduje się w innej domenie, na przykład @gmail.com. Może to prowadzić do problemów z dostarczalnością, takich jak trafianie wiadomości e-mail do skrzynki „Spam”.

Możesz przeczytać nasz przewodnik po konfiguracji WP Mail SMTP, aby upewnić się, że Twoje e-maile trafiają do skrzynek odbiorczych czytelników.

Dla każdego wysłanego e-maila z powiadomieniem odbiorca ma również możliwość odpowiedzi na niego.

W polu „Odpowiedz do” możesz ustawić, na jaki adres e-mail będą przychodzić odpowiedzi użytkowników. „Inteligentny tag” tego pola to {field_id= „1”}. Oznacza to, że odpowiedzi użytkowników trafią na ten sam adres e-mail, co adres w polu „E-mail nadawcy”.

Na koniec pole „Wiadomość e-mail” ma „Inteligentny tag” {all_fields}. Twoja wiadomość e-mail będzie zatem zawierać pola formularza wraz z odpowiedziami użytkownika.

Po zakończeniu dostosowywania powiadomień przejdź do sekcji „Potwierdzenia”. W tej sekcji skonfigurujesz, w jaki sposób wyświetlane będzie potwierdzenie po przesłaniu formularza.

Najpierw możesz wybrać „Wiadomości”, „Pokaż stronę” lub „Przejdź do adresu URL (Przekierowanie)” jako typ potwierdzenia.

Jeśli wybierzesz „Wiadomość” jako typ potwierdzenia, wyświetlisz komunikat potwierdzający, informujący użytkowników, że otrzymano ich zgłoszenia formularza.

Dzięki temu typowi potwierdzenia możesz edytować domyślną wiadomość, aby dopasować ją do swojej marki. Przejdź do pola „Wiadomość potwierdzająca” i wpisz swoją niestandardową wiadomość w polu tekstowym.

Jeśli wybierzesz opcję „Pokaż stronę”, będziesz musiał wybrać istniejącą stronę w swojej witrynie WordPress. A jeśli wybierzesz opcję „Przejdź do adresu URL (Przekierowanie)”, wprowadzisz adres URL strony.

Zanim przejdziesz do następnego kroku, kliknij „Zapisz”, aby nie stracić postępów.

Po wykonaniu tej czynności jesteś gotowy do wyświetlenia nowego formularza na swojej stronie WordPress.

Krok 6: Osadzanie formularza w WordPress

Aby wyświetlić swój nowy formularz na swojej stronie WordPress, możesz użyć kreatora „Osadź” w kreatorze formularzy WPForms.

Spowoduje to wyświetlenie okna podręcznego „Osadź na stronie”. Możesz wybrać „Wybierz istniejącą stronę” lub „Utwórz nową stronę”, w zależności od potrzeb.

W tym przykładzie wybierzmy opcję „Wybierz istniejącą stronę”.

Następnym krokiem jest wybór strony, na której chcesz wyświetlić swój nowy formularz.

Po prostu kliknij listę rozwijaną i wybierz istniejącą stronę internetową. Gdy to zrobisz, kliknij „Zaczynajmy!”.

Przekieruje Cię to do edytora bloków WordPress.

Stąd musisz kliknąć przycisk „+”, aby dodać blok WPForms.

Możesz wpisać „WPForms” w pasku wyszukiwania, a powinieneś zobaczyć blok WPForms w wynikach wyszukiwania.

Kliknij, aby je dodać.

Po dodaniu bloku WPForms zobaczysz menu rozwijane na swojej stronie.

Po prostu kliknij na listę rozwijaną i wybierz formularz z listy. Wybierzmy ‘Formularz kontaktowy’, ponieważ to jest formularz, który właśnie utworzyliśmy.

Krok 7: Publikowanie nowego formularza na Twojej stronie WordPress

Na tym ostatnim etapie podglądniemy formularz przed publikacją, aby upewnić się, że wszystko wygląda idealnie. W edytorze treści WordPress kliknij Widok » Podgląd w nowej karcie.

Jeśli chcesz, możesz również zobaczyć, jak formularz wygląda na tabletach i urządzeniach mobilnych. Wystarczy kliknąć Wyświetl » Tablet lub Mobilny » Podgląd w nowej karcie.

Na koniec, jeśli nie są potrzebne żadne dalsze dostosowania, możesz przejść dalej i kliknąć „Zaktualizuj”.

Gratulacje! Pomyślnie dodałeś nowy formularz kontaktowy z polami rozwijanymi na swojej stronie WordPress.

Oto jak to wyglądało na naszej stronie demonstracyjnej:

Dodatkowa wskazówka: Kreatywne sposoby wykorzystania pól listy rozwijanej

Czy wiesz, co jest niesamowite w polach rozwijanych? Są znacznie bardziej wszechstronne, niż większość ludzi myśli!

Po latach tworzenia stron internetowych odkryliśmy kilka naprawdę sprytnych sposobów wykorzystania pól rozwijanych, które wykraczają poza zwykłe formularze kontaktowe. Oto kilka naszych ulubionych kreatywnych zastosowań, które mogą Cię zainspirować:

🛍️ Konfiguratory produktów – Pozwala użytkownikom dostosowywać produkty, na przykład „Wybierz kolor”, „Wybierz rozmiar” lub „Wybierz wykończenie”. Jest to idealne rozwiązanie dla stron produktów WooCommerce lub niestandardowych formularzy zamówień.

📅 Rezerwacja wizyt – Małe firmy lub strony internetowe z usługami mogą skorzystać z kaskadowych list rozwijanych dla terminów i godzin. Jest to szczególnie przydatne w przypadku systemów rezerwacji lub próśb o konsultacje.

🗺️ Usługi oparte na lokalizacji – możesz dodawać listy rozwijane do wyboru kraju, stanu i miasta podczas wbudowywania map w formularze. Może to być bardzo przydatne w przypadku usług dostawczych lub lokalnych katalogów firm.

✏️ Formularze quizowe – Pola rozwijane są również idealne do pytań wielokrotnego wyboru. Jeśli prowadzisz kurs online, możesz użyć tych pól, aby wszystko było schludne i uporządkowane!

Przede wszystkim zawsze możesz dostosować i stylizować swoje formularze WordPress, aby pasowały do projektu Twojej witryny.

FAQ: Używanie pól listy rozwijanej w formularzach WordPress

Oto odpowiedzi na niektóre z najczęściej zadawanych pytań dotyczących używania pól rozwijanych w WordPressie.

Jaki jest najlepszy plugin do tworzenia formularzy z polami wyboru (dropdown)?

Polecamy WPForms jako najlepszą opcję. Jego narzędzia AI przyspieszają proces, kreator typu „przeciągnij i upuść” jest niezwykle łatwy w użyciu, a pole listy rozwijanej jest zawarte nawet w darmowej wersji WPForms Lite.

W przypadku zaawansowanych funkcji, takich jak logika warunkowa, wersja WPForms Pro jest świetnym ulepszeniem.

Czy mogę za darmo dodawać pola wyboru do moich formularzy?

Tak! Darmowa wtyczka WPForms Lite zawiera standardowe pole listy rozwijanej, pozwalając na tworzenie zorganizowanych i przyjaznych dla użytkownika formularzy bez wydawania ani grosza.

Czy pola wyboru (dropdown) są przyjazne dla urządzeń mobilnych?

Zdecydowanie. Kiedy używasz dobrego wtyczki, takiej jak WPForms, wszystkie pola formularza są w pełni responsywne. Oznacza to, że listy rozwijane automatycznie dostosowują się, aby wyglądać świetnie i działać płynnie na komputerach stacjonarnych, tabletach i smartfonach.

Czy mogę używać obrazów jako opcji w polach formularza?

WPForms Pro zawiera funkcję „Wybory obrazkowe” dla przycisków radiowych i pól wyboru. Chociaż nie jest to dostępne dla pól rozwijanych, pozwala użytkownikom wybierać spośród opcji wizualnych, co jest idealne do wyboru produktów i podobnych formularzy.

Dodatkowe zasoby: Opanuj swoje formularze WordPress

Mamy nadzieję, że ten przewodnik pomógł Ci dowiedzieć się, jak tworzyć formularze WordPress z polami rozwijanymi. Jeśli uznałeś go za pomocny, oto kilka wybranych przewodników, które pomogą Ci w pełni je wykorzystać:

• Jak dostosować i stylizować formularze WordPress
• Jak używać formularza kontaktowego do rozbudowy listy e-mailowej
• Jak zablokować spam z formularza kontaktowego w WordPress 
• Jak śledzić i zmniejszać liczbę porzuconych formularzy w WordPress
• Ostateczny przewodnik po korzystaniu z formularzy WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.