Cum să încorporați o hartă Google în formularele de contact (cu codul pentru hartă)

Doriți să afișați o hartă pe formularul de contact al site-ului dvs. web?

Puteți utiliza geolocalizarea pentru a completa adresa unui utilizator și pentru a indica locația acestuia prin plasarea unui indicator pe o hartă. Acest lucru face ca completarea formularului să fie mai ușoară și mai rapidă, ceea ce duce la o rată de completare mai bună.

În acest articol, vă vom arăta cum să încorporați o hartă Google în formularele de contact cu un indicator de hartă.

De ce să încorporați o hartă Google în formularul dvs. de contact?

Când v-ați creat site-ul WordPress, sunt șanse să adăugați un formular de contact, astfel încât vizitatorii să poată intra cu ușurință în contact cu dvs. despre produsele și serviciile dvs.

Și dacă afacerea ta are o locație fizică, atunci probabil și tu a adăugat o hartă Google a propriei locații pentru a încuraja oamenii să vă viziteze magazinul.

Ceea ce mulți proprietari de afaceri nu știu este că puteți utiliza geolocalizarea pentru a completa automat câmpul de adresă din formularul dvs. de contact și pentru a afișa locația utilizatorului pe o hartă. Acest lucru îmbunătățește experiența generală a utilizatorului și ajută la reducerea abandonului de formulare.

Cunoașterea locațiilor utilizatorilor vă permite, de asemenea, să utilizați direcționarea în funcție de locație geografică pentru a afișa conținut personalizat și pentru a crește ratele de conversie.

Acestea fiind spuse, să aruncăm o privire la cum să încorporați o hartă Google în formularele de contact.

Cum să încorporați o hartă Google într-un formular de contact

Pentru acest tutorial, vom folosi WPForms, cel mai bun plugin de formular de contact pentru WordPress. Vă permite să creați cu ușurință orice tip de formular cu un simplu generator de formulare prin glisare și plasare.

Există o versiune gratuită a WPForms disponibilă cu toate funcțiile de care aveți nevoie pentru a crea un formular de contact de bază. Cu toate acestea, pentru acest tutorial, vom folosi WPForms Pro, deoarece include addonul Google Map.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul WPForms. 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 pagina WPForms » Setări pentru a introduce cheia de licență. Puteți găsi aceste informații în zona contului dvs. WPForms. Asigurați-vă că faceți clic pe butonul „Verificați cheia” pentru a vă activa licența.

Apoi, trebuie să navigați la WPForms » Addons și să găsiți Addon-ul de geolocalizare. Puteți utiliza opțiunea de căutare din partea de sus a ecranului sau pur și simplu puteți derula prin suplimentele disponibile.

Odată ce l-ați găsit, ar trebui să instalați suplimentul făcând clic pe butonul „Instalare supliment”.

Acum că suplimentul de geolocalizare este activat, va trebui să-i configurați setările. Pentru a face asta, navigați la WPForms » Setări și faceți clic pe fila Localizare geografică.

Pe această pagină, trebuie să selectați un furnizor de geolocalizare. Pentru acest articol, vom alege API-ul Google Locații.

De asemenea, ar trebui să dați clic pe caseta de selectare „Locație curentă”. Acest lucru va detecta și va completa automat adresa atunci când utilizatorii completează formularul de contact, economisind timp și îmbunătățind acuratețea.

Apoi, trebuie să derulați în jos la setările API-ului Google Locații. Vi se va cere să completați cheia dvs. API Google. Puteți obține cheia de la Google și apoi o puteți lipi în câmp. Vă vom arăta cum să faceți asta în secțiunea următoare.

Generarea unei chei API Google Places

Puteți obține o cheie API pentru Google Places accesând site-ul web Google Cloud Console.

Vi se va cere să vă selectați țara dintr-un meniu derulant și să acceptați termenii și condițiile. În unele țări, vi se poate oferi și șansa de a vă înscrie pentru o listă de corespondență.

Când sunteți gata să treceți la pasul următor, faceți clic pe „De acord și continuați”.

Apoi, va trebui să selectați un proiect pentru cheia API. Pur și simplu faceți clic pe „Selectați un proiect” și faceți clic pe proiectul pe care doriți să-l utilizați din listă.

Dacă nu ați creat un proiect înainte sau acesta este un site web nou pe care nu l-ați adăugat încă la Google, atunci ar trebui să faceți clic pe „Proiect nou” pentru a configura unul.

