Jak utworzyć formularz WordPress z polem wyboru daty (łatwy sposób)

Niespójne wprowadzanie dat może zamienić prosty formularz WordPress w frustrujący bałagan. Slajsy, kreski, pełne nazwy miesięcy – gdy użytkownicy wprowadzają daty, jak chcą, nieuchronnie prowadzi to do koszmaru nieuporządkowanych danych, którego sprzątanie zajmuje godziny.

Dlatego dodanie wybieraka daty do formularzy jest tak mądrym posunięciem.

Zamiast pozostawiać formatowanie użytkownikowi, selektor daty zapewnia mu przejrzysty interfejs kalendarza. Dzięki temu dane są jednolite i znacznie łatwiejsze dla użytkowników mobilnych do kliknięcia niż ręczne wpisywanie daty.

W tym przewodniku podzielimy się najprostszym sposobem tworzenia formularza WordPress z selektorem daty. Niezależnie od tego, czy tworzysz formularze rezerwacji, rejestracji na wydarzenia, czy harmonogramy spotkań, ta mała ulepszenie może pomóc zarówno Tobie, jak i odwiedzającym Twoją witrynę. 🙌

Dlaczego tworzyć formularz WordPress z selektorem daty?

Krótko mówiąc, selektor daty ułatwia użytkownikom wprowadzanie dat i czyni je bardziej niezawodnymi dla Ciebie.

Po zarządzaniu tysiącami formularzy online w WordPress, zauważyliśmy, że pola formularzy związane z datą często są przyczyną problemów. W rzeczywistości nieprawidłowe formaty dat są jednymi z głównych powodów, dla których zgłoszenia formularzy kończą się niepowodzeniem lub powodują zamieszanie.

Pole wyboru daty rozwiązuje te powszechne problemy i poprawia komfort użytkownika. Widzieliśmy, że działa skutecznie dla:

Przypadek użycia	Przykład
Formularze rejestracyjne	Pozwól użytkownikom wybrać datę urodzenia zamiast ją wpisywać.
Formularze zamówień	Wybierz datę dostawy (i czas, jeśli jest potrzebny).
Formularze wynajmu	Wybierz datę odbioru lub zwrotu przedmiotu wynajmu.
Formularze z prośbą o kontakt zwrotny	Pozwól użytkownikom wybrać, kiedy chcą być kontaktowani.
Formularze wniosków o urlop	Wprowadź daty rozpoczęcia i zakończenia wolnego.
Formularze rezerwacji / rezerwacji	Wybierz datę rezerwacji usługi lub zakwaterowania.

Najlepsze jest to, że selektor daty zapewnia spójność we wszystkich zgłoszeniach. Koniec z zastanawianiem się, czy 03/04/2026 oznacza 4 marca, czy 3 kwietnia, co jest kłopotem, z którym zbyt często spotykaliśmy się przy ręcznym wprowadzaniu danych.

Teraz pokażemy Ci, jak łatwo utworzyć formularz WordPress z selektorem daty. Oto kroki, które omówimy, a poniższe szybkie linki pomogą Ci się przez nie poruszać:

Zacznijmy.

Krok 1: Zainstaluj wtyczkę WPForms

Przez lata testowaliśmy dziesiątki wtyczek do formularzy i selektorów dat, w tym popularne opcje, takie jak Ninja Forms i Gravity Forms.

Ale jeśli chodzi o dodawanie selektorów daty, uważamy, że WPForms jest najbardziej przyjaznym dla użytkownika rozwiązaniem, szczególnie dla początkujących, którzy chcą tworzyć profesjonalnie wyglądające formularze bez dotykania kodu.

Oprócz selektora daty, WPForms oferuje funkcje premium, takie jak logika warunkowa do pokazywania lub ukrywania pól w zależności od wyborów użytkownika. Możesz też użyć inteligentnych kalkulatorów do automatycznego obsługiwania szacowania cen.

W WPBeginner faktycznie używamy WPForms do tworzenia większości naszych formularzy i nie możemy go wystarczająco polecić. Możesz przeczytać naszą pełną recenzję WPForms po więcej szczegółów.

