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 powodują, że odwiedzający opuszczają stronę bez ukończenia formularza.

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ść zbieranych danych i zapobiega nieprawidłowym wpisom. Zwiększa to dokładność analizy danych.
• 🎢 Pola dynamiczne. Pola rozwijane ułatwiają ustawienie logiki warunkowej. Ustalona 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 odstraszająco. Może to prowadzić do lepszego doświadczenia użytkownika.

Teraz przyjrzyjmy się, jak tworzyć formularze z polami rozwijanymi w WordPress. Oto szybki przegląd kroków, które omówimy w tym samouczku:

Zacznijmy!

Krok 1: Instalacja wtyczki WPForms

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.

Zainstalujmy i aktywujmy zatem wtyczkę WPForms.

Możesz przejść do Wtyczki » Dodaj wtyczkę z panelu administracyjnego WordPress.

Na następnym ekranie możesz użyć paska 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 „Konfiguracja” w kreatorze formularzy WPForms.

W tym panelu pierwszą rzeczą, którą musisz zrobić, to nazwać swój formularz.

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

Gdy to zrobisz, czas wybrać, w jaki sposób zbudujesz swój formularz 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 „Rozwijane” i upuść je po prawej stronie formularza (Wskazówka Pro: jeśli masz tylko 2-3 opcje, rozważ zamiast tego użycie przycisków radiowych dla lepszego doświadczenia użytkownika).

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ą:

Po prawej stronie panelu zobaczysz pole rozwijane w swoim formularzu kontaktowym. Klikając na pole, możesz uzyskać dostęp do jego ustawień. Możesz również najechać na nie kursorem, aby zobaczyć opcje takie jak:

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

Oto jak może to wyglądać na Twoim ekranie:

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

Umieszczając pole akapitu „Komentarz lub wiadomość” tuż przed przyciskiem wysyłania, oferujesz lepszy przepływ procesu wypełniania formularza. Sprawia to również, że Twoje pole rozwijane 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.

Po prostu kliknij pole rozwijane w panelu podglądu. Spowoduje to automatyczne otwarcie zakładki „Opcje pola” po lewej stronie.

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

• Etykieta. Dla list rozwijanych etykiety są zazwyczaj pytaniami, takimi jak „Czy chcesz subskrybować nasz biuletyn?”. Zalecamy również dodanie tekstu zastępczego, takiego jak „Wybierz opcję”, aby upewnić się, że użytkownicy wybiorą odpowiedź, zamiast przypadkowo zatwierdzić domyślny wybór.
• 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 pozwala na wyświetlanie lub ukrywanie pól w zależności od wcześniejszych odpowiedzi użytkownika. Dzięki temu formularze są krótkie i uporządkowane, ponieważ pola są wyświetlane tylko wtedy, gdy są istotne.

Konfiguracja logiki warunkowej ułatwia wypełnianie formularzy. Wyświetlając tylko istotne opcje na podstawie wcześniejszych 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.

Aby logika warunkowa działała, potrzebujemy najpierw pola, które pojawi się lub zniknie w zależności od wyboru użytkownika. Wróć do zakładki „Dodaj pola” i kliknij „Lista rozwijana” 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” dla nowego pola. Następnie wybierz istniejące pole i dane wprowadzone przez 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” zawierają „Inteligentny tag”, który automatycznie pobiera informacje z ustawień WordPress lub samych pól formularza. Niemniej jednak, możesz dostosować ustawienia do swoich potrzeb.

Na przykład, pole „Wysłano na adres e-mail” zawiera „Inteligentny tag” {admin_email}. Domyślnie będzie to adres e-mail administratora Twojej witryny WordPress. Zatem wszystkie powiadomienia o przesłaniu formularza trafią 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 wysyłać e-maile 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.

Jeśli widzisz tutaj komunikat ostrzegawczy, oznacza to, że Twój „E-mail nadawcy” nie pasuje do domeny Twojej witryny (na przykład używasz adresu @gmail.com zamiast @twojadomena.com).

Aby zapobiec trafianiu e-maili z powiadomieniami do folderu „Spam”, upewnij się, że „E-mail nadawcy” pasuje do domeny Twojej witryny.

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ć, dokąd trafi Twoja odpowiedź, jeśli odpowiesz na e-mail z powiadomieniem. Zazwyczaj powinieneś ustawić tutaj adres e-mail odwiedzającego.

Po prostu kliknij „Pokaż inteligentne tagi” i wybierz pole „E-mail” ze swojego formularza.

Teraz, gdy otrzymasz zgłoszenie i klikniesz „Odpowiedz” w swojej skrzynce odbiorczej, Twoja wiadomość trafi bezpośrednio do odwiedzającego, który wypełnił formularz.

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”. Powiadomienia to alerty e-mail wysyłane po przesłaniu formularza, podczas gdy potwierdzenia to komunikaty na ekranie, które użytkownicy widzą od razu.

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 kontaktowego na stronie

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 go 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 internetowej WordPress.

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

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

Pola rozwijane są niezwykle wszechstronne i mogą być używane do znacznie większej liczby zastosowań niż tylko proste formularze kontaktowe.

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.

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.