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

Am completat partea noastră echitabilă de formulare online și adesea ne trezim tastând constant aceeași adresă.

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, poate ajuta la creșterea ratelor de completare a formularelor și poate oferi 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 configurați site-ul dvs. WordPress, probabil ați adăugat un formular de contact, astfel încât vizitatorii să vă poată contacta cu privire la produsele sau serviciile dvs. Și dacă aveți un magazin fizic, probabil ați adăugat o hartă Google pentru a ajuta oamenii să vă găsească locația cu ușurință.

Ceea ce mulți proprietari de afaceri nu știu este că puteți utiliza geolocația pentru a completa **automat** câmpul de adresă din formularul de contact și pentru a afișa locația vizitatorului pe o hartă. Apoi, aceștia pot verifica cu ușurință dacă adresa lor este corectă sau pot trage pinul pentru a o schimba, dacă este necesar.

Acest lucru îmbunătățește experiența utilizatorului generală și poate ajuta 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.

Acum, să vedem cum să încorporați o hartă Google în formularele dvs. de contact. Iată o prezentare generală a tuturor subiectelor pe care le vom acoperi în acest articol:

• How to Embed a Google Map in a Contact Form
  • Generarea unei chei API Google Places
  • Restricționarea cheii API Google Places
  • Adăugarea cheii API Google la setările WPForms
  • Crearea unui formular de contact cu hartă Google încorporată în WordPress
  • Adăugarea formularului de contact pe site-ul dvs.
  • Vizualizarea hărții Google în formularul de contact
• Cum să vizualizați datele de locație ale utilizatorilor pe un formular
• Tutorial video: Încorporați o hartă Google în formularele de contact
• 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. Am avut o experiență grozavă cu el și puteți afla mai multe în recenzia noastră detaliată despre WPForms.

Primul lucru pe care trebuie să-l faceți este să creați un cont WPForms. Pe site-ul WPForms, faceți clic pe „Get WPForms Now” și apoi completați procesul de înregistrare.

După ce ați terminat, veți ajunge în tabloul de bord al contului dvs. WPForms, unde puteți accesa fișierul ZIP WPForms Pro și cheia de licență.

Apoi, puteți instala și activa pluginul WPForms.

Din zona de administrare WordPress, puteți accesa Plugins » Add New Plugin.

Apoi, continuați și folosiți bara de căutare pentru a găsi rapid pluginul WPForms.

În rezultatele căutării, faceți pur și simplu clic pe butonul „Install Now” și apoi pe „Activate” pentru a începe să-l utilizați pe site-ul dvs. WordPress.

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, continuați și faceți clic pe butonul „Install 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 tutorial, vom alege „Google Places API”.

Ar trebui, de asemenea, să faceți clic pe caseta de selectare „Current Location”. Aceasta solicită browserului utilizatorului locația acestuia pentru a pre-completa automat câmpul de adresă. Acest lucru economisește timp și ajută la îmbunătățirea preciziei.

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

Aici, WPForms vă 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.

Mai întâi, selectați pur și simplu țara dvs. dintr-un meniu derulant și acceptați 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 vă va duce la Biblioteca API a Google, unde va trebui să activați trei API-uri de cartografiere:

• Google Places API – permite formularului dvs. să preia adrese sugerate pe măsură ce utilizatorii tastează.
• Maps JavaScript API – afișează harta interactivă pe site-ul dvs.
• API Geocoding – transformă o adresă în coordonate exacte, astfel încât harta să poată plasa pinul corect.

Le puteți găsi folosind bara de căutare din partea de sus sau făcând clic pe butonul „Vizualizați tot” din secțiunea Hărți.

De aici, să găsim și să activăm API-ul Places. Odată ce îl localizați, va trebui să faceți clic pe el.

Pe pagina următoare, faceți clic pe butonul „Activare”.

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

Și odată ce 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 WPForms. Deocamdată, să vedem cum să impunem restricții asupra utilizării cheii API.

Restricționarea cheii API Google Places

Utilizarea excesivă a cheii API vă poate scoate din nivelul 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ă numai 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ționați cheia”. Aceasta va afișa un meniu derulant unde ar trebui să bifați căsuțele „API Geocoding”, „API JavaScript Hărți” și „API Places”.

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

Acum veți vedea cheia API listată alături de oricare altele 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. Și asigurați-vă că faceți clic pe butonul „Salvare Setări”.

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 diferite în care puteți construi formularele dvs. WordPress cu WPForms.

În primul rând, puteți începe cu o pânză goală. Aceasta vă 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.

În final, puteți alege dintre peste 2.000 de șabloane de formulare predefinite. Fie că aveți nevoie de un formular de contact, un sondaj, un formular de rezervare sau orice altceva mai complex, există probabil un șablon care se potrivește nevoilor dumneavoastră!

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”. Deci, pur și simplu trageți 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 o pagină existentă sau să creați una 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 „Publicare” pentru a face pagina live.

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 dumneavoastră, făcând mai rapid și mai ușor introducerea adreselor lor.

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 acesta trimite formularul dumneavoastră. Cunoașterea locației utilizatorilor dumneavoastră 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.

Acum veți vedea datele formularului trimise de utilizator, cum ar fi numele acestuia, adresa de e-mail de afaceri și numărul de telefon de afaceri, împreună cu unele date de localizare.

Aceasta include un pin pe Google Maps, locația utilizatorului, codul poștal și țara. Rețineți că acuratețea depinde de dispozitivul utilizatorului; datele GPS de pe telefoanele mobile sunt de obicei foarte precise, în timp ce locația bazată pe IP de pe computerele desktop poate fi 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.

Acesta este tot. Ați adăugat cu succes o hartă Google la formularul dvs. de contact în WordPress. 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: Încorporați o hartă Google în formularele de contact

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.