Cum să încorporați o hartă Google în formulare de contact (cu pin pe hartă)

Am completat partea noastră de formulare online și, de multe ori, ne-am trezit rescriind constant aceeași adresă. Atunci am început să ne dorim să existe o modalitate mai simplă.

Imaginați-vă asta în schimb: un vizitator ajunge pe pagina dvs. de contact, vede adresa completată automat și un pin deja plasat pe hartă. Este rapid, personal și le economisește timp.

Adăugarea unei hărți Google cu un pin de locație la formularul de contact WordPress poate părea o mică atingere, dar poate avea un impact mare. Din experiența noastră cu WPForms, ajută la creșterea ratelor de completare a formularelor și oferă utilizatorilor o experiență mai fluidă și mai satisfăcătoare.

În acest ghid pas cu pas, vă vom arăta cum să încorporați o hartă Google interactivă direct în formularul dvs. de contact WordPress – fără cod necesar. 🗺️

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

Când ți-ai creat site-ul WordPress, probabil ai adăugat un formular de contact pentru ca vizitatorii să poată lua legătura ușor cu tine despre produsele și serviciile tale.

Și dacă afacerea dvs. are o locație fizică, atunci probabil ați adăugat și dvs. 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 folosi geolocația pentru a completa automat câmpul de adresă din formularul dvs. de contact și pentru a afișa locația utilizatorului pe o hartă. Apoi, aceștia pot verifica cu ușurință dacă adresa lor este corectă sau pot trage pinul pentru a o modifica, dacă este necesar.

Acest lucru îmbunătățește experiența generală a utilizatorului și ajută la reducerea abandonului formularelor.

Cunoașterea locațiilor utilizatorilor dvs. vă permite, de asemenea, să utilizați geolocația pentru a afișa conținut personalizat și a crește ratele de conversie.

Acestea fiind spuse, vom explica cum să încorporați o hartă Google în formularele de contact. Iată o prezentare generală a tuturor subiectelor pe care le vom aborda în acest articol:

• Cum să încorporați o hartă Google într-un formular de contact
• Cum să vizualizați datele de locație ale utilizatorilor pe un formular
• Tutorial video
• Resurse bonus 🔗: Cele mai bune ghiduri despre utilizarea hărților pe WordPress

Să începem!

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

Pentru acest tutorial, vom folosi WPForms, cel mai bun plugin pentru formulare de contact pentru WordPress. Vă permite să creați cu ușurință orice tip de formular cu un simplu constructor de formulare drag-and-drop.

Există o versiune gratuită a WPForms disponibilă cu toate funcționalitățile de care aveți nevoie pentru a crea un formular de contact de bază. Pentru acest tutorial, însă, vom folosi WPForms Pro, deoarece include addon-ul Google Map.

ℹ️ Știați? La WPBeginner, folosim WPForms pentru multe lucruri. De exemplu, acesta alimentează formularul nostru de contact și sondajele anuale de satisfacție a cititorilor. Avem o experiență excelentă cu el și puteți găsi totul despre el în recenzia noastră detaliată despre WPForms.

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.

După activare, trebuie să vizitezi pagina WPForms » Setări pentru a introduce cheia de licență. Poți găsi aceste informații în zona contului tău WPForms. Asigură-te că apeși butonul „Verifică cheia” pentru a-ți activa licența.

În continuare, trebuie să navigați la WPForms » Addons și să găsiți Geolocation Addon.

Puteți folosi opțiunea de căutare din partea de sus a ecranului sau pur și simplu derulați prin add-on-urile disponibile.

Odată ce l-ați găsit, ar trebui să instalați add-on-ul făcând clic pe butonul „Instalați Addon”.

Acum că addon-ul Geolocation este activat, va trebui să îi configurați setările. Pentru a face acest lucru, navigați la WPForms » Setări și faceți clic pe fila „Geolocation”.

Pe această pagină, trebuie să selectați un furnizor de geolocație. Pentru acest articol, vom alege Google Places API.

