Cum se adaugă Autocomplete pentru câmpurile de adrese în WordPress

Recent, unul dintre utilizatorii noștri ne-a întrebat cum să adăugăm autocompletare pentru câmpurile de adrese în formularele WordPress. Completarea automată permite utilizatorilor să selecteze rapid adresa de la sugestii generate în timp real în timp ce tastează. În acest articol, vă vom arăta cum să adăugați completarea automată a câmpurilor de adrese în WordPress utilizând API-ul Google Locații.

Tutorial video

Dacă nu vă place videoclipul sau aveți nevoie de mai multe instrucțiuni, continuați să citiți.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați funcția Autocompletare adresă utilizând pluginul Google Place Api. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să vizitați Setări »Autocompletare Google pentru a configura setările pluginului.

Vi se va solicita să introduceți cheia API Google Locații. Această cheie API permite site-ului dvs. să se conecteze la Hărți Google și să extragă sugestii de completare automată din baza lor de date în timp real.

Mergeți pe site-ul web al Consolei pentru dezvoltatori Google și creați un nou proiect.

Va apărea un pop-up care vă cere să furnizați un nume pentru proiectul dvs. Utilizați un nume care vă va ajuta ulterior să identificați proiectul și apoi faceți clic pe butonul de creare.

Mesajul va dispărea, așteptați câteva secunde și veți fi redirecționat automat la noul dvs. proiect.

Acum veți vedea lista de API-uri Google populare pe care le puteți activa pentru proiectul dvs. Trebuie să localizați și să dați clic pe "Serviciul Web API Google Locații".

Aceasta vă va duce la o pagină de ansamblu care explică modul în care funcționează acest API. Trebuie să faceți clic pe linkul Activare pentru a continua.

Consola de dezvoltatori va activa acum API-ul Google Locații pentru proiectul dvs..

Cu toate acestea, veți avea în continuare nevoie de acreditări pentru a utiliza API-ul pe site-ul dvs. Web. Deci, mergeți mai departe și faceți clic pe butonul de creare a acreditărilor pentru a continua.

În ecranul următor, trebuie să dați clic pe "Ce acreditări am nevoie?" buton.

Consola pentru dezvoltatori vă va arăta acum cheia API. Trebuie să copiați această cheie și să o lipiți sub setările pluginului de pe site-ul dvs. WordPress.

Totuși, trebuie să activați un alt API în proiectul dvs. Google Developers. Faceți clic pe bibliotecă din Consola pentru dezvoltatori Google și apoi faceți clic pe "API JavaScript JavaScript Google".

Aceasta vă va duce la pagina de prezentare generală a API unde trebuie să dați clic pe linkul "Activați" pentru a continua.

Acest API nu are nevoie de o cheie suplimentară API, deci acum sunteți bine să mergeți.

Activarea adresei de completare automată în câmpurile Formular WordPress

Puteți adăuga o funcție de completare automată la orice câmp de formular creat de orice plugin WordPress builder form.

Vom folosi WPForms în acest tutorial. Cu toate acestea, aceste instrucțiuni vor funcționa indiferent de pluginul de formă de contact pe care îl utilizați.

Mai întâi trebuie să creați o formă care să aibă un câmp de adresă sau un set de câmpuri de adrese.

Odată ce ați terminat, adăugați acest formular pe site-ul dvs., așa cum ați face în mod normal.

Apoi, accesați postarea sau pagina pe care ați adăugat formularul. Trebuie să faceți clic dreapta pe câmpul de adresă și să selectați "Inspectați" din meniul browserului.

Veți vedea valorile clasei de nume, ID și CSS pentru câmpul de adresă.

De exemplu, în această captură de ecran, valoarea numelui formularului nostru este wpforms [câmpurile] [9] [Adresa1], Valoarea ID este wpforms-352-field_9, și clasa CSS este wpforms-camp-adresa-Adresa1.

Trebuie să copiați doar una dintre aceste valori și să o lipiți în pagina cu setările pluginului.

Dacă doriți să vizați mai multe câmpuri în mai multe formulare, atunci puteți adăuga o virgulă și adăugați o altă valoare.

Nu uitați să faceți clic pe butonul de salvare pentru a stoca modificările.

Asta e tot, acum puteți vizita pagina dvs. de formular și încercați să introduceți o adresă. Câmpul de formular va începe să afișeze automat sugestii utilizând locațiile Google și Google Maps.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați completarea automată a câmpurilor de adrese în WordPress. Ați putea dori, de asemenea, să vedeți lista noastră de 24 trebuie să aibă pluginuri WordPress pentru site-urile de afaceri.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.