Zaufane samouczki WordPress, kiedy ich najbardziej potrzebujesz.
Przewodnik dla początkujących po WordPressie
WPB Cup
25 milionów+
Witryny korzystające z naszych wtyczek
16+
Lata doświadczenia z WordPressem
3000+
Samouczki WordPress od ekspertów

Jak dodać opcje obrazkowe do formularzy WordPressa (zwiększ zaangażowanie)

Dodanie wyborów obrazkowych do formularzy WordPress to świetny sposób na zwiększenie zaangażowania użytkowników i poprawę ogólnego doświadczenia.

Zamiast używać standardowych opcji tekstowych, wybory obrazkowe pozwalają użytkownikom na bardziej wizualną i angażującą interakcję z formularzami. Może to być szczególnie przydatne w przypadku ankiet, quizów, wyboru produktów i wszelkich formularzy, w których chcesz uczynić proces podejmowania decyzji bardziej intuicyjnym.

Na przestrzeni lat stworzyliśmy wiele formularzy w WordPress, co dało nam cenne spostrzeżenia na temat tego, co sprawia, że formularze są angażujące, a co powoduje, że użytkownicy je porzucają.

W tym artykule pokażemy Ci, jak łatwo dodać wybory obrazkowe w formularzach WordPress, aby zwiększyć zaangażowanie użytkowników.

Jak łatwo dodać wybory obrazkowe do formularza WordPress

Dlaczego warto używać wyborów obrazkowych w formularzach WordPress?

Wybory obrazkowe to zdjęcia, ilustracje, grafiki lub ikony, między którymi użytkownicy mogą wybierać podczas wypełniania formularza na Twojej stronie internetowej WordPress.

Oto przykład formularza używającego wyborów obrazkowych zamiast zwykłych opcji tekstowych. Pierwszy wybór, Truskawki, został zaznaczony:

Przykład użycia wyboru obrazków w formularzu: pokazuje kolorowe obrazy dla 6 opcji owoców

Wybory obrazkowe mogą sprawić, że Twoje formularze będą wyglądać bardziej dopracowane, profesjonalne i atrakcyjne wizualnie, co może pomóc użytkownikom w szybszym podejmowaniu decyzji.

Na przykład, jeśli prowadzisz stronę restauracji oferującą dostawę, będziesz chciał mieć na swojej stronie formularz zamówienia. Teraz możesz używać zdjęć swoich różnych dań, aby pomóc potencjalnym klientom wybrać to, czego chcą.

Poza tym wybór obrazów może ułatwić wypełnienie formularza osobom z trudnościami w czytaniu lub tym, którzy nie płynnie posługują się Twoim językiem, poprawiając doświadczenie użytkownika.

Mając to na uwadze, zobaczmy, jak łatwo dodawać wybory obrazów w formularzach WordPress.

Jak dodać wybory obrazów do formularzy WordPress

Możesz łatwo dodawać wybory obrazów do swoich formularzy WordPress za pomocą WPForms, aby zwiększyć zaangażowanie.

Jest to najlepsza wtyczka do tworzenia formularzy WordPress na rynku i pozwala łatwo tworzyć formularze za pomocą prostego kreatora formularzy metodą przeciągnij i upuść.

Używamy tej wtyczki na kilku naszych stronach internetowych i zawsze uzyskujemy doskonałe rezultaty, ponieważ jest ona bardzo przyjazna dla użytkownika i skalowalna. Aby dowiedzieć się więcej o naszym doświadczeniu, zapoznaj się z naszą recenzją WPForms.

Najpierw musisz zainstalować i aktywować wtyczkę WPForms. Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku dotyczącym instalacji wtyczki WordPress.

Uwaga: Możesz również użyć WPForms Lite, która jest całkowicie darmowa do dodawania opcji obrazkowych do Twojego formularza. Jednak będziemy używać wersji Pro, ponieważ ma ona więcej funkcji.

Po aktywacji wtyczki przejdź na stronę WPForms » Dodaj formularz w swoim panelu WordPress, aby utworzyć nowy formularz.

Spowoduje to przejście do strony „Wybierz szablon”, gdzie możesz zacząć od wpisania nazwy swojego formularza.

Następnie kliknij przycisk „Użyj szablonu” pod wybranym przez Ciebie gotowym szablonem. W tym samouczku użyjemy szablonu „Prosty formularz kontaktowy”.

Formularz kontaktowy WPForms

Spowoduje to uruchomienie interfejsu konstruktora formularzy WPForms, gdzie po prawej stronie ekranu zobaczysz podgląd formularza, a w lewym rogu kolumnę z polami formularza.

Możesz teraz edytować dowolne pole formularza, klikając na nie, przenosić je w górę i w dół lub usuwać.

Aby uzyskać bardziej szczegółowe instrukcje, możesz zapoznać się z naszym samouczkiem na temat tworzenia formularza kontaktowego w WordPress.

