Cum să creați un formular WordPress cu un selector de dată (mod ușor)

Intrările inconsistente de date pot transforma un simplu formular WordPress într-un dezastru frustrant. Bare oblice, cratime, nume complete de luni – atunci când utilizatorii introduc date așa cum doresc, este inevitabil să vă confruntați cu un coșmar de date dezordonate care necesită ore pentru a fi curățat.

De aceea, adăugarea unui selector de date la formularele dvs. este o mișcare atât de inteligentă.

În loc să lăsați formatarea în seama utilizatorului, un selector de dată le oferă o interfață curată de calendar, făcând fiecare intrare uniformă și ușor de gestionat.

În acest ghid, vom împărtăși cea mai simplă modalitate de a crea un formular WordPress cu un selector de dată. Indiferent dacă creați formulare de rezervare, înregistrări la evenimente sau programări, acest mic upgrade vă poate ajuta atât pe dvs., cât și pe vizitatorii site-ului dvs. 🙌

De ce să creați un formular WordPress cu un selector de dată?

După ce am gestionat mii de formulare online în WordPress, am observat că câmpurile de formular legate de dată sunt adesea locul unde lucrurile merg prost. De fapt, formatele incorecte ale datei sunt unul dintre principalele motive pentru care trimiterile de formulare eșuează sau creează confuzie.

Un câmp de selectare a datei rezolvă aceste frustrări comune și îmbunătățește experiența utilizatorului. Am văzut că funcționează eficient pentru:

• Formulare de înregistrare care solicită utilizatorilor să introducă datele lor de naștere.
• Formulare de comandă pentru alegerea unei date și ore de livrare pentru o comandă.
• Formulare de închiriere pentru selectarea unei date de preluare sau predare pentru un articol închiriat.
• Formulare de solicitare de apel pentru a permite utilizatorilor să vă anunțe când doresc să fie contactați cu privire la produsele sau serviciile dvs.
• Formulare de solicitare concediu pentru a permite angajaților să introducă datele de început și de sfârșit pentru timpul lor liber.
• Formulare de programări sau rezervări pentru site-uri web de cazare sau servicii.

Partea cea mai bună? Un selector de dată asigură consistența în toate trimiterile. Nu mai trebuie să vă chinuiți dacă 03/04/2024 înseamnă 4 martie sau 3 aprilie, o durere de cap pe care am întâlnit-o prea des cu introducerea manuală a datelor.

Acestea fiind spuse, vă vom arăta cum să creați cu ușurință un formular WordPress cu un selector de dată. Iată pașii pe care îi vom acoperi și puteți folosi linkurile rapide de mai jos pentru a naviga prin ei:

• Pasul 1: Instalați pluginul WPForms
• Pasul 2: Alegeți un șablon de formular
• Pasul 3: Adaugă câmpul de selectare a datei în formularul tău WordPress
• Pasul 4: Configurați setările selectorului de dată și oră
• Pasul 5: Încorporați formularul WordPress pe site-ul dvs.
• 🎁 Pas bonus: Activați memento-urile pentru programări
• Întrebări frecvente: Cum să creați un formular WordPress cu un selector de dată
• Sfaturi definitive pentru optimizarea formularului dvs. WordPress

Să începem.

Pasul 1: Instalați pluginul WPForms

Am testat zeci de pluginuri pentru formulare și selectoare de date de-a lungul anilor, inclusiv opțiuni populare precum Ninja Forms și Gravity Forms.

Dar pentru adăugarea selectoarelor de date, am constatat că WPForms este cea mai ușor de utilizat soluție, în special pentru începătorii care doresc să creeze formulare cu aspect profesional fără a atinge niciun cod.

Pe lângă un selector de date, WPForms vine cu funcționalități premium precum logica condițională pentru a afișa sau ascunde câmpuri în funcție de selecțiile utilizatorului și calculatoare inteligente pentru a gestiona automat estimările de preț.

La WPBeginner, folosim de fapt WPForms pentru a crea majoritatea formularelor noastre și nu putem să-l recomandăm suficient. Puteți vedea recenzia noastră completă despre WPForms pentru mai multe detalii.

Mai întâi, trebuie să instalați WPForms pe site-ul dvs. web. Pentru instrucțiuni detaliate, este posibil să doriți să consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Pasul 2: Alegeți un șablon de formular

După activare, accesați pagina WPForms » Adăugare Nou din tabloul de bord WordPress.

Acest lucru vă va direcționa către pagina „Selectați un șablon”.

Înainte de a alege un șablon, este o idee bună să denumiți formularul dvs. WordPress, astfel încât să îl puteți identifica ușor mai târziu.

Apoi, veți alege cum veți construi formularul – folosind WPForms AI, un șablon predefinit sau de la zero.

