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

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.

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 WordPress na twojej witrynie internetowej, 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.

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.

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

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.

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

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

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