Domyślny formularz utworzony za pomocą szablonu formularza kontaktowego WPForms

Następnie musisz dodać pole Wielokrotny wybór z lewej kolumny do podglądu formularza, aby móc tworzyć opcje obrazkowe dla klientów.

Umieścimy to tuż nad polem „Komentarz lub wiadomość”.

Uwaga: Wybory obrazkowe działają również z polem Wybór wielokrotny. Użyj go, jeśli chcesz, aby użytkownik mógł wybrać więcej niż jedną opcję.

Dodawanie pola wyboru wielokrotnego do formularza

Następnie kliknij pole Wybór wielokrotny, aby je edytować. Spowoduje to otwarcie opcji pola po lewej stronie ekranu.

Zauważysz teraz, że to pole domyślnie pozwala na dodawanie opcji tekstowych.

Edycja pola wyboru wielokrotnego dla formularza

Możesz jednak łatwo to zmienić, przełączając przełącznik „Użyj wyborów obrazkowych”.

Po wykonaniu tej czynności pod każdym polem wyboru wielokrotnego pojawi się przycisk „Prześlij obraz”.

Przełącznik wyboru obrazków

Następnie możesz wpisać dowolny tekst dla etykiety pola, a następnie kliknąć przycisk „Prześlij obraz”.

Teraz możesz przesłać obraz z komputera lub wybrać go z biblioteki multimediów WordPress.

Przesyłanie obrazków dla różnych opcji w formularzu

Zalecamy używanie obrazów .jpg lub .png o rozmiarze nie większym niż 250px na 250px.

Pamiętaj, że Twoje obrazy będą najlepiej wyglądać w formularzu, jeśli wszystkie będą miały ten sam rozmiar.

Ważne: WPForms nie przeskaluje Twoich obrazów. Musisz upewnić się, że mają one pożądany rozmiar przed ich przesłaniem. Alternatywnie, możesz edytować swoje obrazy w samym WordPressie przed dodaniem ich do formularza.

Jeśli masz więcej niż 3 opcje do uwzględnienia, po prostu kliknij przycisk (+) , aby dodać nowy wybór. Możesz również użyć przycisku (-) , aby usunąć wybór.

Kliknij przycisk - aby usunąć pole wyboru wielokrotnego

Zmiana sposobu wyświetlania wyborów obrazkowych w formularzu

WPForms ułatwia zmianę układu i innych ustawień pola wyboru obrazkowego.

Aby to zrobić, przejdź do zakładki „Zaawansowane” w lewej kolumnie.

Teraz możesz przełączyć przełącznik „Losuj wybory”, jeśli chcesz wyświetlać swoje wybory obrazkowe losowo, a nie w określonej kolejności.

Jest to przydatne, jeśli tworzysz ankietę i chcesz wyeliminować stronniczość pierwszej wybranej opcji w wynikach.

Przełącznik losowania opcji

Jeśli chcesz, możesz również zmienić sposób układu swoich opcji za pomocą listy rozwijanej „Układ opcji”.

Domyślnie jest to „Inline”, a Twoje opcje pojawiają się obok siebie, dopóki nie przejdą do nowej linii.

Możesz zamiast tego wyświetlić swoje opcje w kilku kolumnach. Jeśli chcesz pionową listę, po prostu wybierz „Jedna kolumna” z listy rozwijanej.

Istnieje również opcja „Ukryj etykietę” dla Twoich opcji obrazkowych. Oznacza to, że pod obrazkami nie będzie żadnego tekstu. W niektórych przypadkach może to mieć sens.

Na przykład możesz poprosić ludzi o głosowanie na to, który nowy projekt logo im się najbardziej podoba.

Upewnij się jednak, że w miarę możliwości wprowadzisz odpowiednią i pomocną etykietę. Zostanie ona wyświetlona jako tekst alternatywny dla Twoich obrazów, dzięki czemu Twoja witryna będzie bardziej dostępna dla osób niedowidzących.

Wybierz układ opcji

Po wykonaniu tej czynności przełącz się z powrotem do zakładki „Ogólne” z lewej kolumny i przewiń w dół do sekcji „Styl opcji obrazkowych”.

Tutaj możesz wybrać, jak chcesz stylizować swoje obrazy z menu rozwijanego.

Wybierz styl wyboru obrazków

Domyślnym stylem jest „Nowoczesny”, gdzie dla wybranego obrazu pojawi się znacznik wyboru.

Możesz jednak zamiast tego wybrać styl „Klasyczny”, który wygląda tak, gdy opcja jest wybrana:

Wybór obrazków w stylu Klasycznym (grubsza ramka, brak cienia, brak pogrubionego tekstu, brak zaznaczenia)

Alternatywnie możesz również wybrać „Brak” dla stylu.

