Recent, unul dintre utilizatorii noștri ne-a întrebat cum să adăugăm completarea automată pentru câmpurile de adresă formulare de WordPress. Completarea automată permite utilizatorilor să selecteze rapid adresa din sugestiile generate în timp real pe măsură ce scriu.

În acest tutorial, vă vom arăta cum să adăugați completarea automată pentru câmpurile de adrese de pe WordPress folosind „ Adresele Google API ".

Cum se adaugă completarea automată pe wordpress 1

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul " Autocompletarea adresei utilizând Google Place Api “. Pentru mai multe detalii, consultați ghidul nostru pas cu pas cum să instalați un plugin WordPress.

După activare, trebuie să vizitați locația " Setări> Completare automată Google Pagina pentru a configura setările pluginului.

Configurați completarea automată pe wordpress

Vi se va solicita să introduceți cheia API Google Places. Această cheie API vă permite site-ul web pentru a se conecta cu Google Maps și a prelua sugestii din baza lor de date în timp real.

Accesați „ Consola pentru dezvoltatori Google Pentru a crea un proiect nou.

Google dezvoltă consola

Va apărea o fereastră care vă solicită să furnizați un nume pentru proiectul dvs. Folosiți un nume care vă va ajuta să identificați proiectul ulterior, apoi faceți clic pe butonul „Creați”.

Popup-ul va dispărea, așteptați câteva secunde și veți fi redirecționat automat către noul dvs. proiect.

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

Lista tastelor API Google

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

Activarea modulului serviciului web API API Google

Consola pentru dezvoltatori va activa API-ul Google Place pentru proiectul dvs.

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

Creați acreditări

În ecranul următor, trebuie să faceți clic pe butonul „Ce acreditări am nevoie”.

Orice informație de care am nevoie

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

Copiați o cheie API Google

Trebuie să activați întotdeauna o altă cheie API în proiectul Google Developers. Faceți clic pe biblioteca din Consola pentru dezvoltatori Google, apoi faceți clic pe „ API-ul Google Maps JavaScript ".

Google Maps javascript api

Aceasta vă va duce la pagina „Prezentare API”, unde trebuie să faceți clic pe linkul „Activare” pentru a continua.

google maps javascript api

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

Cum să activați completarea automată în câmpurile de formular

Puteți adăuga o funcție de completare automată în câmpurile create de pluginurile de creare formulare.

Vom folosi WPForms în acest tutorial. Cu toate acestea, acest plugin poate funcționa cu aproape orice plugin de constructor. formă.

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

După ce ați terminat, adăugați asta formă dumneavoastră site-ul web asa cum ai face de obicei.

Apoi accesați articolul sau pagina în care ați adăugat formularul. Trebuie să faceți clic dreapta pe câmp și să selectați „Inspectați” din meniul browserului.

Wordpress formular wpforms câmp de adresă

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

De exemplu, în această capturare, numele atributului " wpforms [câmpurile] [9] [address1] Valoarea ID este " wpforms-352-field_9 Iar clasa CSS este " wpforms-camp-adresa-address1 ".

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

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

Adăugați adrese din câmpurile wordpress

Nu uitați să faceți clic pe butonul « Registru Pentru a salva modificările.

Gata, acum puteți vizita pagina formularului și puteți încerca să introduceți o adresă. Câmpul formularului va începe să afișeze sugestii utilizând Google Locații și Google Maps.

Google și locația Google Maps

Acest lucru este totul pentru acest tutorial, sper că vă va permite să adăugați completarea automată în câmpurile WordPress.