Zacznij od odwiedzenia strony internetowej WPForms i utworzenia konta. Po prostu kliknij przycisk „Get WPForms Now”, wybierz plan, który Ci odpowiada, i zakończ proces rejestracji.

Po zarejestrowaniu się możesz zalogować się do panelu konta WPForms. Tam znajdziesz plik zip swojej wtyczki i klucz licencyjny. Możesz zostawić tę stronę otwartą na razie lub zapisać te dane w bezpiecznym miejscu, na przykład w menedżerze haseł.

Następnie przejdź do swojego panelu WordPress i wybierz Wtyczki » Dodaj nową wtyczkę.

Użyj paska wyszukiwania na tej stronie, aby szybko wyszukać WPForms.

Gdy zobaczysz to w wynikach, kliknij „Zainstaluj teraz”, a następnie kliknij „Aktywuj”, gdy instalacja się zakończy.

Aby uzyskać szczegółowe instrukcje, możesz zapoznać się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po zainstalowaniu wtyczki będziesz musiał aktywować swój klucz licencyjny.

W sekcji WPForms » Ustawienia możesz wkleić swój klucz licencyjny w odpowiednim polu. Następnie kliknij przycisk „Zweryfikuj klucz”.

Krok 2: Wybierz szablon formularza

Po aktywacji przejdź do strony WPForms » Dodaj nowy z panelu administracyjnego WordPress.

Przekieruje Cię to do strony „Wybierz szablon”.

Zanim wybierzesz szablon, warto nazwać swój formularz WordPress, aby można go było łatwo zidentyfikować później.

Następnie wybierzesz, jak chcesz zbudować swój formularz – za pomocą WPForms AI, gotowego szablonu lub od podstaw.

Jeśli chcesz skorzystać z kreatora formularzy AI, wystarczy napisać proste polecenie. AI wygeneruje formularz w mgnieniu oka.

W tym przykładzie użyjemy szablonu Simple Contact Form, a następnie dodamy do niego pole wyboru daty. Ale śmiało wybierz szablon, który najlepiej Ci odpowiada.

Przewijając stronę Ustawienia w dół, zobaczysz ponad 2000 gotowych szablonów formularzy dostępnych tutaj. Możesz użyć paska wyszukiwania, aby zawęzić wybór.

Po dokonaniu wyboru wystarczy kliknąć przycisk „Użyj szablonu”.

Krok 3: Dodaj pole wyboru daty do swojego formularza WordPress

Teraz przejdziesz do kreatora formularzy WPForms. Zauważysz opcje pól w lewej kolumnie i podgląd formularza po prawej stronie ekranu.

Domyślnie szablon Prosty formularz kontaktowy zawiera tylko pola nazwy, adres e-mail i komentarzy.

Dla demonstracji pokażemy, jak dodać pole daty do Twojego formularza WordPress. Ale jeśli Twój szablon już go ma, możesz pominąć część edycji tego kroku.

Przewiń w dół do sekcji Fantazyjne pola w lewym panelu, aby znaleźć pole „Data / Czas”.

Po prostu przeciągnij i upuść to pole tam, gdzie chcesz je umieścić w formularzu. W tym samouczku umieściliśmy je tuż pod polem E-mail.

Po wykonaniu tej czynności kliknij pole „Data/Godzina”, aby je edytować. Spowoduje to otwarcie zakładki „Opcje pola” po lewej stronie ekranu.

Tutaj możesz zmienić etykietę pola, która domyślnie brzmi „Data / Godzina”. W naszym polu użyjemy „Preferowany czas rozmowy telefonicznej”.

Możesz również zmienić format daty pola za pomocą menu rozwijanego Format. Opcje to Data i czas, Tylko data lub Tylko czas. Może to być przydatne, jeśli chcesz zebrać daty urodzenia użytkowników bez pola czasu.

Poza tym możesz wypełnić tekst opisu, aby nadać więcej kontekstu na temat tego, co użytkownik musi wprowadzić w polu.

Na koniec możesz zaznaczyć pole „Wymagane”, jeśli chcesz, aby to pole było obowiązkowe. Oznacza to, że użytkownik będzie musiał wybrać datę i godzinę, zanim będzie mógł przesłać formularz.