W tym przypadku Twoje obrazy będą po prostu zwykłymi obrazami bez obramowania ani innego stylizowania. Etykiety będą wyświetlane z przyciskami opcji.

Wybór obrazków bez stylizacji

Gdy będziesz zadowolony z formularza, po prostu kliknij przycisk „Zapisz” u góry ekranu.

Dodawanie formularza do Twojej witryny

Możesz dodać swój formularz do dowolnego wpisu lub strony na swojej witrynie za pomocą zaledwie kilku kliknięć. My stworzymy dla naszego nową stronę.

Najpierw przejdź do ekranu Strony » Dodaj nową z paska bocznego administracji WordPress i kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu.

Spowoduje to otwarcie menu bloków, z którego musisz znaleźć i dodać blok WPForms do strony.

Wybierz formularz z menu rozwijanego w bloku WPForms

Następnie wybierz formularz, który właśnie utworzyłeś, z menu rozwijanego w samym bloku.

Na koniec kliknij przycisk „Opublikuj” lub „Zaktualizuj”, aby zapisać ustawienia formularza.

Teraz odwiedź swoją witrynę, aby zobaczyć opcje obrazów w swoim formularzu WordPress.

Podgląd dodawania wyboru obrazków w formularzach WordPress

Jeśli chcesz wprowadzić więcej zmian w swoim formularzu, możesz to łatwo zrobić, odwiedzając stronę WPForms » Wszystkie formularze z panelu administracyjnego WordPress.

Gdy już tam będziesz, kliknij swój formularz, aby otworzyć go w kreatorze formularzy.

Po wprowadzeniu zmian po prostu kliknij przycisk „Zapisz”, aby zapisać zmiany. Twój formularz zostanie również automatycznie zaktualizowany na Twojej stronie.

Edytuj formularz wyboru obrazków

Bonus: Akceptuj obrazy w swoich formularzach WordPress

Oprócz oferowania opcji obrazów, możesz również akceptować obrazy od różnych użytkowników za pomocą formularza WordPress.

Może się to przydać, jeśli jesteś fotografem szukającym kogoś do zatrudnienia lub jeśli prowadzisz konkurs fotograficzny.

Poza tym, akceptowanie treści generowanych przez użytkowników może nawet pomóc zwiększyć zaangażowanie użytkowników na Twojej stronie.

Możesz łatwo utworzyć formularz przesyłania plików w WordPress za pomocą WPForms, ponieważ jest to najlepszy plugin do przesyłania plików na rynku.

Zawiera gotowy szablon formularza przesyłania plików, którego można użyć do akceptowania dowolnego rodzaju dokumentów, w tym jpeg, png, gif, pdf, ppt i innych.

Aby zaakceptować obrazy, wystarczy kliknąć pole „Przesyłanie plików”, aby otworzyć jego ustawienia w lewej kolumnie. Następnie musisz wprowadzić typy plików obrazów, które chcesz zaakceptować, w opcji „Dozwolone rozszerzenia plików”.

Wpisz typ rozszerzenia pliku

Gdy będziesz zadowolony, nie zapomnij kliknąć przycisku „Zapisz”, aby zachować swoje ustawienia.

Następnie możesz dodać formularz do swojej witryny za pomocą przyjaznego dla użytkownika bloku WPForms. Bardziej szczegółowe instrukcje znajdziesz w naszym poradniku jak utworzyć formularz przesyłania plików w WordPress.

Samouczek wideo

Jeśli wolisz instrukcje wizualne, możesz obejrzeć nasz samouczek wideo.

Subskrybuj WPBeginner

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać wybory obrazów w formularzach WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących jak utworzyć interaktywną ankietę na swojej stronie WordPress oraz naszym porównaniem najlepszych wtyczek kalkulatora dla 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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz w niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak finansowany jest WPBeginner, dlaczego to ważne i jak możesz nas wesprzeć. Oto nasz proces redakcyjny.

Ostateczny zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi – kolekcji produktów i zasobów związanych z WordPress, które powinien mieć każdy profesjonalista!

Interakcje czytelników

3 CommentsLeave a Reply

  1. To ekscytujące, nigdy nie myślałem, że będzie to tak łatwe do skonfigurowania, WPForms to naprawdę dobra wtyczka do formularzy i wszystkich spraw związanych z wprowadzaniem danych. Podoba mi się, jak działa z wyborem obrazu.

  2. Cześć,
    Mam pytanie, jak można pozwolić na wybór wielu opcji.
    Co muszę zrobić, jeśli chcę, aby ktoś wybrał 2 lub 3 owoce?
    Dzięki!

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszą polityką komentowania, a Twój adres e-mail NIE zostanie opublikowany. Prosimy NIE używać słów kluczowych w polu nazwy. Prowadźmy osobistą i znaczącą rozmowę.