Jak utworzyć formularz WordPress z selektorem dat

Czy chcesz, aby ludzie wybrali datę wypełnienia formularza na Twojej stronie?

Być może chcesz wiedzieć, kiedy do nich zadzwonić, a może chcesz zebrać informacje, takie jak data urodzenia itp. W tym miejscu może pomóc pole wyboru daty.

W tym artykule pokażemy, jak utworzyć formularz WordPress z selektorem dat.

Adding a date picker to a WordPress form

Tworzenie formularza WordPress z selektorem dat

W tym samouczku użyjemy WPForms . Jest to jedna z najlepszych wtyczek do formularzy kontaktowych i można jej używać do wszelkiego rodzaju różnych formularzy.

Musisz zainstalować i aktywować wtyczkę WPForms w swojej witrynie. Jeśli nie masz pewności, jak to zrobić, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym , jak zainstalować wtyczkę WordPress .

Po aktywacji wtyczki przejdź do WPForms »Dodaj nowy na pulpicie WordPress.

Creating a new form using WPForms

Pojawi się konstruktor WPForms. Najpierw wpisz nazwę formularza. Następnie najedź kursorem myszy na szablon i kliknij przycisk, aby go zaznaczyć. Wykorzystamy szablon Prostego Formularza Kontaktowego.

Selecting the Simple Contact Form template to start building your form

WPForms automatycznie utworzy formularz dla Ciebie przy użyciu tego szablonu. Oto domyślny prosty formularz kontaktowy.

The default contact form created by WPForms

Możesz teraz edytować formularz w dowolny sposób.

Dodajmy pole wyboru daty.

W kreatorze formularzy zobaczysz wszystkie pola, które możesz dodać do formularza w prawej kolumnie. Przewiń w dół do sekcji Fancy Fields, a zobaczysz pole Data / godzina.

The Date / Time field under the Fancy Fields section

Przeciągnij i upuść pole w wybranym miejscu w formularzu. Umieściliśmy go tuż pod polem E-mail w naszym formularzu.

The Date/Time field added to the form

Następnie kliknij pole, aby je edytować. Spowoduje to wyświetlenie zakładki „Opcje pola” po lewej stronie ekranu.

Możesz zmienić etykietę pola, która domyślnie to „Data / Czas”. W naszym polu użyjemy „Preferowanego czasu rozmowy telefonicznej”.

Możesz również zmienić format pola za pomocą menu rozwijanego Format. Na przykład możesz chcieć użyć tylko daty i bez godziny, na przykład w polu daty urodzenia.

Możesz również zaznaczyć pole Wymagane, jeśli chcesz, aby było to pole obowiązkowe. Oznacza to, że przed przesłaniem formularza użytkownik będzie musiał wybrać datę i godzinę.

Editing the date/time field to change the options

Możesz również dodać dowolne inne nowe pola, których chcesz użyć. Wystarczy kliknąć zakładkę „Dodaj pola”, a następnie przeciągnąć i upuścić pole na swoje pole. Aby edytować pole, po prostu je kliknij.

Ustawianie opcji zaawansowanych dla selektora daty

Domyślnie selektorem dat w formularzu będzie kalendarz z rozwijanym menu czasu obok niego. Użytkownik po prostu klika dzień, aby wybrać tę datę.

The default date picker (calendar style)

Lista rozwijana czasu jest domyślnie ustawiona na zegar 12-godzinny z 30-minutowymi interwałami, na przykład:

The default time picker (dropdown list at 30 minute intervals)

Możesz zmienić sposób działania selektora daty. To łatwe w WPForms. Na karcie Opcje pola przewiń w dół do opcji Zaawansowane.

Następnie kliknij strzałkę, aby otworzyć tę sekcję.

Viewing and changing the Advanced Options for the Date/Time field

Tutaj możesz dokonać wielu zmian. Na przykład możesz chcieć zmienić format daty. Wartość domyślna to mm/dd/rrrr.

Selecting the date format from the Date Options dropdown

Możesz także przełączyć się z selektora dat na listę rozwijaną dat, jeśli wolisz. W tym przypadku użytkownik wybiera miesiąc, dzień i rok z menu rozwijanych, na przykład:

The Date Dropdown field in action in a form

Możesz także zmienić selektor czasu. Domyślnie jest to zegar 12-godzinny, ale jeśli wolisz, możesz przełączyć go na zegar 24-godzinny. Możesz również zmienić interwały na 15 minut lub 1 godzinę zamiast 30 minut.

Changing the time intervals for your date picker

Gdy będziesz zadowolony z formularza, możesz go zapisać, klikając przycisk Zapisz w prawym górnym rogu.

Możesz również skonfigurować swój formularz, aby osoba wypełniająca formularz otrzymała kopię przesłanych przez siebie danych.

Może to być pomocne, na przykład, jeśli umawiają się z Tobą na rozmowę. Otrzymają e-mail z zapisem czasu połączenia, który zarezerwowali.

Możesz to zrobić, postępując zgodnie z instrukcjami zawartymi w naszym samouczku dotyczącym tworzenia formularza kontaktowego z wieloma odbiorcami .

Dodawanie formularza do Twojej witryny

Możesz dodać formularz do istniejącej strony (lub posta) w swojej witrynie lub utworzyć nową. Aby utworzyć nową stronę, przejdź do Strony » Dodaj nową na pulpicie WordPress.

Następnie musisz dodać nowy blok do swojej strony. Kliknij (+), aby dodać blok, a następnie wybierz blok WPForms. Możesz go znaleźć w sekcji Widżety lub możesz go wyszukać za pomocą paska wyszukiwania.

Adding the WPForms block to your page or post

Następnie musisz wybrać swój formularz z rozwijanego menu WPForms, w następujący sposób:

Selecting the correct form from the WPForms dropdown

To wszystko, co musisz zrobić. Możesz teraz opublikować swoją stronę, a formularz będzie widoczny w Twojej witrynie. Powinno to wyglądać mniej więcej tak:

The finished date picker form live on the website

Uwaga: Styl formularza będzie zależeć od motywu WordPress , którego używasz.

Wszystkie formularze utworzone za pomocą WPForms są po wyjęciu z pudełka przyjazne dla urządzeń mobilnych i będą działać na dowolnych urządzeniach mobilnych. Narzędzie do wybierania daty WPForms jest również przyjazne dla urządzeń mobilnych i działa na wszystkich rozmiarach ekranu.

Mobile preview of date picker in a WordPress form

Zawsze dobrze jest przetestować swój formularz, aby upewnić się, że działa zgodnie z oczekiwaniami. Jeśli nie otrzymujesz wiadomości e-mail, ale masz pewność, że ustawienia powiadomień są prawidłowe, nasz artykuł na temat jak naprawić problem z brakiem wysyłania wiadomości e-mail przez WordPress powinien pomóc.

Możesz wprowadzić zmiany w swoim formularzu, przechodząc do WPForms » Wszystkie formularze . Następnie wystarczy kliknąć tytuł formularza lub link Edytuj pod tytułem, aby go edytować.

Editing a form you've already created in WPForms

Po zapisaniu formularza zostanie on automatycznie zaktualizowany w Twojej witrynie.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się tworzyć formularz WordPress z selektorem dat. Możesz również zapoznać się z naszymi artykułami na temat jak blokować spam formularzy kontaktowych w WordPress i jak śledzić i zmniejszać porzucanie formularzy w WordPress .

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku .