Czy to nie frustrujące, gdy użytkownicy przesyłają formularze z datami w różnych formatach? Prowadziliśmy wiele witryn internetowych z formularzami rezerwacji, rejestracji wydarzeń i planowania spotkań, więc dokładnie wiemy, jak to jest.
Niektórzy odwiedzający wpisują „01/03/2025”, inni „1 marca 2025”, a wkrótce spędzasz godziny na sortowaniu mylących zgłoszeń.
Odkryliśmy, że dodanie odpowiedniego selektora dat do twoich formularzy WordPress całkowicie eliminuje te bóle głowy. Zamiast pozwalać użytkownikom na ręczne wpisywanie dat, selektor dat zapewnia prosty interfejs kalendarza, który zapewnia spójność i brak błędów.
Przejdźmy więc do tego, jak stworzyć formularz WordPress z profesjonalnym selektorem dat, z którego twoi użytkownicy będą chętnie korzystać.

Po co tworzyć formularz WordPress z selektorem dat?
Po zarządzaniu tysiącami formularzy online w WordPressie, zauważyliśmy, że pola formularzy związane z datą są często miejscem, w którym coś idzie nie tak. W rzeczywistości nieprawidłowe formaty dat są jednym z głównych powodów, dla których przesyłanie formularzy kończy się niepowodzeniem lub powoduje zamieszanie.
Pole wyboru daty rozwiązuje te typowe frustracje i poprawia twoje wrażenia użytkownika. Widzieliśmy, że działa skutecznie dla:
- Formularze rejestracyjne, w których użytkownicy proszeni są o wpisz daty urodzenia.
- Formularze zamówień umożliwiające wybór daty i godziny dostawy zamówienia.
- Formularze wypożyczenia przedmiotów umożliwiające wybranie daty odbioru lub zwrotu wypożyczonego przedmiotu.
- Formularze z prośbą o oddzwonienie, które pozwalają użytkownikom powiadomić Cię, kiedy chcą się z Tobą skontaktować w sprawie Twoich produktów lub usług.
- Formularze wniosków urlopowych umożliwiające pracownikom wprowadzenie daty rozpoczęcia i zakończenia urlopu.
- Formularze spotkań lub rezerwacji dla witryn internetowych dotyczących zakwaterowania lub usług.
A co najlepsze? Selektor dat zapewnia spójność wszystkich zgłoszeń. Koniec z zastanawianiem się, czy 03/04/2024 oznacza 4 marca czy 3 kwietnia, z czym zbyt często mieliśmy do czynienia podczas ręcznego wprowadzania danych.
Powiedziawszy to, zobaczmy, jak łatwo utworzyć formularz WordPress z selektorem dat. Oto kroki, które omówimy, a do nawigacji po nich możesz użyć poniższych szybkich odnośników:
Krok 1: Zainstaluj wtyczkę WPForms
Na przestrzeni lat przetestowaliśmy dziesiątki wtyczek do formularzy i datowników, w tym popularne opcje, takie jak Ninja Forms i Gravity Forms.
Ale jeśli chodzi o dodawanie selektorów dat, uznaliśmy WPForms za najbardziej przyjazne dla użytkownika rozwiązanie, szczególnie dla początkujących, którzy chcą tworzyć profesjonalnie wyglądające formularze bez dotykania jakiegokolwiek kodu.
Oprócz selektora dat, WPForms oferuje funkcje premium, takie jak logika warunkowa do pokazywania lub ukrywania pól na podstawie wyborów użytkownika oraz inteligentne kalkulatory do automatycznej obsługi szacunków cenowych.
Więcej szczegółów można znaleźć w naszej pełnej recenzji WPForms.
Najpierw musisz zainstalować WPForms na twojej witrynie internetowej. Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.
Uwaga: W przypadku tego przewodnika musisz użyć wersji premium WPForms, ponieważ to właśnie tam dostępne jest pole wyboru daty. Biorąc to pod uwagę, jeśli skorzystasz z naszego kuponu WPForms, możesz uzyskać 50% zniżki od regularnej ceny.
Krok 2: Wybór szablonu formularza
Po włączaniu, przejdź do strony WPForms ” Add New z twojego kokpitu WordPress.

