Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak utworzyć formularz WordPress z selektorem dat (prosty sposób)

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Czy chcesz utworzyć formularz WordPress z selektorem dat?

Pole wyboru daty to wygodny sposób na przechwytywanie informacji związanych z datą w twoich formularzach WordPress. Na przykład, możesz potrzebować znać daty urodzenia twoich użytkowników lub chcesz, aby mogli łatwo umówić się na spotkanie w celu skorzystania z twoich usług za pośrednictwem twoich formularzy.

W tym artykule pokażemy, jak łatwo stworzyć formularz WordPress z selektorem dat.

How to Create a WordPress Form With a Date Picker

Po co tworzyć formularz WordPress z selektorem dat?

Pole wyboru daty w formularzu WordPress jest przydatne, gdy chcesz, aby użytkownicy wprowadzali daty. Typowe przykłady obejmują:

  • 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.

Pole wprowadzania daty jest znacznie łatwiejszym sposobem dla użytkowników na wstawienie daty w porównaniu do ręcznego jej wybierania. Zapewnia to, że format daty pozostaje spójny we wszystkich przesłanych formularzach, zmniejszając liczbę błędów i poprawiając komfort użytkowania.

Powiedziawszy to, zobaczmy, jak łatwo stworzyć formularz WordPress z selektorem dat. Możesz użyć tych szybkich odnośników, aby poruszać się po tym artykule:

Krok 1: Zainstaluj wtyczkę WPForms i wybierz szablon

Pierwszym krokiem jest instalacja WPForms. Jest to najlepsza na rynku wtyczka do formularzy kontaktowych WordPress, która ułatwia tworzenie wszelkiego rodzaju formularzy na twojej witrynie WordPress, w tym formularzy z polami wyboru daty.

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.

Więcej szczegółów można znaleźć w naszej pełnej recenzji WPForms.

Po włączaniu, przejdź do strony WPForms ” Add New z twojego kokpitu WordPress.

Clicking Add New in WPForms inside the WordPress admin panel

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ć.

Naming a new form in WPForms

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”.

Clicking the Use Template button in WPForms

Krok 2: 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.

Dragging and dropping the Date Time field to the form builder in WPForms

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.

Configuring the General settings of a form in WPForms

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: jedno dla daty przyjazdu, a drugie dla daty wyjazdu.

Krok 3: Konfiguracja zaawansowanych opcji 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.

The default Date Time picker calendar in WPForms

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.

The default time dropdown picker in WPForms

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.

Choosing the Date Dropdown type in WPForms

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:

An example of WPForms' date dropdown menu

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.

Configuring the date picker's advanced settings in WPForms

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.

The Limit Days and Disable Past Dates settings for the Date Time field in WPForms

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.

Configuring the advanced settings of the time picker field in WPForms

Krok 4: 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.

The Embed popup in WPForms

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!”.

Choosing an existing page to add a WPForms form to

Jeśli chcesz utworzyć nową stronę, kliknij przycisk „Utwórz nową stronę”.

Następnie nadaj swojej nowej stronie nazwę i kliknij „Let’s Go!”.

Creating a new page to insert the WPForms form into

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 „+”.

Clicking the add block button in the block editor to insert the WPForms block

Następnie wpisz „WPForms” w pasku wyszukiwania bloku.

Wystarczy przeciągnąć i upuścić blok w dowolnym miejscu na stronie.

Searching for the WPForms block in the block editor

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

Następnie wybierz utworzony formularz.

Select a WPForms form to insert in the block editor

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.

The WPForms block settings sidebar in the block editor

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:

An example of a contact form with a date picker made with WPForms

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ść.

Adding the WPForms block in a widget-ready area

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”.

The WPForms widget settings sidebar

To wszystko!

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

An example of a WPForms form widget with a date picker field

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.

Clicking the use a shortcode link in the WPForms embed popup

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ć pole wyboru daty do twoich formularzy, 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 formularzachWPForms 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 kontaktowychMożesz włączyć wbudowaną ochronę antyspamową WPForms i pole wyboru reCAPTCHA, aby odfiltrować spamerskie wpisy w formularzach.
  • Postępuj zgodnie z naszą listą najlepszych praktyk w zakresie projektowania formularzy kontaktowychten 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 formularzywspół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.

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

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

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

Reader Interactions

3 komentarzeZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      Reach out to WPForms’ support for the current methods of limiting the days of the week :)

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.