Hur man lägger till automatisk komplettering för adressfält i WordPress

Har du någonsin förlorat en kund för att ditt WordPress-formulär var för långt eller frustrerande att fylla i? Det händer hela tiden. En kund är redo att köpa, men sedan fastnar de med att skriva en lång adress, särskilt på en mobil enhet.

Ett litet stavfel kan innebära ett misslyckat leveransförsök, och i många fall ger kunden helt enkelt upp innan de är klara.

Det är därför adressautocomplete är så hjälpsamt. Det föreslår rätt adress så fort användarna börjar skriva, vilket gör processen snabbare, enklare och mindre benägen att orsaka fel. Resultatet är nöjdare kunder och färre förlorade försäljningar.

Dessutom är det enkelt att ställa in. I den här guiden visar jag dig hur du lägger till adresskomplettering i dina WordPress-formulär steg för steg med WPForms och dess Geolocation-tillägg.

Varför lägga till fält för adressautocomplet i WordPress?

Att lägga till automatisk adresskomplettering på din WordPress-webbplats är ett enkelt sätt att förbättra din webbplats användarupplevelse. I en e-handelsbutik hjälper det till exempel kunder att ange sin adress snabbare och undvika felskrivningar.

Så här fungerar det: När shoppare skriver visas adressförslag, hämtade från Google Places/Maps. Detta gör att de helt enkelt kan välja rätt, och formuläret fylls i automatiskt.

Detta minskar fel och snabbar upp utcheckningen. Och snabbare, mer exakta utcheckningar ökar försäljningen och gör köpare mer benägna att återkomma.

Förutom webbutiker hjälper adresskomplettering till att minska fel i registrerings- och bokningsformulär. Dessutom gör det det mycket enklare att fylla i alla typer av formulär, särskilt på mobilen.

Nu när du förstår fördelarna med att lägga till adressfält med automatisk komplettering i WordPress, ska jag visa dig hur du gör det, steg för steg.

Här är en snabb översikt över alla steg jag kommer att täcka i den här artikeln:

• Steg 1: Generera en Google Places API-nyckel
• Steg 2: Installera WPForms-pluginet och Geolocation-tillägget
• Steg 3: Aktivera adresskomplettering i dina WordPress-formulär
• Steg 4: Skapa ett formulär med automatisk adresskomplettering
• Steg 5: Bädda in ditt WordPress-formulär med adressautocomplete
• Bonustips: Spåra och minska övergivna formulär i WordPress
• Vanliga frågor om automatisk komplettering för adressfält i WordPress-formulär
• Fler guider för att använda WordPress-formulär

Redo? Låt oss börja.

Steg 1: Generera en Google Places API-nyckel

För att ansluta WPForms till Google Maps och aktivera funktionen för automatisk adresskomplettering behöver du en Google Places API-nyckel. Låt oss gå igenom processen.

För att få din nyckel måste du bege dig till Google Maps Platform, som hanteras inuti Google Cloud Console. Konsolen kan se lite komplex ut, men oroa dig inte – jag kommer att guida dig genom de exakta stegen du behöver.

Först, låt oss klicka på 'Skapa projekt'.

På nästa skärm måste du namnge ditt nya projekt. Jag rekommenderar att du använder ett namn som hjälper dig att enkelt identifiera det senare.

Om du sedan har en organisation du vill ansluta till kan du klicka på länken ‘Bläddra’ för att se en rullgardinsmeny med alternativ. Alternativt kan du välja ‘Ingen organisation.’

När allt ser bra ut kan du klicka på knappen 'Skapa'.

På nästa skärm, fortsätt och öppna fliken ‘Bibliotek’.

Därifrån måste du aktivera tre specifika API:er. Tänk på dem som ett team som arbetar tillsammans:

• Places API: Detta är stjärnan som tillhandahåller adressförslag för automatisk komplettering medan du skriver.
• Maps JavaScript API: Detta gör att du kan visa en kartvy över den valda adressen direkt i ditt formulär (vilket är en cool, valfri funktion).
• Geocoding API: Detta fungerar i bakgrunden för att konvertera adresser till kartkoordinater.

Det enklaste sättet att hitta dem är att använda sökfältet – sök bara, välj API:et och klicka på ‘Aktivera’. Upprepa detta tills alla tre API:erna är aktiva.

När det är klart genererar du en unik nyckel som din webbplats kommer att använda för att kommunicera med Googles API:er.

Så, även om du har aktiverat tre olika API:er, behöver du inte tre separata nycklar. En enda API-nyckel kan ge din webbplats åtkomst till alla, så länge du ställer in rätt begränsningar.

För att göra detta kan du gå till fliken 'Credentials'. Klicka sedan på Create Credentials » API key.

Detta öppnar en panel för att konfigurera API-nyckeln.

Under ‘Applikationsbegränsningar’, välj ‘Webbplatser’ så att nyckeln bara fungerar på din webbplats.

Detta öppnar konfigurationsalternativet ‘Webbplatsbegränsningar’.

Här kan du helt enkelt ange ditt domännamn och klicka på 'Klar'.

Därefter kan du fortsätta till avsnittet 'API-begränsningar'.

Låt oss först aktivera alternativet ‘Begränsa nyckel’.

Välj sedan i rullgardinsmenyn ‘Välj API:er’ de tre API:er du just aktiverade och klicka på ‘Ok.’

Detta begränsar nyckelns åtkomst till endast dessa API:er.

Efter att ha sparat dina ändringar ser du din unika API-nyckel.

Kopiera den – du kommer att behöva den i nästa steg när du ansluter den till WPForms.

Steg 2: Installera WPForms-pluginet och Geolocation-tillägget

För den här handledningen kommer vi att använda WPForms, vilket är den bästa formulärbyggaren för WordPress. Den levereras med ett kraftfullt Geolocation-tillägg som gör det otroligt enkelt att lägga till adresskomplettering.

På WPBeginner använder vi WPForms för att visa vårt kontaktformulär och genomföra våra årliga läsarundersökningar. Se vår kompletta WPForms-recension för mer insikter om pluginet.

Det första du bör göra är att registrera dig för ett WPForms-konto. På deras webbplats klickar du bara på ‘Skaffa WPForms nu’ för att komma igång.

Du kan sedan välja en plan och fortsätta med utcheckningsprocessen.

När du har registrerat dig måste du installera och aktivera WPForms-pluginet.

Navigera från ditt WordPress-administratörsområde helt enkelt till Plugins » Lägg till nytt plugin.

Därefter kan du använda sökfunktionen för att hitta WPForms-pluginet.

I sökresultaten klickar du på ‘Installera nu’ och sedan på knappen ‘Aktivera’ när den visas.

Om du behöver hjälp kan du följa vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du verifiera din licensnyckel.

För att komma igång, gå till WPForms » Inställningar, ange din licensnyckel i det angivna fältet och klicka på knappen ‘Verifiera nyckel’. Du hittar din licensnyckel i ditt WPForms-konto.

När det är gjort kan du gå till WPForms » Tillägg från WordPress adminpanel för att installera Geolocation-tillägget.

På nästa skärm, bläddra igenom alternativen (eller använd sökfältet) och klicka på ‘Installera tillägg’ för Geolocation-tillägget.

WPForms kommer automatiskt att installera och aktivera tillägget inom några ögonblick.

Steg 3: Aktivera adresskomplettering i dina WordPress-formulär

Nu när du har din unika API-nyckel och Geolocation-tillägget är det dags att aktivera adresskomplettering i ditt WordPress-formulär.

Gå till WPForms » Inställningar från din WordPress-instrumentpanel. Byt sedan till fliken ‘Geolocation’ högst upp.

Här hittar du några alternativ du kan justera:

• Platser-leverantör – För den här guiden väljer vi 'Google Places'.
• API-nyckel – Klistra in den unika API-nyckel du genererade i steg 1. Detta aktiverar automatisk adresskomplettering och visar Google Maps inuti dina formulär.
• Aktuell plats – Aktivera detta för att automatiskt fylla i användarnas platser i dina formulär.

Glöm inte att klicka på ‘Spara inställningar’ längst ner i den här panelen.

Därefter behöver du bara aktivera automatisk komplettering i formuläret där du vill använda det. Du kan antingen redigera ett befintligt formulär eller skapa ett nytt.

Steg 4: Skapa ett formulär med automatisk adresskomplettering

Nu har du anslutit WPForms med Google Maps. I det här steget skapar vi ett formulär med ett adressfält.

För att börja, gå till WPForms » Lägg till ny från ditt WordPress-adminområde.

På nästa skärm kan du ge ditt formulär ett namn.

Du vill använda ett tydligt, beskrivande namn så att det är lättare att organisera när du skapar fler formulär.

Därefter väljer du hur du vill bygga ditt formulär: med en tom yta, en färdig mall eller en AI-formulärbyggare.

Om du vill använda den AI-drivna formulärbyggaren, behöver du bara ange en enkel prompt. WPForms AI kommer sedan att generera formuläret åt dig på några sekunder.

För den här handledningen kommer jag dock att använda en färdig mall.

WPForms levereras med över 2 000 formulärmallar, vilket gör det enkelt att hitta en som är nästan perfekt för ditt mål.

När du har hittat en bra mall att använda som bas, för muspekaren över den och klicka på knappen 'Använd mall'. Här använder jag mallen Enkelt kontaktformulär.

Detta öppnar dra-och-släpp-formulärbyggaren.

Dra sedan fältet ‘Adress’ från den vänstra panelen och släpp det i ditt formulär (om det inte redan finns där).

När fältet ‘Adress’ är på plats kan du klicka på det för att öppna panelen ‘Fältegenskaper’.

Här kan du justera fältets etikett, lägga till en fältbeskrivning eller välja ett annat adressschema – USA eller internationellt.

När du har anpassat de allmänna inställningarna kan du växla till fliken 'Avancerat'.

Skrolla sedan ner i panelen tills du hittar alternativet ‘Aktivera adressautocomplete’. Fortsätt och slå på det.

Detta gör att användare snabbt kan fylla i sin fullständiga adress, inklusive stad, delstat och postnummer, direkt i ditt WordPress-formulär.

Att aktivera den här funktionen öppnar alternativen för 'Visa karta'. Växla helt enkelt på den för att lägga till kartan till ditt 'Adress'-fält.

Sedan kan du välja att visa kartan ovanför eller under fältet i ditt formulär.

När du är klar, glöm inte att klicka på knappen 'Spara' högst upp för att tillämpa dina ändringar.

Härifrån kan du anpassa dina aviseringar och bekräftelser. För mer information, se vår guide om hur man skapar ett kontaktformulär.

Steg 5: Bädda in ditt WordPress-formulär med adressautocomplete

Nu är du redo att lägga till ditt formulär på din WordPress-webbplats.

För att börja, klicka på knappen ‘Bädda in’ högst upp i formulärbyggaren.

Ett popup-fönster visas där du antingen kan lägga till formuläret på en befintlig sida eller skapa en ny sida.

För den här handledningen väljer jag ‘Välj befintlig sida.’

I nästa popup kan du välja en sida från rullgardinsmenyn.

Klicka sedan på ‘Låt oss köra!’ för att fortsätta.

WPForms kommer att omdirigera dig till WordPress blockredigerare.

Klicka här på ikonen ‘+’ och lägg till WPForms-blocket.

Välj sedan ditt formulär från rullgardinsmenyn.

WPForms kommer automatiskt att ladda det i innehållsredigeraren.