Po wykonaniu tej czynności kliknij przycisk „Zapisz” u góry, aby zapisać ustawienia formularza.

Krok 4: Skonfiguruj ustawienia selektora daty i godziny

Domyślnie pole wyboru zakresu dat w formularzu WordPress będzie kalendarzem z menu rozwijanym czasu obok.

Wybrana zostanie bieżąca data.

Kiedy użytkownik kliknie pole, pojawi się kalendarz z zaznaczoną bieżącą datą w formacie miesiąc/dzień/rok. Następnie może ją zmienić, aby wybrać inną datę.

W międzyczasie lista rozwijana czasu domyślnie ustawiona jest na zegar 12-godzinny z 30-minutowymi interwałami.

Użytkownicy mogą następnie wybrać przedział czasowy, który najlepiej im odpowiada.

W niektórych przypadkach możesz chcieć zmienić ustawienia selektora daty. Na przykład, być może Twój kraj stosuje format daty i godziny dzień/miesiąc/rok lub 24-godzinny formaty daty i godziny zamiast domyślnych.

Aby to zrobić, musisz przełączyć się na zakładkę „Zaawansowane” u góry panelu po lewej stronie.

Tutaj możesz dostosować rozmiar pola wyboru daty. Następnie, w sekcji Data, możesz zmienić zakres dat z kalendarza na menu rozwijane dat.

Przełączenie selektora kalendarza dat na menu rozwijane dat jest dobrym pomysłem, jeśli formularz ma ograniczoną przestrzeń, a kalendarz wygląda dość mały.

Oto jak wygląda menu rozwijane daty:

Poniżej możesz zmienić format, aby dopasować go do swojego regionu. Na przykład możesz przełączyć się z formatu amerykańskiego (mm/dd/rrrr) na format międzynarodowy (dd/mm/rrrr).

Jeśli wybierzesz selektor daty kalendarza, możesz również wstawić tekst zastępczy w polu „Data”. Możesz wypełnić je swoim formatem daty, aby użytkownicy wiedzieli, jakiego formatu używasz, aby nie byli zdezorientowani.

Dodatkowo możesz przełączyć przełącznik „Ogranicz dni”, aby ograniczyć dostępne dni. Jest to idealne rozwiązanie, jeśli chcesz zapobiec rezerwacjom w weekendy lub w określone święta.

Zdecydowanie zalecamy zaznaczenie pola „Wyłącz przeszłe daty” dla formularzy rezerwacji wizyt. Zapobiega to przypadkowemu (lub celowemu) rezerwowaniu przez użytkowników terminów w przeszłości, dzięki czemu Twój harmonogram jest wolny od błędów.

Dodatkowo możesz wyłączyć dzisiejszą datę, jeśli nie zezwalasz na rezerwacje tego samego dnia.

Następnie przejdźmy do sekcji „Czas”, aby zmienić selektor czasu.

Tutaj możesz zmienić interwał na 15 minut lub 1 godzinę zamiast 30 minut. Dobrze jest również wprowadzić tekst zastępczy, aby pokazać używany format czasu.

Selektor czasu domyślnie używa zegara 12-godzinnego, ale można go przełączyć na zegar 24-godzinny, jeśli wolisz.

Ponadto, możesz włączyć ustawienie „Ogranicz godziny”, aby określić godziny rozpoczęcia i zakończenia usług. W ten sposób użytkownicy nie będą mogli umówić się na wizytę poza godzinami pracy Twojej firmy.

Poza tym możesz wprowadzić nazwę klasy CSS dla pola zakresu dat. Jest to zaawansowana i opcjonalna funkcja, ale możesz jej użyć do późniejszego nadpisania stylu formularza za pomocą kodu.

Wreszcie, jeśli to konieczne, możesz ukryć etykietę pola formularza i/lub etykietę pomocniczą.

Gdy będziesz zadowolony ze swojego nowego formularza, możesz go zapisać, klikając przycisk „Zapisz” w prawym górnym rogu ekranu.

Krok 5: Osadź formularz WordPress na swojej stronie internetowej

Jesteś teraz gotowy, aby dodać swoją nową formę z selektorem daty do swojej strony WordPress. Aby to zrobić, po prostu kliknij przycisk „Osadź” w górnej części kreatora formularzy.

