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 / formularze 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 formularzy i selektorów dat, w tym popularne opcje, takie jak Ninja Forms i Gravity Forms.

Jednak jeśli chodzi o dodawanie selektorów dat, 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 dat, WPForms oferuje funkcje premium, takie jak logika warunkowa do pokazywania lub ukrywania pól w oparciu o wybory 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 zapoznać się z naszą pełną recenzją WPForms, aby uzyskać 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 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.

Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku, 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 zbudujesz swój formularz – za pomocą WPForms AI, gotowego szablonu lub od zera.

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 Simple Contact Form zawiera tylko pola nazwy, adresu e-mail i komentarzy dodane do formularza.

Dla demonstracji pokażemy Ci, jak dodać pole daty do Twojego formularza WordPress. Ale jeśli Twój szablon już je zawiera, 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, Sama data lub Sam 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 selektora zakresu dat w Twoim formularzu WordPress będzie kalendarzem z menu rozwijanym czasu obok niego.

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 dat. Na przykład, być może Twój kraj stosuje format dzień/miesiąc/rok lub 24-godzinny format daty i czasu 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 dat:

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. Zapobiega to przypadkowemu (lub celowemu) rezerwowaniu terminu z 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ć nowy formularz z selektorem daty do swojej witryny 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ącej stronie, kliknij przycisk „Wybierz istniejącą stronę”. Następnie wybierz jedną ze stron, które już masz w swoim blogu WordPress lub witrynie 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, jak dodać blok 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ć pole formularza, etykietę i style przycisków, 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ć widget formularza w poście zamiast strony, możesz utworzyć nowy post lub otworzyć istniejący w edytorze bloków.

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 o tym, jak używać shortcode, znajdziesz w naszym artykule o dodawaniu shortcode w WordPress.

🎁 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 usługą marketingową e-mail pozwala wysyłać przypomnienia o spotkaniach, pomagając 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, jak wysyłać e-maile z potwierdzeniem do osób wypełniają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 kreatora formularzy, takiego jak WPForms, po prostu przeciągnij pole „Data / Godzina” do swojego formularza. Następnie wybierz opcję „Godzina” w ustawieniach.

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

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

WPCode to jeden z najlepszych wtyczek do fragmentów kodu dla WordPress. Sprawia, że dodawanie niestandardowego kodu, w tym kodu do wyświetlania dzisiejszej daty, do Twojej witryny jest bardzo bezpieczne i łatwe.

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 do formularzy 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 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 witryny dzięki formularzom wyświetlanym w wielu językach.
• Najlepsze praktyki projektowania strony z formularzem kontaktowym – Ten przewodnik pomoże Ci zaprojektować najlepszy formularz 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 multimediów.

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.