Spowoduje to przejście do strony „Wybierz szablon”.
Przed wyborem szablonu warto nazwać twój formularz WordPress, abyś mógł go później łatwo zidentyfikować.

Przewijając w dół, zobaczysz kilka gotowych szablonów formularzy dostępnych tutaj, z których wiele zawiera już pole zakresu dat.
Na potrzeby przykładu użyjemy szablonu Simple Contact Form, a następnie dodamy do niego pole wyboru daty. Możesz jednak wybrać szablon, który najbardziej Ci odpowiada.
Po dokonaniu twojego wyboru, po prostu kliknij przycisk „Użyj szablonu”.

Pro Tip: Jeśli prowadzisz witrynę noclegową i chcesz, aby użytkownicy mogli wstawić określone daty pobytu, możesz użyć szablonu Formularz rezerwacji hotelu. Zawiera on dwa pola wyboru daty WordPress: jedno dla daty przyjazdu, a drugie dla daty wyjazdu.
Krok 3: Dodaj pole wyboru daty do twojego 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 prostego formularza kontaktowego ma dodane do formularza tylko pole nazwy, adresu e-mail i komentarzy.
W celach demonstracyjnych pokażemy, jak dodać pole daty do twojego formularza WordPress. Jeśli jednak twój szablon już je posiada, możesz pominąć edycję tego kroku.
To, co musisz zrobić, to przewinąć w dół do sekcji Fancy Fields w lewej kolumnie, gdzie zobaczysz pole „Date / Time”.
Po prostu przeciągnij i upuść to pole w miejscu, w którym chcesz je umieścić w twoim formularzu. W tym poradniku umieściliśmy je tuż pod polem e-mail.

Gdy to zrobisz, kliknij pole „Data/godzina”, aby je edytować. Spowoduje to otwarcie karty „Opcje pola” po lewej stronie twojego ekranu.
W tym miejscu można zmienić etykietę pola, która domyślnie jest ustawiona na „Data / godzina”. W naszym polu użyjemy opcji „Preferowana godzina połączenia telefonicznego”.
Można również zmienić format daty w polu za pomocą menu rozwijanego Format. Dostępne opcje to Data i godzina, Data lub Tylko godzina. Może to być przydatne, jeśli chcesz użyć tylko daty bez pola czasu do zbierania dat urodzenia użytkowników.
Poza tym można wypełnić tekst opisu, aby nadać więcej kontekstu temu, co użytkownik musi wpisz w polu.
Na koniec możesz zaznaczyć pole „Wymagane”, jeśli chcesz, aby było to pole obowiązkowe. Oznacza to, że użytkownik będzie musiał wybrać datę i godzinę, zanim będzie mógł przesłać formularz.
Gdy to zrobisz, kliknij przycisk „Zapisz” u góry, aby zapisać twoje ustawienia formularza.

Krok 4: Konfiguracja ustawień selektora daty i godziny
Domyślnie pole wyboru zakresu dat w twoim formularzu WordPress będzie kalendarzem z rozwijanym menu czasu obok niego.
Wybrana zostanie obecna, aktualna data, ale użytkownik może ją zmienić, aby wybrać inną datę. Format daty to miesiąc/dzień/rok.

W międzyczasie rozwijane menu czasu domyślnie ustawia 12-godzinny zegar z 30-minutowymi interwałami.
Użytkownicy mogą następnie wybrać przedział czasowy, który najbardziej im odpowiada.

W niektórych przypadkach może być konieczna zmiana ustawień selektora daty. Na przykład, być może twój kraj używa formatu dnia/miesiąca/roku lub 24-godzinnego formatu daty i godziny zamiast domyślnego.
W tym celu należy przejść do karty „Zaawansowane” w górnej części panelu po lewej stronie.
Tutaj można dostosować rozmiar pola wyboru daty. Następnie w sekcji Data można zmienić zakres dat z kalendarza na menu rozwijane.

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

