How to Add Autocomplete for Address Fields in WordPress

Ați pierdut vreodată un client pentru că formularul dvs. WordPress era prea lung sau frustrant de completat? Se întâmplă mereu. Un cumpărător este gata să cumpere, dar apoi se blochează tastând o adresă lungă, mai ales pe un dispozitiv mobil.

O singură greșeală mică de scriere poate însemna o livrare eșuată, iar în multe cazuri, clientul renunță înainte de a finaliza.

De aceea, completarea automată a adresei este atât de utilă. Aceasta sugerează adresa corectă imediat ce utilizatorii încep să tasteze, făcând procesul mai rapid, mai ușor și mai puțin probabil să cauzeze erori. Rezultatul sunt clienți mai mulțumiți și mai puține vânzări pierdute.

În plus, este ușor de configurat. În acest ghid, vă voi arăta cum să adăugați completarea automată a adresei la formularele dvs. WordPress pas cu pas, folosind WPForms și add-on-ul său Geolocation.

De ce să adăugați câmpuri de adresă cu autocompletare în WordPress?

Adăugarea completării automate a adresei pe site-ul tău WordPress este o modalitate ușoară de a îmbunătăți experiența utilizatorului pe site-ul tău. Într-un magazin eCommerce, de exemplu, ajută clienții să își introducă adresa mai rapid și să evite greșelile de scriere.

Iată cum funcționează: Pe măsură ce cumpărătorii tastează, apar sugestii de adrese, extrase din Google Places/Maps. Acest lucru le permite să aleagă pur și simplu adresa corectă, iar formularul se completează automat.

Acest lucru reduce erorile și accelerează procesul de finalizare a comenzii. Iar finalizările mai rapide și mai precise stimulează vânzările și fac cumpărătorii mai predispuși să revină.

Dincolo de magazinele online, completarea automată a adresei ajută la reducerea erorilor în formularele de înregistrare și rezervare. În plus, face completarea oricărui tip de formular, mai ales pe mobil, mult mai ușoară.

Acum că înțelegeți beneficiile adăugării de câmpuri de adresă cu completare automată în WordPress, vă voi arăta cum să o faceți, pas cu pas.

Iată o prezentare generală rapidă a tuturor pașilor pe care îi voi acoperi în acest articol:

• Pasul 1: Generați o cheie API Google Places
• Pasul 2: Instalați pluginul WPForms și addon-ul Geolocation
• Pasul 3: Activați completarea automată a adresei în formularele dvs. WordPress
• Pasul 4: Creați un formular cu completare automată a adresei
• Pasul 5: Încorporați formularul dvs. WordPress cu completare automată a adresei
• Sfat bonus: Urmăriți și reduceți abandonul formularelor în WordPress
• Întrebări frecvente despre completarea automată pentru câmpurile de adresă în formularele WordPress
• Mai multe ghiduri pentru utilizarea formularelor WordPress

Gata? Să începem.

Pasul 1: Generați o cheie API Google Places

Pentru a conecta WPForms cu Google Maps și a activa funcția de completare automată a adresei, veți avea nevoie de o cheie API Google Places. Să parcurgem procesul.

Pentru a obține cheia, va trebui să accesați Google Maps Platform, care este gestionată în Google Cloud Console. Consola poate părea puțin complexă, dar nu vă faceți griji – vă voi ghida prin pașii exacți de care aveți nevoie.

Mai întâi, să dăm clic pe „Creare proiect”.

Pe ecranul următor, va trebui să denumiți noul proiect. Recomand să folosiți un nume care vă va ajuta să îl identificați ușor mai târziu.

Apoi, dacă aveți o organizație la care doriți să vă conectați, puteți face clic pe linkul „Browse” pentru a vizualiza un meniu derulant cu opțiuni. Alternativ, puteți selecta „No organization”.

Odată ce totul arată bine, puteți apăsa butonul „Creare”.

Pe ecranul următor, continuă și deschide fila „Bibliotecă”.

De acolo, va trebui să activați trei API-uri specifice. Gândiți-vă la ele ca la o echipă care lucrează împreună:

• API Locații: Acesta este jucătorul vedetă care oferă sugestii de completare automată a adresei pe măsură ce tastezi.
• API JavaScript pentru Hărți: Acest lucru vă permite să afișați o vizualizare a hărții adresei selectate direct pe formularul dvs. (ceea ce este o funcție cool, opțională).
• API Geocoding: Acesta funcționează în fundal pentru a converti adresele în coordonate pe hartă.

Cel mai simplu mod de a le găsi este să folosești bara de căutare – caută, selectează API-ul și apasă pe „Enable”. Repetă acest proces până când toate cele trei API-uri sunt active.

Când acest lucru este gata, veți genera o cheie unică pe care site-ul dvs. o va folosi pentru a comunica cu API-urile Google.

Deci, chiar dacă ați activat trei API-uri diferite, nu aveți nevoie de trei chei separate. O singură cheie API poate oferi site-ului dvs. acces la toate acestea, atâta timp cât setați restricțiile corecte.

Pentru a face acest lucru, puteți trece la tab-ul „Credențiale”. Apoi, puteți face clic pe Creare credențiale » Cheie API.

Aceasta va deschide un panou pentru configurarea cheii API.

Sub „Restricții aplicație”, selectează „Site-uri web” pentru ca cheia să funcționeze doar pe site-ul tău.

Aceasta va deschide opțiunea de configurare „Restricții site web”.

Aici, puteți pur și simplu să introduceți numele dvs. de domeniu și să dați clic pe „Terminat”.

După aceea, puteți continua la secțiunea „Restricții API”.

Să activăm mai întâi opțiunea „Restrict key”.

Apoi, în meniul derulant „Select APIs”, selectați cele trei API-uri pe care tocmai le-ați activat și faceți clic pe „Ok”.

Aceasta va limita accesul cheii doar la acele API-uri.

După salvarea modificărilor, veți vedea cheia dvs. unică API.

Continuați și copiați-o – veți avea nevoie de ea în pasul următor, când o veți conecta la WPForms.

Pasul 2: Instalați pluginul WPForms și addon-ul Geolocation

Pentru acest tutorial, vom folosi WPForms, care este cel mai bun constructor de formulare de contact pentru WordPress. Acesta vine cu un add-on puternic de Geolocation care face adăugarea completării automate a adresei incredibil de simplă.

La WPBeginner, folosim WPForms pentru a afișa formularul nostru de contact și pentru a desfășura sondajele noastre anuale pentru cititori. Consultați recenzia noastră completă despre WPForms pentru mai multe informații despre plugin.

Primul lucru de făcut este să vă înregistrați pentru un cont WPForms. Pe site-ul lor, faceți clic pe „Get WPForms Now” pentru a începe.

Puteți apoi selecta un plan și continua cu procesul de finalizare a comenzii.

Odată ce v-ați înregistrat, va trebui să instalați și să activați pluginul WPForms.

Din zona de administrare WordPress, navigați pur și simplu la Pluginuri » Adăugare plugin nou.

După aceea, puteți folosi funcția de căutare pentru a găsi pluginul WPForms.

În rezultatele căutării, faceți clic pe „Instalare Acum” și apoi pe butonul „Activare” când apare.

Dacă aveți nevoie de ajutor, puteți urma ghidul nostru despre cum să instalați un plugin WordPress.

La activare, va trebui să vă verificați cheia de licență.

Pentru a începe, accesați WPForms » Setări, introduceți cheia de licență în câmpul furnizat și faceți clic pe butonul „Verificați cheia”. Puteți găsi cheia de licență în contul dvs. WPForms.

Cu aceasta făcută, puteți accesa WPForms » Addons din panoul de administrare WordPress pentru a instala addon-ul Geolocation.

Pe ecranul următor, răsfoiți opțiunile (sau folosiți bara de căutare) și faceți clic pe „Install Addon” pentru addon-ul Geolocation.

WPForms va instala și activa automat add-on-ul în câteva momente.

Pasul 3: Activați completarea automată a adresei în formularele dvs. WordPress

Acum că aveți cheia API unică și addon-ul Geolocation, este timpul să activați completarea automată a adresei în formularul dvs. WordPress.

Accesați WPForms » Settings din tabloul de bord WordPress. Apoi, comutați la fila „Geolocation” din partea de sus.

Aici veți găsi câteva opțiuni pe care le puteți ajusta:

• Furnizor de Locații – Pentru acest ghid, vom selecta „Google Places”.
• Cheie API – Continuați și lipiți cheia API unică pe care ați generat-o în Pasul 1. Aceasta va activa completarea automată a adreselor și va afișa Google Maps în formularele dvs.
• Locație curentă – Activați această opțiune pentru a popula automat locațiile utilizatorilor în formularele dvs.

Nu uitați să faceți clic pe „Save Settings” în partea de jos a acestui panou.

Apoi, trebuie doar să activați completarea automată pe formularul unde doriți să o utilizați. Puteți edita un formular existent sau crea unul nou.

Pasul 4: Creați un formular cu completare automată a adresei

Până acum, ați conectat WPForms cu Google Maps. În acest pas, vom crea un formular cu un câmp de adresă.

Pentru a începe, accesați WPForms » Adăugare nou din zona de administrare WordPress.

Pe ecranul următor, puteți continua și puteți da un nume formularului dvs.

Veți dori să folosiți un nume clar și descriptiv, astfel încât să fie mai ușor de organizat pe măsură ce creați mai multe formulare.

După aceea, veți alege cum doriți să vă construiți formularul: folosind o pânză goală, un șablon predefinit sau un constructor de formulare AI.

Dacă doriți să utilizați constructorul de formulare bazat pe AI, tot ce trebuie să faceți este să introduceți o solicitare simplă. WPForms AI va genera apoi formularul pentru dvs. în câteva secunde.

Pentru acest tutorial, însă, voi folosi un șablon gata făcut.

WPForms vine cu peste 2.000 de șabloane de formulare, făcând ușor să găsești unul care este aproape perfect pentru scopul tău.

Odată ce ați găsit un șablon bun de utilizat ca bază, pur și simplu treceți cu mouse-ul peste el și faceți clic pe butonul „Utilizați șablonul”. Aici, voi folosi șablonul Formular de contact simplu.

Aceasta va deschide constructorul de formulare prin glisare și fixare.

Apoi, trageți câmpul „Adresă” din panoul din stânga și plasați-l în formularul dvs. (dacă nu este deja acolo).

Odată ce câmpul „Adresă” este plasat, puteți face clic pe el pentru a deschide panoul „Opțiuni Câmp”.

Aici, puteți ajusta eticheta câmpului, puteți adăuga o descriere a câmpului sau puteți alege un alt schemă de adresă – SUA sau internațională.

După ce ați personalizat setările generale, puteți trece la fila „Avansat”.

Apoi, derulați în jos panoul până când găsiți opțiunea „Enable Address Autocomplete”. Activați-o.

Acest lucru va permite utilizatorilor să completeze rapid adresa lor completă, inclusiv orașul, statul și codul poștal, direct în formularul dvs. WordPress.

Activarea acestei funcții va deschide opțiunile „Afișare hartă”. Pur și simplu activați-o pentru a adăuga harta la câmpul dvs. „Adresă”.

Apoi, poți alege să afișezi harta deasupra sau dedesubtul câmpului din formularul tău.

Odată ce ați terminat, nu uitați să apăsați butonul „Salvare” din partea de sus pentru a aplica modificările.

De aici, puteți personaliza notificările și confirmările. Pentru mai multe detalii, consultați ghidul nostru despre cum să creați un formular de contact.

Pasul 5: Încorporați formularul dvs. WordPress cu completare automată a adresei

Acum, sunteți gata să adăugați formularul dvs. pe site-ul dvs. WordPress.

Pentru a începe, faceți clic pe butonul „Embed” din partea de sus a constructorului de formulare.

Va apărea o fereastră pop-up unde puteți adăuga formularul la o pagină existentă sau puteți crea o pagină nouă.

Pentru acest tutorial, voi alege „Selectare Pagină Existentă”.

În următorul popup, puteți alege o pagină din meniul derulant.

Apoi, faceți clic pe „Let’s Go!” pentru a continua.

WPForms vă va redirecționa către editorul de blocuri WordPress.

Aici, apasă pe pictograma „+” și adaugă blocul WPForms.

Apoi, selectați formularul din meniul derulant.

WPForms îl va încărca automat în editorul de conținut.

În panoul din dreapta, puteți ajusta „Setările formularului”.

De exemplu, este posibil să doriți să afișați titlul sau descrierea formularului pentru a oferi vizitatorilor mai mult context.

