Cum să adăugați câmpuri de completare automată a adresei într-un formular WordPress?

Vă întrebați cum să adăugați un formular WordPress de completare automată a adresei pe site-ul dvs.? Atunci, acest articol este exact ceea ce aveți nevoie acum.

Dacă formularul dvs. WordPress are un câmp de adresă, vă sugerăm să adăugați caracteristica de completare automată la acesta. În acest fel, este mai ușor pentru utilizatorii dvs. să completeze câmpul de adresă și să trimită formularul cu succes.

De aceea, am pregătit un ghid detaliat despre cum să creați un formular WordPress de completare automată a adresei. Deci, citește până la sfârșit.

Dar înainte de tutorial, să discutăm despre beneficiile caracteristicii de completare automată a adresei și despre cea mai bună modalitate de a o adăuga în formular.

Cum este utilă opțiunea de completare automată a adresei într-un formular online?

Puteți utiliza doar un câmp obișnuit de adresă pentru orice formular WordPress. Deci, de ce să-i adăugați opțiunea de completare automată a adresei?

Ei bine, iată câteva moduri semnificative în care opțiunea de completare automată a adresei este utilă:

• Câmpul de completare automată a adresei sugerează automat locații utilizatorilor dvs. pe baza datelor introduse.
• Utilizatorii pot selecta adrese precise din lista de sugestii de adrese disponibile.
• Deoarece utilizatorii nu trebuie să introducă adresa completă, ei pot completa formularul relativ mai repede.
• Caracteristica de completare automată face ca completarea formularelor să fie ușoară și rapidă. Acest lucru poate ajuta la creșterea numărului de formulare trimise cu succes și la reducerea abandonului de formulare.

Prin urmare, este înțelept să includeți un câmp de adresă de completare automată în formularele dvs.

Cu toate acestea, WordPress nu oferă această funcție în mod implicit. Deci, care este cea mai bună alternativă a ta?

Vom acoperi cea mai bună modalitate de a adăuga un câmp de completare automată a adresei în secțiunea următoare.

Cel mai bun mod de a crea un formular WordPress de completare automată a adresei

Deoarece WordPress nu permite adăugarea funcției de completare automată a adresei în mod implicit, va trebui să vă bazați pe pluginuri.

Pluginul WordPress potrivit vă va permite să adăugați funcția în formularul dvs. fără bătăi de cap. Și un astfel de plugin este Everest Forms.

Popularul plugin de generare de formulare drag-and-drop poate fi completarea perfectă pentru site-ul dvs. WordPress.

Acest instrument puternic face totul! Vă permite să creați formulare personalizate fără a atinge o singură linie de cod.

Puteți folosi cele peste 20 de câmpuri de formular pentru a crea formulare de contact, formulare de cerere de lăsare, formulare de comandă sau orice formular de care aveți nevoie.

Mai mult, oferă un câmp de adresă unde puteți activa cu ușurință opțiunea de completare automată. Astfel, vă recomandăm pluginul Everest Forms ca fiind cea mai bună modalitate de a vă echipa formularele cu această caracteristică.

Cum să adăugați câmpuri de completare automată a adresei într-un formular WordPress?

În acest tutorial, am folosit formularele Everest pentru a demonstra procesul de realizare a unui formular WordPress de completare automată a adresei.

Urmați acești 7 pași simpli pentru a adăuga opțiunea de completare automată a adresei Google WordPress în formularul dvs.

Pasul 1: Instalați și activați Everest Forms Pro

Începeți prin a instala și activa pluginul Everest Forms Pro pe site-ul dvs. Această versiune premium funcționează pe lângă pluginul de bază gratuit Everest Forms.

Astfel, va trebui să configurați atât versiunile gratuite, cât și versiunile premium ale pluginului pentru ca funcția de completare automată a adresei să funcționeze.

Avem un ghid separat despre cum să configurați corect Everest Forms Pro pe site-ul dvs. web. Deci, verificați dacă aveți nevoie de ajutor pentru instalarea și activarea pluginului.

Pasul 2: Instalați și activați suplimentul de geolocație

Dacă ați configurat corect Everest Forms Pro, ar trebui să puteți accesa toate suplimentele disponibile. Vă rugăm să rețineți că suplimentele la care aveți acces depind de planul pe care l-ați achiziționat.

Deci, deschide Everest Forms >> Add-ons în tabloul de bord WordPress.