Pojawi się okno dialogowe z prośbą o wybranie istniejącej strony, do której chcesz dodać formularz, lub utworzenie nowej strony dla formularza od podstaw. Obie opcje korzystają z edytora bloków, więc kroki są dość podobne.

Dodaj blok WPForms do istniejącej lub nowej strony

Aby wstawić formularz na istniejącą stronę, kliknij przycisk „Wybierz istniejącą stronę”. Następnie wybierz jedną ze stron, które już masz na swoim blogu WordPress lub stronie internetowej i kliknij „Zaczynajmy!”

Jeśli chcesz dodać formularz do nowej strony, po prostu kliknij przycisk „Utwórz nową stronę”.

Następnie nadaj swojej nowej stronie nazwę i kliknij „Zaczynajmy!”

Obie te metody przeniosą Cię do edytora bloków, gdzie zobaczysz instrukcje dotyczące dodawania bloku WPForms.

Najpierw kliknij przycisk „+” dodaj blok.

Następnie wpisz „WPForms” w pasku wyszukiwania bloków.

Po prostu przeciągnij i upuść blok tam, gdzie najlepiej wygląda na stronie.

Wszystko, co musisz teraz zrobić, to kliknąć menu rozwijane.

Następnie wybierz formularz, który właśnie utworzyłeś.

W bocznym panelu ustawień bloku możesz dostosować styl pola formularza, etykiety i przycisku, aby lepiej pasowały do Twojego motywu WordPress.

Możesz zmienić rozmiar każdego elementu, promień zaokrąglenia i kolory.

Możesz teraz kliknąć przycisk „Zaktualizuj” lub „Opublikuj”, aby formularz był aktywny na Twojej stronie internetowej.

Powinno to wyglądać mniej więcej tak na Twojej stronie WordPress:

Jeśli chcesz wstawić widżet formularza w poście zamiast strony, możesz utworzyć nowy post lub otworzyć istniejący w edytorze blokowym.

Następnie postępuj zgodnie z tymi samymi krokami, aby dodać blok WPForms do strony, tak jak w tej metodzie.

Dodaj blok WPForms do obszaru gotowego na widżety

Jeśli używasz klasycznego motywu WordPress, możesz chcieć wyświetlić swój formularz w nagłówku, stopce lub pasku bocznym gotowym na widżety. Może to być dobry pomysł, jeśli Twój formularz jest dość krótki i nie zajmuje zbyt wiele miejsca.

Aby to zrobić, przejdź do Wygląd » Widgety z obszaru administracyjnego WordPress. Następnie przejdź do pożądanego obszaru gotowego na widgety i kliknij biały przycisk dodawania bloku „+” w jego obrębie. Następnie możesz wyszukać blok WPForms.

Jeśli widzisz dwie opcje, możesz wybrać dowolną z nich, ponieważ obie robią to samo.

Podobnie jak w poprzedniej metodzie, po prostu wybierz formularz, który właśnie utworzyłeś. W panelu bocznym ustawień bloku możesz skonfigurować projekt tak, aby lepiej pasował do Twojego motywu WordPress.

Gdy będziesz zadowolony z edycji, po prostu kliknij przycisk „Zaktualizuj”.

To wszystko!

Oto jak wygląda nasz formularz na dole wpisu na blogu WordPress:

Osadź swój formularz WordPress za pomocą krótkiego kodu

Jeśli blok lub widżet WPForms nie działa, możesz również dodać swój formularz WordPress za pomocą shortcode.

W oknie „Osadź na stronie” kliknij po prostu link „użyj krótkiego kodu”. Zobaczysz wtedy krótki kod, który możesz skopiować i wkleić na stronę, do wpisu lub obszaru gotowego na widżety.

Więcej informacji na temat korzystania ze skrótów znajdziesz w naszym artykule jak dodać skrót w WordPressie.

🎁 Krok bonusowy: Włącz przypomnienia o spotkaniach

Jeśli używasz formularza do planowania spotkań lub rezerwacji, dodanie automatycznych przypomnień może zrobić dużą różnicę.