De asemenea, puteți stiliza formularul pentru a se potrivi mai bine cu tema site-ului dvs. Și odată ce sunteți mulțumit de design, apăsați butonul „Salvare”.

Acesta este tot! Acum puteți vizita pagina formularului dvs. și puteți încerca să tastați o adresă.

Câmpul de adresă va afișa automat sugestii de la Google Maps, permițând utilizatorilor să completeze adresa cu un singur clic.

Ați adăugat cu succes funcționalitatea de completare automată a adresei Google la formularele dvs.

Utilizatorii vor putea completa automat formularul dvs., fie că finalizează o comandă din magazinul dvs. WooCommerce, fie că finalizează o înregistrare de utilizator.

Iată cum ar putea arăta odată ce utilizatorii selectează o sugestie de adresă completată automat:

Sfat bonus: Urmăriți și reduceți abandonul formularelor în WordPress

Abandonarea formularului apare atunci când oamenii părăsesc un formular fără a-l trimite, ceea ce se datorează adesea unei experiențe slabe a utilizatorului.

Reducerea abandonului formularelor este importantă, deoarece poate afecta creșterea listei dvs. de email, vânzările dvs. de eCommerce și succesul general al afacerii.

Studiile arată că peste 77% dintre cumpărătorii online nu își finalizează formularele de checkout, ceea ce înseamnă pierderea multor bani din vânzări incomplete.

Prin urmărirea și îmbunătățirea formularelor pe care oamenii le abandonează frecvent, puteți reduce aceste pierderi de venituri.

Deși completarea automată poate ajuta, există încă alți factori care pot contribui la abandonarea formularelor:

• Câmpuri opționale transformate în obligatorii: A face oamenii să completeze informații neesențiale poate fi foarte enervant.
• Instrucțiuni neclare: Câmpurile de formular confuze sau vagi îi pot face pe oameni să renunțe.
• Mobile Unfriendliness: Forms that are hard to use on mobile devices can be a big turn-off.
• Probleme tehnice: Probleme precum funcționarea defectuoasă a formularului sau timpii de încărcare lenți pot împiedica oamenii să îl completeze.

Pentru mai multe detalii, puteți citi ghidul nostru despre cum să urmăriți și să reduceți abandonul formularelor în WordPress.

Întrebări frecvente despre completarea automată pentru câmpurile de adresă în formularele WordPress

Cum funcționează completarea automată a adresei?

Formularul dvs. se conectează la un serviciu de localizare precum Google Places sau Mapbox. Pe măsură ce utilizatorii tastează, acesta afișează sugestii de adrese potrivite. Când aleg una, câmpurile (stradă, oraș, cod poștal etc.) se completează automat.

Va funcționa cu tema mea WordPress?

De obicei, da. Completarea automată funcționează cu majoritatea temelor WordPress moderne, dar uneori, scripturile personalizate sau temele modificate în profunzime pot cauza conflicte.

Ce pluginuri WordPress suportă completarea automată a adresei?

Mai multe pluginuri de formulare oferă acest lucru, de obicei prin add-on-uri sau integrări. WPForms cu add-on-ul Geolocation este una dintre cele mai bune opțiuni.

Ce se întâmplă dacă sugestiile nu apar?

Câteva cauze comune includ o cheie API lipsă sau incorectă, erori JavaScript sau conflicte de temă și restricții API (cum ar fi setări incorecte de domeniu).

Mai multe ghiduri pentru utilizarea formularelor WordPress

Sper că acest articol v-a ajutat să învățați cum să adăugați completare automată pentru câmpurile de adresă în WordPress.

Dacă ați găsit acest lucru util, s-ar putea să doriți să vedeți și celelalte ghiduri utile ale noastre despre:

• Cum să creezi formulare WordPress cu câmpuri de tip listă derulantă
• Cum să creați formulare multilingve în WordPress
• Cum să urmăriți parcursul utilizatorului pe formularele de lead-uri WordPress
• Sfaturi de expert pentru a crea formulare mai interactive și a crește conversiile
• Modalități de a folosi logica condițională în formularele WordPress (Cazuri de utilizare de top)
• Cum să creezi un formular Airtable personalizat în WordPress
• Ghidul complet pentru utilizarea formularelor WordPress

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.