Acum ar trebui să vă aflați pe pagina „API-uri și servicii” unde puteți activa API-urile necesare pentru afișarea Hărților Google pe site-ul dvs. Va trebui să faceți clic pe butonul „+ Activați API-urile și serviciile” din partea de sus a paginii.

Aceasta vă va duce la Biblioteca API Google, unde va trebui să activați trei API-uri de mapare diferite.

Le puteți găsi utilizând funcția de căutare din partea de sus a paginii sau făcând clic pe linkul „Afișați toate” de lângă secțiunea Hărți.

Mai întâi trebuie să găsiți și să activați API-ul Places. Odată ce îl localizați, va trebui să faceți clic pe el. Pe pagina următoare, ar trebui să faceți clic pe butonul „Activare”.

După aceea, ar trebui să faceți același lucru pentru Maps JavaScript API și Geocoding API.

Acum că ați activat cele trei API-uri, puteți crea o cheie API.

În meniul din stânga, trebuie să navigați la API-uri și servicii » Acreditări .

De aici veți putea să faceți clic pe butonul „+ Creați acreditări” din partea de sus a ecranului și apoi să selectați opțiunea „cheie API”.

Cheia dvs. API va fi creată și afișată într-o fereastră pop-up.

Mai târziu în acest tutorial, va trebui să copiați acea cheie în setările WPForm. Deocamdată, să aruncăm o privire asupra modului de aplicare a unor restricții privind utilizarea cheii API.

Restricționarea cheii dvs. API Google Locații

Folosirea excesivă a cheii API vă poate scoate din planul gratuit și poate costa mai mult decât vă așteptați. Vă recomandăm să restricționați cheia pentru a preveni utilizarea neautorizată sau neașteptată.

Pentru a face acest lucru, trebuie să faceți clic pe linkul „Restrict Key” din partea de jos a ferestrei pop-up „API key created” din captura de ecran de mai sus.

Pe pagina următoare, puteți configura o serie de restricții diferite. Prima dintre acestea este „Restricțiuni de aplicare”. În această secțiune, ar trebui să faceți clic pe opțiunea „Referințe HTTP (site-uri web). Atunci cheia va fi folosită numai pe site-uri web.

În continuare, ar trebui să vă asigurați că este folosit doar pe propriul site web. Pentru a face acest lucru, ar trebui să derulați în jos la secțiunea „Restricțiuni site-ul web” și apoi faceți clic pe butonul „Adăugați un articol”.