Połączenie formularza z Twoim serwisem e-mail marketingowym pozwala na wysyłanie przypomnień o spotkaniach, co pomaga zmniejszyć liczbę nieobecności i utrzymać porządek.

Zapewnia również użytkownikom potwierdzenie, że ich zgłoszenie zostało pomyślnie przyjęte i ich miejsce jest potwierdzone.

Aby to skonfigurować, możesz postępować zgodnie z naszym przewodnikiem krok po kroku na temat wysyłania e-maili z potwierdzeniem do osób wysyłających formularz. Za pomocą zaledwie kilku kliknięć możesz zapewnić użytkownikom terminowe przypomnienie o wybranej dacie lub godzinie. ⏰

FAQ: Jak utworzyć formularz WordPress z selektorem daty

Myślisz o dodaniu selektora daty do swoich formularzy WordPress? Oto kilka typowych pytań, które pomogą Ci zacząć.

Czym jest selektor daty w formularzach WordPress?

Selektor daty pozwala użytkownikom wybrać datę z kalendarza. Pomaga zapewnić spójne formatowanie dat i zmniejsza liczbę błędów podczas wprowadzania danych.

Jaka jest różnica między selektorem daty a selektorem godziny?

Selektor daty pozwala użytkownikom wybrać datę z kalendarza (np. 14 stycznia 2026). Selektor godziny pozwala użytkownikom wybrać godzinę (np. 15:30).

Jak dodać wybór czasu w WordPress?

Jeśli używasz konstruktora formularzy takiego jak WPForms, po prostu przeciągnij pole „Data / Czas” do swojego formularza. Następnie wybierz opcję „Czas” w ustawieniach.

Jak wyświetlić datę na mojej stronie WordPress?

Daty można wyświetlać za pomocą widżetu, krótkiego kodu lub niestandardowego fragmentu kodu PHP.

WPCode to jeden z najlepszych pluginów do fragmentów kodu dla WordPressa. Umożliwia on bardzo bezpieczne i łatwe dodawanie niestandardowego kodu do Twojej strony internetowej, w tym kodu do wyświetlania dzisiejszej daty.

Jak wstawić selektor daty za pomocą HTML?

W zwykłym HTML możesz użyć: <input type="date">. Ale w WordPress łatwiej jest użyć wtyczki formularza dla lepszej kompatybilności i kontroli.

Najlepsze wskazówki dotyczące optymalizacji formularza WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć formularz WordPress z selektorem daty.

Teraz, gdy już wiesz, jak dodać wybierak daty w formularzach WordPress, omówmy najlepsze wskazówki, jak przenieść swoje formularze na wyższy poziom:

• Akceptuj płatności online w swoich formularzach – WPForms obsługuje popularne bramki płatności, takie jak Stripe, PayPal, Square i Authorize.net. Możesz pobierać jednorazowe lub cykliczne płatności, a nie ma dodatkowych opłat transakcyjnych.
• Spraw, aby Twoje dłuższe formularze były konwersacyjne – Jeśli masz formularz rejestracji na wydarzenie lub użytkownika, który wymaga zebrania wielu informacji, uczynienie go konwersacyjnym może zwiększyć wskaźnik ukończenia formularza.
• Zapobiegaj spamowi w formularzach kontaktowych – Możesz włączyć wbudowaną ochronę antyspamową WPForms i pole wyboru reCAPTCHA, aby odfiltrować spamowe wpisy formularzy.
• Twórz wielojęzyczne formularze – Dotrzyj do zróżnicowanej publiczności i zwiększ dostępność swojej strony dzięki formularzom wyświetlanym w wielu językach.
• Najlepsze praktyki projektowania stron z formularzami kontaktowymi – Ten przewodnik przeprowadzi Cię przez proces projektowania najlepszego formularza WordPress, który przekształci zwykłych odwiedzających w potencjalnych klientów lub klientów.
• Wskazówki dotyczące tworzenia bardziej interaktywnych formularzy – Współzałożyciel WPForms, Jared Atchison, udziela wskazówek, jak sprawić, by formularze były bardziej angażujące, od używania logiki warunkowej po dodawanie bogatych treści multimedialnych.

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.