Dacă dorești să folosești constructorul de formulare AI, tot ce trebuie să faci este să scrii o solicitare simplă. AI-ul va genera apoi formularul pentru tine instantaneu.

Pentru acest exemplu, vom folosi șablonul Simple Contact Form și apoi vom adăuga câmpul de selectare a datei. Dar nu ezitați să alegeți un șablon care vi se potrivește cel mai bine.

Derulând în jos pe pagina de configurare, veți vedea peste 2.000 de șabloane de formulare predefinite disponibile aici. Puteți utiliza bara de căutare pentru a restrânge alegerea.

Odată ce ați făcut alegerea, pur și simplu faceți clic pe butonul „Utilizați șablon”.

Pasul 3: Adaugă câmpul de selectare a datei în formularul tău WordPress

Acum veți ajunge la constructorul de formulare WPForms. Veți observa opțiunile de câmp în coloana din stânga și o previzualizare a formularului în partea dreaptă a ecranului.

Implicit, șablonul Formular de contact simplu are adăugate în formular doar câmpurile pentru nume, adresă de e-mail și comentarii.

Pentru demonstrație, vă vom arăta cum să adăugați un câmp de dată la formularul dvs. WordPress. Dar dacă șablonul dvs. îl are deja, atunci puteți sări la porțiunea de editare a acestui pas.

Ceea ce trebuie să faceți este să derulați în jos la secțiunea Câmpuri Fancy din coloana din stânga, unde veți vedea câmpul „Dată / Oră”.

Pur și simplu trageți și plasați acel câmp unde doriți pe formularul dvs. În acest tutorial, l-am plasat chiar sub câmpul Email.

Odată ce ați făcut acest lucru, faceți clic pe câmpul „Dată/Oră” pentru a-l edita. Aceasta va deschide fila „Opțiuni câmp” în partea stângă a ecranului.

De aici, puteți schimba eticheta câmpului, care implicit este „Dată / Oră”. Vom folosi „Ora preferată pentru apel telefonic” pentru câmpul nostru.

Puteți, de asemenea, să schimbați formatul datei câmpului utilizând meniul derulant Format derulant. Opțiunile sunt Dată și Oră, Doar Dată sau Doar Oră. Acest lucru poate fi util dacă doriți să utilizați doar o dată fără un câmp de oră pentru a colecta datele de naștere ale utilizatorilor.

În afară de aceasta, puteți completa textul de descriere pentru a oferi mai mult context despre ceea ce utilizatorul trebuie să introducă în câmp.

În final, puteți bifa căsuța „Obligatoriu” dacă doriți să faceți din acesta un câmp obligatoriu. Aceasta înseamnă că utilizatorul va trebui să selecteze o dată și o oră înainte de a putea trimite formularul.

După ce ați făcut acest lucru, faceți clic pe butonul „Salvare” din partea de sus pentru a stoca setările formularului.

Pasul 4: Configurați setările selectorului de dată și oră

Implicit, câmpul de selecție a intervalului de date de pe formularul dvs. WordPress va fi un calendar cu un meniu derulant pentru oră lângă el.

Data curentă va fi selectată, dar utilizatorul o poate schimba pentru a alege o altă dată. Formatul datei este lună/zi/an.

Între timp, lista derulantă pentru oră este setată implicit la un ceas de 12 ore cu intervale de 30 de minute.

Utilizatorii pot apoi alege un interval orar care li se potrivește cel mai bine.

În unele cazuri, este posibil să doriți să modificați setările selectorului de dată. De exemplu, poate țara dumneavoastră urmează formate de dată și oră zi/lună/an sau 24 de ore zi și oră, mai degrabă decât cele implicite.

Pentru a face acest lucru, va trebui să comutați la fila „Avansat” din partea de sus a panoului din stânga.

Aici, puteți ajusta dimensiunea câmpului de selecție a datei. Apoi, în secțiunea Dată, puteți schimba intervalul de date de la un calendar la un meniu derulant pentru dată.

Comutarea selectorului de calendar de dată la un meniu derulant de dată este o idee bună dacă formularul are spațiu limitat și calendarul pare destul de mic.

Iată cum arată meniul derulant pentru dată:

Mai jos, puteți schimba formatul datei din lună/zi/an (1/31/2024) în zi/lună/an (31/1/2024) sau Ziua lunii, An (31 ianuarie 2024).

Dacă alegeți selectorul de date calendaristice, puteți insera și text placeholder în câmpul „Dată”. Îl puteți completa cu formatul datei dvs. pentru a-i informa pe utilizatori ce format folosiți, astfel încât să nu se confunde.

În plus, puteți activa comutatorul „Limitare zile” pentru a ajusta intervalul de date care poate fi selectat. Acest lucru va fi util dacă desfășurați serviciile doar în timpul săptămânii.

