Cum să adăugați completare automată pentru câmpurile de adresă în 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 dvs. WordPress este o modalitate ușoară de a îmbunătăți experiența utilizatorului site-ului dvs.. Î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. Deoarece studiile arată că peste 77% dintre cumpărătorii online abandonează formularele de finalizare a comenzii, finalizările de comandă 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:

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. Gândiți-vă la ea ca la un cod digital unic care permite site-ului dvs. WordPress să comunice în siguranță cu baza de date de hărți a Google.

Pentru a obține cheia, va trebui să accesați Google Maps Platform, care este gestionată în interiorul 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. Și dacă ecranul dvs. arată ușor diferit din cauza actualizărilor, pur și simplu căutați cuvintele cheie generale menționate, cum ar fi „Library” sau „APIs”.

Odată ce v-ați autentificat cu contul dvs. Google și ajungeți la tabloul de bord al consolei, să dăm clic pe „Create Project”.

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 trei instrumente separate care funcționează împreună:

• Places API: Acesta este instrumentul principal care oferă sugestii de completare automată a adresei pe măsură ce tastați.
• 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 domeniului dvs. și să faceți clic pe „Done”.

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

În această metodă, vom folosi WPForms. În testarea mea a diverselor plugin-uri de formulare WordPress, am constatat că WPForms este cel mai bun constructor de formulare de contact pentru WordPress. Acesta vine cu un addon Geolocation puternic 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, veți primi propriul dvs. zonă de cont WPForms. Aici, puteți descărca fișierul zip al plugin-ului dvs. și puteți accesa cheia de licență.

De aici, va trebui să instalați și să activați plugin-ul WPForms.

În zona de administrare WordPress, navigați pur și simplu la Plugins » Add New Plugin.

După aceea, puteți face clic pe butonul „Încărcați pluginul” din partea de sus.

În încărcătorul de fișiere, faceți clic pe „Alegeți fișierul”, încărcați fișierul zip WPForms și apăsați „Instalați acum”.

Nu uitați să faceți clic pe butonul „Activați” atunci 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 tabloul de bord 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 » Setări din tabloul de bord de administrare. Apoi, comutați la fila „Geolocation” din partea de sus.

În setările WPForms Geolocation, veți găsi următoarele opțiuni de ajustat:

• 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 la 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ăugați 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, atunci 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 „Use Template”. Aici, voi folosi șablonul Simple Contact Form.

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 adrese. Alegerea „SUA” va restricționa sugestiile la adresele din Statele Unite, în timp ce „Internațional” permite sugestii de adrese globale – perfect pentru un site multilingv.

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 completă, inclusiv orașul, statul și codul poștal, direct în formularul dvs. WordPress.

Activarea acestei funcții va deschide opțiunile „Afișați harta”. Opțional, o puteți activa pentru a adăuga harta la câmpul dvs. „Adresă”, dar dacă o lăsați dezactivată pentru a economisi spațiu, completarea automată a textului va funcționa în continuare perfect în fundal, folosind API-urile pe care le-ați activat anterior.

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ă vă adăugați formularul pe site-ul 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.

Puteți, de asemenea, să vă stilizați 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ă își 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ă în magazinul dvs. WooCommerce sau completează un formular de înregistrare 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 e-mailuri, vânzările dvs. 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.
• Neutilizarea pe mobil: Formularele care sunt greu de utilizat pe dispozitive mobile pot fi un mare dezavantaj.
• 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

Iată câteva dintre cele mai frecvente întrebări pe care cititorii noștri le pun despre adăugarea completării automate a adresei la formularele lor 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 completarea automată a adresei cu tema mea WordPress?

De obicei, da. Autocomplete funcționează cu majoritatea temelor WordPress moderne, dar uneori, scripturile personalizate sau temele modificate intens 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 Geolocation Addon este una dintre cele mai bune opțiuni.

Ce se întâmplă dacă sugestiile de completare automată 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ă 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)
• Ghidul complet pentru utilizarea formularelor WordPress

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.