Derulați în jos pentru a găsi suplimentul de geolocație și faceți clic pe Instalare supliment . Pentru a finaliza instalarea, apăsați apoi butonul Activare .

Acest lucru va configura suplimentul pe care să îl utilizați în formularele dvs. WordPress.

Pasul 3: Obțineți cheia API din Consola Google

Al treilea pas este să obțineți cheia API de la Google Console. Acest lucru vă va ajuta să conectați pluginul Everest Forms la Google Console.

Mai întâi, accesați Tabloul de bord Google Console. Trebuie să fiți conectat prin Contul dvs. Google pentru a accesa acest tablou de bord.

Apoi, selectați proiectul dvs. din partea de sus a tabloului de bord.

Dacă nu aveți deja un proiect, puteți crea unul făcând clic pe Proiect nou . Apoi, dați un nume proiectului și apăsați pe Creare .

După ce alegeți proiectul, veți ajunge la pagina API-uri și servicii pentru proiect.

Să presupunem că nu sunteți redirecționat automat către această pagină. În acest caz, îl puteți deschide anual din meniul de navigare din stânga sus.

Apăsați meniul și deschideți API-uri și servicii >> API-uri și servicii activate .

Aici, faceți clic pe +ACTIVARE APIS ȘI SERVICII .

În biblioteca API, căutați API-ul Places și activați -l.

Notă: Pentru a activa cu succes API-ul, trebuie să aveți un cont de facturare. Prin urmare, activați facturarea pentru Google Cloud Console înainte de a continua.

După ce ați activat API-ul, navigați la API-uri și servicii >> Acreditări . Acum, faceți clic pe +Creați acreditări și apoi selectați Cheia API .

Aceasta generează o nouă cheie API pentru dvs. Dar înainte de a copia cheia API, trebuie să îi adăugați câteva restricții. Pentru aceasta, faceți clic pe Edit Key .

În primul rând, trebuie să setați o restricție de aplicație . Acest lucru vă permite să limitați site-urile web, adresele IP sau aplicațiile care pot folosi cheia API. În cazul nostru, să alegem Site-uri web .

Apoi, adăugați site-ul web unde cheia API va fi validă și apăsați Terminat . Puteți adăuga mai multe site-uri web dacă aveți nevoie.

După aceea, trebuie să setați Restricțiile API alegând butonul radio Restrict key . Acest lucru vă permite cheii să știe ce API-uri activate poate apela.

Deoarece avem nevoie doar de API-ul Places, să o alegem din meniul drop-down. Puteți activa și adăuga mai multe API-uri precum Maps JavaScript API conform cerințelor.

În cele din urmă, apăsați butonul Salvare .

Tot ce trebuie să faceți acum este să copiați cheia pentru o utilizare ulterioară. Păstrați-l în siguranță, deoarece veți avea nevoie de el pentru următorul pas.

Pasul 4: Adăugați cheia API la setările de localizare geografică

Înapoi în tabloul de bord WordPress, accesați Formulare Everest >> Setări >> Localizare geografică .

Inserați cheia API pe care ați copiat-o în câmpul Cheie API Google Places . După aceea, apăsați butonul Salvare modificări .

Aceasta completează conexiunea dintre API-ul Google Places și formularele Everest.

Mai există o opțiune, Locația curentă , în setările de geolocalizare . Când activați această opțiune, formularele dvs. detectează și completează automat locația curentă a utilizatorului în câmpul Adresă .

Este complet opțional, așa că dacă îl porniți sau nu depinde de cerințele dvs.

Pasul 5: Creați un formular nou cu câmp de adresă

Ați conectat cu succes Everest Forms la API-ul Google Places. Cu toate acestea, mai aveți nevoie de formularul în care se aplică caracteristica de completare automată a adresei.

Pentru asta, trebuie să creați un nou formular WordPress cu câmpul Adresă .

Întrebarea este: ce tip de formă faci? Ei bine, depinde în întregime de tine!

Cel mai bun lucru despre Everest Forms este că vă permite să creați orice tip de formular de care aveți nevoie. Formulare de contact, formulare de sondaj, formulare de cerere de locuri de muncă, formulare de rezervare și așa mai departe.

Prin urmare, accesați Formulare Everest >> Adăugați nou .

Everest Forms oferă mai multe șabloane prefabricate pentru diferite formulare. Astfel, puteți personaliza unul dintre ele dacă aveți puțin timp.