Nu ezitați să dezactivați și datele trecute pentru a preveni selectarea lor.

Apoi, să trecem la secțiunea „Oră” pentru a schimba selectorul de ore.

Aici puteți schimba intervalul la 15 minute sau 1 oră în loc de 30 de minute. Este, de asemenea, bine să introduceți text placeholder aici pentru a arăta ce format de oră folosiți.

Selectorul de timp folosește implicit un ceas de 12 ore, dar îl puteți comuta la un ceas de 24 de ore dacă preferați.

De asemenea, nu ezitați să activați setarea „Limitare ore” pentru a specifica orele de început și de sfârșit ale serviciilor dumneavoastră. Astfel, utilizatorii nu pot face o programare în afara orelor de program ale afacerii dumneavoastră.

În afară de aceasta, puteți introduce un nume de clasă CSS pentru câmpul intervalului de date. Aceasta este o caracteristică avansată și opțională, dar o puteți folosi pentru a suprascrie stilul formularului folosind cod mai târziu.

Nu în ultimul rând, puteți ascunde eticheta câmpului formularului și/sau subeticheta, dacă este necesar.

Odată ce sunteți mulțumit de noul dvs. formular, îl puteți salva făcând clic pe butonul „Salvare” din colțul din dreapta sus al ecranului.

Pasul 5: Încorporați formularul WordPress pe site-ul dvs.

Acum sunteți gata să adăugați noul formular cu selectorul de dată pe site-ul dvs. WordPress. Pentru a face acest lucru, pur și simplu faceți clic pe butonul „Încorporare” din partea de sus a constructorului de formulare.

Va apărea un popup care vă va cere să selectați o pagină existentă la care să adăugați formularul sau să creați o pagină nouă pentru formular de la zero. Ambele opțiuni folosesc editorul de blocuri, deci pașii sunt destul de similari.

Adăugați blocul WPForms la o pagină existentă sau nouă

Pentru a insera formularul într-o pagină existentă, faceți clic pe butonul „Selectați pagina existentă”. După aceea, selectați una dintre paginile pe care le aveți deja pe blogul dvs. WordPress sau pe site-ul dvs. web și faceți clic pe „Să-i dăm drumul!”

Dacă doriți să adăugați formularul într-o pagină nouă, faceți clic pe butonul „Creare pagină nouă”.

Apoi, dați un nume noii pagini și faceți clic pe „Să începem!”

Ambele metode vă vor duce la editorul de blocuri, unde veți vedea instrucțiuni despre cum să adăugați blocul WPForms.

Mai întâi, faceți clic pe butonul „+” pentru a adăuga un bloc.

Apoi, tastați „WPForms” în bara de căutare a blocurilor.

Pur și simplu trageți și plasați blocul oriunde arată cel mai bine pe pagină.

Tot ce trebuie să faci acum este să dai clic pe meniul derulant.

Apoi, selectați formularul pe care tocmai l-ați creat.

În bara laterală cu setările blocului, poți personaliza stilurile câmpului, etichetei și butonului formularului pentru a le face să arate mai bine cu tema ta WordPress.

Puteți schimba dimensiunea fiecărui element, raza colțurilor și culorile.

Acum puteți face clic pe butonul „Actualizare” sau „Publicare” pentru a face formularul live pe site-ul dvs. web.

Ar trebui să arate cam așa pe site-ul dvs. WordPress:

Dacă doriți să inserați widgetul formularului într-o postare, mai degrabă decât într-o pagină, atunci puteți crea o nouă postare sau deschide una existentă în editorul de blocuri.

După aceea, urmați aceiași pași pentru a adăuga blocul WPForms într-o pagină, așa cum este descris în această metodă.

Adăugați blocul WPForms într-o zonă pregătită pentru widget-uri

Dacă utilizați o temă WordPress clasică WordPress, atunci s-ar putea să doriți să afișați formularul într-o zonă de antet, subsol sau bară laterală pregătită pentru widget-uri. Aceasta poate fi o idee bună dacă formularul dvs. este destul de scurt și nu ocupă prea mult spațiu.

Pentru a face acest lucru, accesați pur și simplu Aspect » Widgeturi din zona de administrare WordPress. Apoi, navigați la zona dorită pregătită pentru widgeturi și faceți clic pe butonul alb „+” pentru a adăuga un bloc în interiorul acesteia. După aceea, puteți căuta blocul WPForms.

Dacă vedeți două opțiuni, puteți alege oricare dintre ele, deoarece ambele fac același lucru.

Ca și în metoda anterioară, pur și simplu selectați formularul pe care tocmai l-ați creat mai devreme. În bara laterală a setărilor de bloc, puteți configura designul astfel încât să se potrivească mai bine temei dvs. WordPress.

