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 czemu każdy wpis jest jednolity i łatwy do zarządzania.

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?

Po zarządzaniu tysiącami formularzy online w WordPress zauważyliśmy, że pola formularzy związane z datami są często miejscem, w którym pojawiają się problemy. W rzeczywistości nieprawidłowe formaty dat są jednym z głównych powodów, dla których zgłoszenia formularzy zawodzą lub powodują zamieszanie.

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

• Formularze rejestracyjne, które proszą użytkowników o podanie daty urodzenia.
• Formularze zamówień do wyboru daty i godziny dostawy zamówienia.
• Formularze wypożyczalni do wyboru daty odbioru lub zwrotu przedmiotu.
• Formularze prośby o oddzwonienie, aby umożliwić użytkownikom poinformowanie Cię, kiedy chcą zostać skontaktowani w sprawie Twoich produktów lub usług.
• Formularze wniosków o urlop, aby umożliwić pracownikom wprowadzanie dat rozpoczęcia i zakończenia ich wolnego.
• Formularze rezerwacji lub formularze rezerwacji dla stron internetowych z zakwaterowaniem lub usługami.

Najlepsze? Wybierak daty zapewnia spójność wszystkich zgłoszeń. Koniec z zastanawianiem się, czy 03/04/2024 oznacza 4 marca, czy 3 kwietnia – ból głowy, którego zbyt często doświadczaliśmy przy ręcznym wprowadzaniu danych.

Mając to na uwadze, pokażemy Ci, jak łatwo stworzyć formularz WordPress z selektorem daty. Oto kroki, które omówimy, a poniższe szybkie linki pozwolą Ci się przez nie poruszać:

• Krok 1: Zainstaluj wtyczkę WPForms
• Krok 2: Wybierz szablon formularza
• Krok 3: Dodaj pole wyboru daty do swojego formularza WordPress
• Krok 4: Skonfiguruj ustawienia selektora daty i godziny
• Krok 5: Osadź formularz WordPress na swojej stronie internetowej
• 🎁 Krok bonusowy: Włącz przypomnienia o spotkaniach
• FAQ: Jak utworzyć formularz WordPress z selektorem daty
• Najlepsze wskazówki dotyczące optymalizacji formularza WordPress

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 wyświetlania lub ukrywania pól w zależności od wyborów użytkownika oraz inteligentne kalkulatory do automatycznego obsługiwania szacunków cenowych.

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.

Najpierw musisz zainstalować WPForms na swojej stronie internetowej. Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

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 Simple Contact Form zawiera w formularzu tylko pola imienia, adresu 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.

Musisz przewinąć w dół do sekcji Fancy Fields w lewej kolumnie, gdzie zobaczysz pole „Data / Godzina”.

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 dropdown menu. Opcje to Data i czas, Data lub Tylko czas. 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ż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, ale użytkownik może ją zmienić, aby wybrać inną datę. Format daty to miesiąc/dzień/rok.

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 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 wypełnić je swoim formatem daty, aby użytkownicy wiedzieli, jakiego formatu używasz, aby nie byli zdezorientowani.

Dodatkowo możesz włączyć przełącznik „Ogranicz dni”, aby dostosować zakres dat, które można wybrać. Będzie to przydatne, jeśli świadczysz swoje usługi tylko w dni powszednie.

Możesz również wyłączyć przeszłe daty, aby zapobiec ich zaznaczeniu.

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, 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ć 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 obszarze paska bocznego 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ą krótkiego kodu.

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, jak wysyłać e-maile z potwierdzeniem do osób wypełniających formularz. Za pomocą 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.

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

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.
• Zapobieganie spamowi w formularzach kontaktowych – Możesz włączyć wbudowaną ochronę antyspamową WPForms i pole wyboru reCAPTCHA, aby filtrować spamowe zgłoszenia 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.
• Śledź naszą listę najlepszych praktyk projektowania formularzy kontaktowych – Ten przewodnik pomoże Ci zaprojektować najlepszy formularz WordPress, który przekształci zwykłych odwiedzających w potencjalnych klientów lub klientów.
• Przeczytaj nasz poradnik 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 używania logiki warunkowej po dodawanie multimediów.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć formularz WordPress z polem wyboru daty. Możesz również zapoznać się z naszym artykułem na temat jak utworzyć wielostronicowy formularz w WordPress oraz naszą ostateczną listą najlepszych wtyczek do ankiet w 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.