Dar proiectarea unui formular de la zero este la fel de ușor! Doar trageți și plasați câmpurile necesare și personalizați-le.

Vom construi un formular de contact simplu cu un câmp de adresă de la zero pentru acest ghid.

Deci, faceți clic pe Începeți de la zero . Apoi, introduceți titlul formularului și apăsați Continuare .

Aceasta vă duce la generatorul de formulare. După cum puteți vedea, toate câmpurile formularului sunt grupate în stânga. Le puteți trage și plasa în rândurile de formular din dreapta.

Astfel, adăugați orice câmpuri de care aveți nevoie în formular, cum ar fi Nume , E- mail , Subiect , Mesaj și, cel mai important, Adresă .

Când formularul WordPress de completare automată a adresei este complet, apăsați butonul Salvare din partea de sus pentru a salva noul formular.

Pasul 6: Activați completarea automată a adresei pentru câmpul de adresă

Cu fiecare câmp, aveți o mulțime de opțiuni de personalizare. De asemenea, aveți mai multe opțiuni pentru câmpul Adresă , una dintre ele fiind caracteristica de completare automată a adresei.

Deși aici ne concentrăm pe câmpul Adresă , asigurați-vă că personalizați și celelalte câmpuri.

Faceți clic pe câmpul pe care doriți să îl editați; opțiunile sale de personalizare se vor deschide în stânga.

De aici, puteți modifica câmpul Label , Description , Field Visibility , etc. Puteți, de asemenea, să activați Obligatoriu , Activați Tooltip , Ascundeți eticheta și să adăugați clase CSS .

În plus, veți putea seta logica condiționată și pentru câmpurile individuale.

Dar să revenim la câmpul nostru principal aici. Pe măsură ce faceți clic pe câmpul Adresă , Opțiunile câmpului afișează opțiuni similare cu cele discutate mai sus.

Cu toate acestea, Opțiunile avansate includ unele caracteristici organizate pentru câmpul Adresă .

De exemplu, puteți modifica substituentul și valoarea implicită pentru linia de adresă 1 , linia de adresă 2 , țara etc. În plus, puteți alege țările pe care doriți să le puneți la dispoziție utilizatorilor din Lista de țări implicite .

Cel mai important, puteți activa funcția de completare automată a adresei bifând caseta de selectare.

Apăsați butonul Salvați , iar câmpul dvs. Adresă va sugera automat locuri utilizatorilor care completează formularul.

Pasul 7: Afișați formularul WordPress de completare automată a adresei pe site-ul dvs

Felicitări! Sunteți la pasul final al acestui tutorial!

Deoarece formularul WordPress de completare automată a adresei este gata, trebuie să îl adăugați la front-end-ul site-ului dvs.

Everest Forms vă permite să faceți acest lucru în câțiva pași simpli.

Începeți prin a deschide pagina sau postarea în care doriți să adăugați formularul WordPress.

Odată ce vă aflați în editorul Gutenberg, selectați butonul de inserare a blocurilor ( + ).

Căutați blocul Everest Forms și adăugați-l la pagină/postări făcând clic pe el.

Apoi, alegeți formularul cu câmpul de completare automată a adresei din meniul drop-down. Acest lucru adaugă automat formularul în pagină/postare.

În cele din urmă, apăsați butonul Actualizare din partea de sus.

De asemenea, puteți adăuga formularul la o pagină/postare complet nouă. Doar urmați aceiași pași și apăsați butonul Publicare de la sfârșit. Și ai terminat!

Formularul WordPress de completare automată a adresei este acum accesibil utilizatorilor dvs. din partea frontală.

Încheierea

După cum vă puteți da seama până acum, construirea unui formular de completare automată a adresei Google WordPress este foarte ușoară. Mai ales când aveți la îndemână pluginul Everest Forms.

Acest plugin incredibil vă permite să vă conectați rapid formularele la Consola Google. Deci, utilizatorii dvs. pot completa cu ușurință câmpul Adresă folosind funcția de completare automată.

Dar știai? Everest Forms are mult mai multe de oferit.

Îl puteți folosi pentru a personaliza șabloanele de e-mail, a programa trimiterea formularelor, a completa automat câmpurile de formular și multe altele.

Citiți totul despre acest plugin pe blogul nostru. Consultați canalul nostru YouTube pentru tutoriale video ușoare, dacă sunteți un învățător vizual.

De asemenea, urmăriți pe Twitter și Facebook pentru actualizări despre postările săptămânale.