Odată ce sunteți mulțumit de modificări, pur și simplu faceți clic pe butonul „Actualizare”.

Asta e tot!

Iată cum arată formularul nostru în partea de jos a unei postări de blog WordPress:

Încorporați formularul dvs. WordPress cu un Shortcode

Dacă blocul sau widget-ul WPForms nu funcționează, puteți adăuga formularul dvs. WordPress folosind un shortcode.

În fereastra pop-up „Încorporați într-o pagină”, pur și simplu faceți clic pe linkul „utilizați un shortcode”. Veți vedea apoi un shortcode pe care îl puteți copia și lipi într-o pagină, postare sau zonă pregătită pentru widget-uri.

Pentru mai multe informații despre cum să utilizați shortcode-uri, citiți articolul nostru despre cum să adăugați un shortcode în WordPress.

🎁 Pas bonus: Activați memento-urile pentru programări

Dacă folosiți formularul pentru a programa întâlniri sau rezervări, adăugarea de memento-uri automate poate face o mare diferență.

Conectarea formularului tău la serviciul tău de email marketing îți permite să trimiți memento-uri pentru programări, ajutând la reducerea absențelor și la menținerea organizării.

De asemenea, reasigură utilizatorii că trimiterea lor a fost reușită și că locul lor este confirmat.

Pentru a configura acest lucru, puteți urma ghidul nostru pas cu pas despre cum să trimiteți e-mailuri de confirmare persoanelor care trimit formulare. Cu doar câteva clicuri, vă puteți asigura că utilizatorii primesc un memento la timp despre data sau ora selectată. ⏰

Întrebări frecvente: Cum să creați un formular WordPress cu un selector de dată

Vă gândiți să adăugați un selector de date la formularele dvs. WordPress? Iată câteva întrebări frecvente pentru a vă ajuta să începeți.

Ce este un selector de dată în formularele WordPress?

Un selector de dată permite utilizatorilor să aleagă o dată dintr-un calendar. Ajută la asigurarea formatării consistente a datelor și reduce erorile de introducere.

Cum adaug un selector de oră în WordPress?

Dacă utilizați un constructor de formulare precum WPForms, trageți pur și simplu câmpul „Dată / Oră” în formularul dvs. Apoi, alegeți opțiunea „Oră” în setări.

Cum afișez data pe site-ul meu WordPress?

Puteți afișa datele folosind un widget, un shortcode sau un fragment de cod PHP personalizat.

WPCode este unul dintre cele mai bune pluginuri pentru fragmente de cod pentru WordPress. Face adăugarea de cod personalizat, inclusiv cel pentru afișarea datei de astăzi, pe site-ul dvs. super sigură și ușoară.

Cum inserez un selector de dată folosind HTML?

În HTML simplu, puteți utiliza: <input type="date">. Dar în WordPress, este mai ușor să utilizați un plugin de formulare pentru o mai bună compatibilitate și control.

Sfaturi definitive pentru optimizarea formularului dvs. WordPress

Acum că știți cum să adăugați un selector de date în formularele WordPress, să acoperim cele mai bune sfaturi pentru a vă duce formularele la nivelul următor:

• Acceptați plăți online în formularele dvs. – WPForms suportă gateway-uri de plată populare precum Stripe, PayPal, Square și Authorize.net. Puteți colecta plăți unice sau recurente, iar taxele suplimentare de tranzacție sunt zero.
• Transformați formularele dvs. mai lungi în formulare conversaționale – Dacă aveți un formular de înregistrare pentru evenimente sau utilizatori care necesită colectarea multor informații, transformarea acestuia într-un format conversațional poate crește rata de completare a formularului.
• Preveniți spam-ul formularelor de contact – Puteți activa protecția anti-spam încorporată a WPForms și caseta de selectare reCAPTCHA pentru a filtra intrările spam din formulare.
• Creați formulare multilingve – Ajungeți la un public divers și creșteți accesibilitatea site-ului dvs. web cu formulare care sunt afișate în mai multe limbi.
• Urmați lista noastră de cele mai bune practici pentru designul formularelor de contact – Acest ghid vă poate ajuta să proiectați cel mai bun formular WordPress pentru a transforma vizitatorii obișnuiți în potențiali clienți sau clienți.
• Citiți ghidul nostru expert despre crearea de formulare interactive – Co-fondatorul WPForms, Jared Atchison, vă oferă sfaturi despre cum să faceți formularele mai captivante, de la utilizarea logicii condiționale la adăugarea de conținut media bogat.

Sperăm că acest articol v-a ajutat să învățați cum să creați un formular WordPress cu un selector de dată. De asemenea, ați putea dori să consultați articolul nostru despre cum să creați un formular multi-pagină în WordPress și lista noastră completă a celor mai bune pluginuri de sondaje WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.