I panelen till höger kan du justera 'Formulärinställningar'.

Till exempel kanske du vill visa formulärets titel eller beskrivning för att ge besökarna mer kontext.

Du kan också styla ditt formulär för att bättre matcha din webbplats tema. Och när du är nöjd med designen, tryck bara på knappen ‘Spara’.

Det är allt! Du kan nu besöka din formulärsida och prova att skriva en adress.

Adressfältet kommer automatiskt att visa förslag från Google Maps, vilket gör att användare kan fylla i sin adress med ett enda klick.

Du har nu lagt till Google-adresskompletteringsfunktionen i dina formulär.

Användare kommer att kunna fylla i ditt formulär automatiskt, oavsett om de slutför köpet från din WooCommerce-butik eller slutför en användarregistrering.

Så här kan det se ut när användare har valt ett förslag på kompletterad adress:

Bonustips: Spåra och minska övergivna formulär i WordPress

Formuläravhopp sker när personer lämnar ett formulär utan att skicka in det, vilket ofta beror på en dålig användarupplevelse.

Att minska avbrutna formulär är viktigt eftersom det kan skada tillväxten av din e-postlista, din e-handelsförsäljning och din övergripande affärsframgång.

Studier visar att över 77 % av online-shopparna inte slutför sina utcheckningsformulär, vilket innebär att man förlorar mycket pengar från ofullständiga försäljningar.

Genom att spåra och förbättra formulär som folk ofta överger kan du minska dessa intäktsförluster.

Även om auto-komplettering kan hjälpa, finns det fortfarande andra faktorer som kan bidra till att formulär överges:

• Valfria fält gjorda obligatoriska: Att tvinga folk att fylla i icke-väsentlig information kan vara riktigt irriterande.
• Otydliga instruktioner: Förvirrande eller vaga formulärfält kan få folk att ge upp.
• Oanvändbart på mobilen: Formulär som är svåra att använda på mobila enheter kan vara en stor avskräckare.
• Tekniska problem: Problem som att formuläret inte fungerar bra eller långa laddningstider kan hindra folk från att slutföra det.

För mer information kan du läsa vår guide om hur man spårar och minskar formulärsavhopp i WordPress.

Vanliga frågor om automatisk komplettering för adressfält i WordPress-formulär

Hur fungerar adressauto-komplettering?

Ditt formulär ansluter till en platstjänst som Google Places eller Mapbox. När användare skriver visas matchande adressförslag. När de väljer en fylls fälten (gata, stad, postnummer etc.) i automatiskt.

Kommer det att fungera med mitt WordPress-tema?

Vanligtvis, ja. Automatisk komplettering fungerar med de flesta moderna WordPress-teman, men ibland kan anpassade skript eller kraftigt modifierade teman orsaka konflikter.

Vilka WordPress-plugins stöder adresskomplettering?

Flera formulärplugins erbjuder detta, vanligtvis via tillägg eller integrationer. WPForms med Geolocation Addon är ett av de bästa alternativen.

Vad händer om förslagen inte visas?

Några vanliga orsaker inkluderar en saknad eller felaktig API-nyckel, JavaScript-fel eller temakonflikter, och API-begränsningar (som felaktiga domäninställningar).

Fler guider för att använda WordPress-formulär

Jag hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till automatisk komplettering för adressfält i WordPress.

Om du fann detta hjälpsamt kanske du också vill se våra andra hjälpsamma guider om:

• Hur man skapar WordPress-formulär med rullgardinsfält
• Hur man skapar flerspråkiga formulär i WordPress
• Hur man spårar användarresan på WordPress-formulär för leads
• Experttips för att skapa mer interaktiva formulär och öka konverteringar
• Sätt att använda villkorlig logik i WordPress-formulär (toppanvändningsfall)
• Hur man skapar ett anpassat Airtable-formulär i WordPress
• Ultimativ guide till att använda WordPress-formulär

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.