De asemenea, ar trebui să bifați căsuța „Locație curentă”. Aceasta va detecta și va completa automat adresa atunci când utilizatorii completează formularul de contact, economisind timp și îmbunătățind precizia.

Apoi, trebuie să derulați în jos la setările API Google Places.

Vi se va cere să introduceți cheia API Google. Puteți obține cheia de la Google și apoi să o lipiți în câmpul de introducere. Vă vom arăta cum să faceți acest lucru î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ă selectați țara dvs. dintr-un meniu derulant și să fiți de acord cu termenii și condițiile. În unele țări, vi se poate oferi, de asemenea, posibilitatea de a vă înscrie la o listă de corespondență.

Când sunteți gata să treceți la următorul pas, faceți clic pe „Sunt de acord și continui”.

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.

Ar trebui să vă aflați acum pe pagina „API-uri și servicii”, unde puteți activa API-urile necesare pentru a afișa hărți Google pe site-ul dvs. WordPress.

Va trebui să faceți clic pe butonul „+ Activați API-uri și servicii” din partea de sus a paginii.

Acest lucru te va duce la Biblioteca API a Google, unde va trebui să activezi trei API-uri de cartografiere diferite.

Le puteți găsi folosind funcția de căutare din partea de sus a paginii sau făcând clic pe linkul „Vizualizați tot” 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 „Activați”.

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

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 » Credențiale.

De aici, veți putea face clic pe butonul „+ Creare credențiale” din partea de sus a ecranului și apoi selectați opțiunea „Cheie API”.

Cheia 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 la cum să impunem unele restricții asupra utilizării cheii API.

Restricționarea cheii API Google Places

Utilizarea 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 „Restricționează cheia” din partea de jos a ferestrei pop-up „Cheie API creată” din captura de ecran de mai sus.

Pe pagina următoare, puteți configura mai multe restricții diferite. Prima dintre acestea este „Restricții de aplicație”.

În această secțiune, ar trebui să faceți clic pe opțiunea „Referințe HTTP (site-uri web)”. Apoi, cheia va fi utilizată doar pe site-uri web.

Apoi, ar trebui să vă asigurați că este utilizat doar pe propriul site web. Pentru a face acest lucru, ar trebui să derulați în jos la secțiunea 'Restricții de site web' și apoi să faceți clic pe butonul 'Adaugă un element'.

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

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

Acum că ați restricționat cheia API doar la propriile site-uri web, o puteți restricționa și pentru a funcționa doar 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ționează cheia”. Aceasta va afișa un meniu derulant unde ar trebui să bifați căsuțele „Geocaching API”, „Maps JavaScript API” și „Places API”.

Odată ce ați făcut acest lucru, ar trebui să faceți clic pe linkul „OK” pentru a vă salva setările.

În final, asigură-te că apeși butonul „Salvează” din partea de jos a paginii pentru a activa toate restricțiile pe care le-ai 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ă alături de oricare alte chei pe care le aveți disponibile. Ar trebui să faceți clic pe pictograma „Copiere” pentru a putea adăuga cheia pe pagina de setări WPForms Geolocation.

Rețineți că, dacă vreodată va trebui să modificați oricare dintre setările sau restricțiile API-ului, puteți face clic pe pictograma Editare din dreapta.

Acum trebuie să te întorci pe site-ul tău, care ar trebui să fie încă pe pagina WPForms » Setări » Geolocation.

Odată ajuns acolo, lipiți cheia în câmpul Google Places API din setările WPForms. După ce ați făcut acest lucru, asigurați-vă că faceți clic pe butonul 'Salvează 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.

Există câteva moduri în care îți poți construi formularele WordPress cu WPForms. În primul rând, poți începe cu o pânză goală. Acest lucru îți oferă control complet pentru a adăuga și aranja câmpurile formularului de la zero, făcându-l perfect pentru designuri complet personalizate.

În al doilea rând, puteți utiliza constructorul de formulare AI pentru a genera un formular complet pe baza unui simplu prompt text. Acesta este un economizor excelent de timp dacă nu sunteți sigur de unde să începeți.