Poniżej można zmienić format daty z miesiąc/dzień/rok (1/31/2024) na dzień/miesiąc/rok (31/1/2024) lub miesiąc, dzień, rok (31 stycznia 2024).
Jeśli wybierzesz selektor daty kalendarza, możesz również wstawić tekst zastępczy w polu „Data”. Możesz go wypełnić twoim formatem daty, aby użytkownicy wiedzieli, jakiego formatu używasz, aby nie byli zdezorientowani.

Dodatkowo można włączyć przełącznik „Limit dni”, aby dostosować zakres dat, które można wybrać. Będzie to przydatne, jeśli uruchamiasz swoje usługi tylko w dni powszednie.
Możesz także wyłączyć przeszłe daty, aby zapobiec wybieraniu poprzednich dat.

Następnie przejdźmy do sekcji „Czas”, aby zmienić selektor czasu.
Tutaj można zmienić interwał na 15 minut lub 1 godzinę zamiast 30 minut. Dobrze jest również wprowadzić tutaj tekst zastępczy, aby pokazać, jakiego formatu czasu używasz.
Zegar domyślnie ustawiony jest na 12-godzinny, ale jeśli wolisz, możesz przełączyć go na 24-godzinny.
Możesz również włączyć ustawienie „Ogranicz godziny”, aby określić godziny rozpoczęcia i zakończenia twoich usług. W ten sposób użytkownicy nie będą mogli umówić się na spotkanie poza Twoimi godzinami pracy.
Poza tym możesz wpisz nazwę klasy CSS dla pola zakresu dat. Jest to funkcja zaawansowana i opcjonalna, ale można jej użyć do późniejszego zastąpienia stylu formularza za pomocą kodu.
Wreszcie, w razie potrzeby można ukryć etykietę pola formularza i/lub etykietę podrzędną.
Gdy twój nowy formularz będzie już satysfakcjonujący, możesz go zapisać, klikając przycisk „Zapisz” w prawym górnym rogu ekranu.

Krok 5: Osadzanie formularza WordPress na twojej witrynie internetowej
Jesteś teraz gotowy, aby utwórz swój nowy formularz z selektorem dat w witrynie internetowej WordPress. Aby to zrobić, wystarczy kliknąć przycisk „Osadzanie” w górnej części kreatora formularzy.
Pojawi się wyskakujące okienko z prośbą o wybranie istniejącej strony do dodania formularza lub utworzenie nowej strony dla formularza od podstaw. Obie opcje korzystają z edytora bloków, więc kroki są dość podobne.

Dodawanie bloku 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ż posiadasz na swoim blogu lub witrynie internetowej WordPress i kliknij przycisk „Let’s Go!”.

Jeśli chcesz utworzyć nową stronę, kliknij przycisk „Utwórz nową stronę”.
Następnie nadaj swojej nowej stronie nazwę i kliknij „Let’s Go!”.

Obie te metody spowodują przejście do edytora bloków, w którym zobaczysz instrukcje dotyczące dodawania bloku WPForms.
Najpierw kliknij przycisk dodawania bloku „+”.

Następnie wpisz „WPForms” w pasku wyszukiwania bloku.
Wystarczy przeciągnąć i upuścić blok w dowolnym miejscu na stronie.

Wszystko, co musisz teraz zrobić, to kliknąć menu rozwijane.
Następnie wybierz utworzony formularz.

W panelu bocznym Block settings możesz dostosować style pól formularzy, etykiet i przycisków, aby wyglądały ładniej w twoim motywie WordPress.
Możesz zmienić rozmiar każdego elementu, promień obramowania i kolory.

Możesz teraz kliknąć przycisk „Aktualizuj” lub „Opublikuj”, aby formularz znalazł się na Twojej witrynie internetowej.
Powinno to wyglądać mniej więcej tak na twojej witrynie internetowej WordPress:

Jeśli chcesz wstawić widżet formularza w wpisie, a nie na stronie, możesz utworzyć nowy wpis lub otworzyć istniejący w edytorze bloków.
Następnie wystarczy wykonać te same kroki, aby dodać blok WPForms do strony, tak jak w tej metodzie.
Dodanie bloku WPForms do obszaru gotowego na widżet
Jeśli korzystasz z klasycznego motywu WordPress, być może zechcesz wyświetlić twój formularz w nagłówku, stopce lub panelu bocznym z obsługą widżetów. Może to być dobry pomysł, jeśli twój formularz jest dość krótki i nie zajmuje zbyt wiele miejsca.
Uwaga: Jeśli korzystasz z motywu blokowego, ta metoda nie będzie działać dla twojej witryny internetowej.
Aby to zrobić, wystarczy przejść do Wygląd „ Widżety z obszaru administracyjnego WordPress. Następnie przejdź do twojego obszaru gotowego na widżet i kliknij biały przycisk dodawania bloku „+” wewnątrz niego. Następnie można wyszukać blok WPForms.
Jeśli widzisz dwie opcje, możesz wybrać jedną z nich, ponieważ obie wykonują tę samą czynność.

Podobnie jak w poprzedniej metodzie, po prostu wybierz utworzony wcześniej formularz. W panelu bocznym Ustawienia bloku możesz skonfigurować wygląd tak, aby lepiej pasował do twojego motywu WordPress.
Po zakończeniu edycji kliknij przycisk „Aktualizuj”.

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

Osadzanie twojego formularza 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ą krótkiego kodu.
W wyskakującym okienku „Osadzanie na stronie” wystarczy kliknąć odnośnik „użyj krótkiego kodu”. Zobaczysz krótki kod, który możesz skopiować i wkleić na stronę, do wpisu lub obszaru gotowego na widżet.

Aby uzyskać więcej informacji na temat korzystania z krótkich kodów, przeczytaj nasz artykuł o tym, jak dodać krótki kod w WordPress.
Najlepsze wskazówki dotyczące optymalizacji twojego formularza WordPress
Teraz, gdy już wiesz, jak dodać selektor dat w formularzach WordPress, omówmy najlepsze wskazówki, aby przenieść twoje formularze na wyższy poziom:
- Wysyłaj e-maile z potwierdzeniem do osób przesyłających Twoje formularze – w ten sposób użytkownicy otrzymają powiadomienie o pomyślnym otrzymaniu zgłoszenia i nie zapomną, jaką datę i godzinę wybrali.
- Akceptuj płatności online w swoich formularzach – WPForms pomaga w obsłudze popularnych bramek płatności, takich jak Stripe, PayPal, Square i Authorize.Net. Możesz zbierać jednorazowe lub cykliczne płatności i nie ma żadnych dodatkowych opłat transakcyjnych.
- Spraw,aby twoje dłuższe formularze były konwersacyjne – jeśli masz formularz rejestracji na wydarzenie lub formularz rejestracji użytkownika, który musi przechwytywać wiele informacji, to uczynienie go konwersacyjnym może zwiększyć współczynnik wypełnienia formularza.
- Zapobieganie spamowi w formularzach kontaktowych – Możesz włączyć wbudowaną ochronę antyspamową WPForms i pole wyboru reCAPTCHA, aby odfiltrować spamerskie wpisy w formularzach.
- Tworzenie wielojęzycznych formularzy – Dotrzyj do różnych odbiorców i zwiększ dostępność swojej witryny internetowej dzięki formularzom wyświetlanym w wielu językach.
- Postępuj zgodnie z naszą listą najlepszych praktyk w zakresie projektowania formularzy kontaktowych – ten przewodnik może przeprowadzić Cię przez proces projektowania najlepszego formularza WordPress, który przekształci zwykłych odwiedzających w potencjalnych klientów lub klientów.
- Przeczytaj nasz przewodnik ekspercki na temat tworzenia interaktywnych formularzy – współzałożyciel WPForms, Jared Atchison, udziela wskazówek, jak sprawić, by formularze były bardziej angażujące, od korzystania z logiki warunkowej po dodawanie treści multimedialnych.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak utworzyć formularz WordPress z selektorem dat. Warto również zapoznać się z naszym artykułem na temat tworzenia wielostronicowych formularzy w WordPress ie i naszą ostateczną listą najlepszych wtyczek do ankiet WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Alessandra Del Puglia
hi, how can i do to disable certain days of the week?
Thanks
WPBeginner Support
Reach out to WPForms’ support for the current methods of limiting the days of the week
Admin