Acum ar trebui să introduceți numele domeniului site-ului dvs. în câmpul „Articol nou” folosind modelul *example.com/* .

Dacă veți folosi Google Maps pe mai multe site-uri web, atunci puteți face clic pe butonul „Adăugați un articol” și puteți adăuga oricâte domenii aveți nevoie.

Acum că ați restricționat cheia API numai la propriile site-uri web, o puteți restricționa să funcționeze numai cu API-urile Google pe care le-ați adăugat mai sus.

Trebuie să derulați în jos la secțiunea „Restricții API” a paginii și să selectați opțiunea „Restricționați cheia”. Aceasta va dezvălui un meniu derulant în care ar trebui să bifați casetele „API Geocaching”, „API JavaScript Maps” și „API-ul Locații”.

După ce ați făcut asta, ar trebui să faceți clic pe linkul „OK” pentru a vă stoca setările. În cele din urmă, asigurați-vă că faceți clic pe butonul „Salvați” din partea de jos a paginii pentru a activa toate restricțiile pe care le-ați ales.

Rețineți că poate dura până la 5 minute pentru ca setările să intre în vigoare.

Adăugarea cheii API Google la setările WPForms

Veți vedea acum cheia API listată cu toate celelalte pe care le aveți la dispoziție. Ar trebui să faceți clic pe pictograma Copiere pentru a putea adăuga cheia la pagina de setări de geolocalizare WPForms.

Rețineți că, dacă trebuie vreodată să modificați vreo setări sau restricții ale API-ului, atunci puteți face clic pe pictograma Editați din dreapta

Acum trebuie să vă întoarceți la site-ul dvs., care ar trebui să fie în continuare pe WPForms » Setări » pagina Geolocalizare .

Odată ajuns acolo, inserați cheia în câmpul API Google Places din setările WPForms. După ce ați făcut asta, asigurați-vă că faceți clic pe butonul „Salvați setările”.

Crearea unui formular de contact cu hartă Google încorporată în WordPress

Acum că ați configurat WPForms și Google Places, sunteți gata să creați un formular de contact în WordPress. Puteți începe urmând ghidul nostru despre cum să creați un formular de contact în WordPress.

După ce ați creat un formular de bază, trebuie să adăugați un câmp de adresă. Puteți utiliza fie un bloc de adresă, fie un câmp Text cu o singură linie. Pentru acest tutorial, vom folosi un câmp Text cu o singură linie.

Pur și simplu trageți blocul Text cu linie unică pe formular.

În continuare, vom personaliza setările câmpului. Pentru a face acest lucru, trebuie să faceți clic pe câmp pentru a afișa setările de text cu o singură linie.

Mai întâi, ar trebui să schimbați eticheta câmpului în „Adresă”. Acest lucru va clarifica utilizatorilor dvs. ce ar trebui să introducă în câmp.

După aceea, trebuie să modificați setările câmpului, astfel încât acesta să afișeze o hartă pe formular. Pentru a face acest lucru, va trebui să faceți clic pe fila Avansat.

Odată ajuns acolo, ar trebui să căutați opțiunea „Activați completarea automată a adresei” în partea de jos a setărilor și să o comutați în poziția „Activat”. Veți vedea apoi o altă opțiune, „Afișare hartă”, pe care ar trebui să o activați. Puteți alege să afișați harta deasupra sau sub câmp.

Adăugarea formularului de contact pe site-ul dvs. web

Cel mai simplu mod de a adăuga formularul de contact pe site-ul dvs. este să faceți clic pe butonul „Încorporați”. Îl veți găsi lângă butonul „Salvare” din partea de sus a ecranului editorului de formulare.

Vi se va cere dacă adăugați formularul la un formular existent sau creați o pagină nouă.

Pentru acest tutorial, vom face clic pe butonul „Creați o pagină nouă”.

Apoi, ar trebui să dați un nume paginii și apoi să faceți clic pe „Hai!”. buton.

Va fi creată o nouă pagină cu acest nume, iar formularul dvs. de contact va fi adăugat automat.

Tot ce trebuie să faceți este să faceți clic pe butonul „Publicați” pentru a activa formularul.

Vizualizarea hărții Google în formularul de contact

Când un utilizator vizitează formularul dvs. de contact, acesta va fi întrebat dacă dorește să permită site-ului dvs. web să vă acceseze locația.

Dacă dau clic pe butonul „Permite”, atunci locația lor actuală va fi introdusă în câmpul de adresă și va fi adăugat pe hartă un indicator al acelei locații.

Această funcție de completare automată va economisi timp vizitatorilor, făcându-le mai rapidă și mai ușoară introducerea adreselor.

Dacă trebuie să schimbe adresa, atunci pot pur și simplu să tastați una nouă sau să trageți indicatorul într-o altă locație de pe hartă.

Cum să vizualizați datele despre locația utilizatorului într-un formular

Odată ce activați geolocalizarea, WPForms va înregistra și locația fiecărui utilizator atunci când completează formularul dvs. Cunoașterea locației utilizatorilor vă poate ajuta să găsiți clienți potențiali mai buni.

Va trebui să navigați la WPForms » Intrări și apoi să faceți clic pe formularul de contact.

Veți vedea acum o listă de intrări completate de utilizatorii dvs. pentru formularul respectiv.

Pentru a vizualiza o anumită intrare, faceți clic pe linkul „Vizualizare” din dreapta.

Veți vedea acum datele din formular completate de utilizator, cum ar fi numele, adresa de e-mail comercială, numărul de telefon al companiei, împreună cu unele date despre locație.

Aceasta include un cod pe Google Maps, locația utilizatorului, codul poștal și țara, precum și latitudinea și longitudinea lor aproximativă.

Desigur, dacă utilizatorul nu a acordat permisiunea ca formularul să-și cunoască locația, atunci nu vor fi afișate date despre locație.

Asta e tot, ai adăugat cu succes o hartă Google în formularul tău de contact. De asemenea, puteți utiliza WPForms pentru a crea sondaje în WordPress, pentru a crea un formular de plată pentru a accepta plăți online și multe altele.

Sperăm că acest tutorial v-a ajutat să învățați cum să încorporați o hartă Google în formularele de contact. De asemenea, poate doriți să aflați cum să desfășurați un giveaway sau un concurs sau să consultați selecția noastră de experți a celor mai bune pluginuri WordPress pentru toate site-urile web de afaceri.

Dacă ți-a plăcut acest articol, atunci abonează-te la canalul nostru YouTube pentru tutoriale video WordPress. Ne puteți găsi și pe Twitter și Facebook.