Și, în cele din urmă, puteți alege dintre peste 2.000 de șabloane de formulare pre-făcute. Fie că aveți nevoie de un formular de contact, sondaj, formular de rezervare sau orice altceva mai complex, există probabil un șablon care se potrivește nevoilor dvs.!

Poți începe urmând ghidul nostru despre cum să creezi un formular de contact în WordPress.

Odată ce ați creat un formular de bază, trebuie să adăugați un câmp pentru adresă. Puteți folosi fie un bloc de Adresă, fie un câmp Text pe o singură linie. Pentru acest tutorial, vom folosi un câmp „Text pe o singură linie”.

Trageți pur și simplu blocul „Text pe o singură linie” 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 pentru Text pe o singură linie.

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

După aceea, trebuie să modificați setările câmpului pentru ca acesta să afișeze o hartă în formularul WordPress. 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 adreselor” din partea de jos a setărilor și să o comutați pe 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 dedesubtul câmpului.

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

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ă doriți să adăugați formularul la un formular existent sau să creați o pagină nouă.

Pentru acest tutorial, vom face clic pe butonul „Creare pagină nouă”.

În continuare, ar trebui să dați un nume paginii și apoi să faceți clic pe butonul „Să mergem!”.

O nouă pagină cu acel nume va fi creată, 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 publica formularul.

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

Când un utilizator vizitează formularul dvs. de contact, i se va cere dacă dorește să permită site-ului dvs. web să acceseze locația sa.

Dacă apasă butonul „Permite”, atunci locația lor curentă va fi introdusă în câmpul de adresă, iar un pin al acelei locații va fi adăugat pe hartă.

Această funcție de completare automată va economisi timp vizitatorilor dvs., făcând mai rapid și mai ușor să își introducă adresele.

Dacă trebuie să schimbe adresa, atunci pot pur și simplu să tasteze una nouă sau să tragă pinul într-o altă locație pe hartă.

Cum să vizualizați datele de locație ale utilizatorilor pe un formular

Odată ce activați geolocația, WPForms va înregistra, de asemenea, locația fiecărui utilizator atunci când completează formularul dvs. Cunoașterea locației utilizatorilor dvs. vă poate ajuta să găsiți lead-uri mai bune.

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

Veți vedea acum o listă de înregistrări completate de utilizatorii dvs. pentru acel formular.

Pentru a vizualiza o anumită trimitere de formular, pur și simplu faceți clic pe linkul „Vizualizare” din dreapta.

Veți vedea acum datele formularului completate de utilizator, cum ar fi numele acestuia, e-mailul de afaceri și numărul de telefon de afaceri, împreună cu unele date de locație.

Aceasta include un pin 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.

Atât. Ați adăugat cu succes o hartă Google la formularul dvs. de contact. Puteți folosi, de asemenea, WPForms pentru a crea sondaje în WordPress, crea un formular de plată pentru a accepta plăți online și multe altele.

Tutorial video

Doriți să vedeți cum funcționează? Pur și simplu faceți clic pe butonul Redare ▶️ din tutorialul video de mai jos pentru a afla cum să încorporați o hartă Google în formularul dvs. de contact.

Abonează-te la WPBeginner

Resurse bonus 🔗: Cele mai bune ghiduri despre utilizarea hărților pe WordPress

Sperăm că acest tutorial v-a ajutat să învățați cum să încorporați o hartă Google în formularele de contact. În continuare, ați putea dori, de asemenea, să consultați alte ghiduri ale noastre despre utilizarea hărților pe site-ul dvs.:

• Cum să adăugați Google Maps în WordPress (Metoda CORECTĂ)
• Cum să adăugați un localizator de magazine Google Maps în WordPress
• Cum să încorporați hărți Bing în WordPress (pas cu pas)
• Cum să adăugați o hartă interactivă în WordPress
• Cele mai bune pluginuri Google Maps pentru WordPress (majoritatea sunt gratuite)
• Cele mai bune pluginuri Mapbox pentru WordPress
• Cele mai bune plugin-uri WordPress pentru geolocație și GeoIP

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.