Så här addar du autokomplettering för Address-fält i WordPress

Vill du add to autofullständighet för adressfält i WordPress?

Nyligen frågade en av våra användare oss hur man add to autokomplettering för adressfält i WordPress-formulär. Autokomplettering allow användare att snabbt välja adresser från förslag som genereras i realtid när de skriver.

I den här artikeln visar vi hur du addar autofullständighet för adressfält i WordPress med hjälp av Google Places API.

Varför add to Autocomplete Address-fält i WordPress

Genom att lägga till adressfält med autokomplettering i WordPress kan du förbättra användarupplevelsen på din website.

Om du till exempel äger en ecommerce store kommer dina customers att kunna enter sina adresser snabbare och undvika skrivfel.

När kunderna skriver in sin adress kommer de möjliga adresserna att visas på deras vy baserat på deras nuvarande location, så allt de behöver göra är att välja den korrekta. Detta hjälper dig att minska error eftersom alternativen som visas för användaren är anslutna till Google Places och Google Maps API.

Autokomplettering i adressfält är en av de mest praktiska funktionerna du kan ge dina användare. Om du snabbt kan hjälpa köpare genom kassan är det mer troligt att de genomför ett köp.

Genom att göra varje köp snabbt och enkelt är det mer troligt att du ökar din försäljning och förvandlar den tillfälliga shopparen till en återkommande kund.

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

Video Tutorial

Subscribe to WPBeginner

Om du inte gillar videoklippet eller behöver fler instruktioner kan du fortsätta läsa.

Det första du behöver göra är att installera och aktivera Autocomplete Google Address plugin.

För mer detaljer, se vår steg-för-steg guide om hur du installerar ett WordPress plugin.

Efter aktivering måste du besöka Settings ” Autocomplete page i WordPress dashboard för att konfigurera plugin-inställningarna.

Du kommer att bli ombedd att enter Google Places API Key. Denna API key allow your website to connect with Google Maps and retrieve autocomplete suggestions from their database in real-time.

Få tillgång till Google Places API Key

Head över till Googles Developer Console website och skapa ett new projekt.

Du kommer till en new page där du ombeds att ange ett namn på your project.

Använd ett namn som hjälper dig att senare identifiera projektet och klicka sedan på knappen ”Create”. Om du har en organisation som du vill ansluta till kan du trycka på länken ”Browse” för att se en dropdown med alternativ.

Vänta några sekunder så blir du automatiskt redirectad till APIs & Services page.

Härifrån vill du navigera till den vänstra panelen och klicka på tabben ”Bibliotek”.

Nu kommer du att se listan över populära Google API:er som du kan aktivera för ditt projekt. I den vänstra panelen väljer du ”Maps” för att filtrera av alternativ som endast är relaterade till kartor.

Du behöver bara hitta och klicka på alternativet ”Places API”.

Därifrån kommer du till översiktssidan för Places API.

Klicka bara på knappen ”Aktivera” för att auktorisera API:et.

Om din Google Console är korrekt konfigurerad bör du se ett popup-fönster visas med din API Key.

Om det är första gången du konfigurerar ditt Google Console account kan du dock behöva enter information om din fakturering.

Nu kan du heada tillbaka till din WordPress site.

Klistra in API key från your Google Console till där det står ”Google Place API Key”.

För att säkerställa att den autofullständiga adressen fungerar i WordPress måste du aktivera Google Maps JavaScript API.

Så allt du behöver göra är att gå tillbaka till fliken ”API: er och tjänster” från instrumentpanelen för Google Developer Console. Hitta sedan ”Maps JavaScript API” och klicka på ”Aktivera”.

Nu är du redo att gå vidare till att lägga till formulärets ID.

I nästa steg behöver du formulär-ID:t för adressfältet där du vill add to funktionen för autofullständig adress.

Aktivera Autocomplete Address i WordPress-formulärfält

Du kan add a autocomplete address function to any form field created by any WordPress form builder plugin.

Vi kommer att använda WPForms i denna tutorial eftersom det är den bästa drag and drop form builder och den enklaste att använda för nybörjare. Dessa instruktioner kommer dock att fungera oavsett vilket plugin för kontaktformulär du använder.

Först måste du skapa ett formulär som har ett adressfält eller en uppsättning adressfält.

När du är klar, add detta formulär till din WordPress website gillar du att göra som vanligt.

Gå sedan till det inlägg eller den page där du har addat ditt formulär. Du måste högerklicka på adressfältet och select ”Inspect” från menyn i webbläsaren.

Here, you’ll see a highlighted section with the form ID:n för input field.

I den här screenshoten är till exempel vårt formulärs ID:n wpforms-567-field_4.

Du måste kopiera det här värdet och klistra in det på plugin-inställningssidan.

Du vill dock lägga till funktionen för autofyllning i hela ditt adressformulär. Om du till exempel vill att användarna ska kunna autofylla en hel leveransadress innebär det att de måste autofylla stad, start och postnummer.

I det här fallet måste du följa samma process genom att clicka på ”Inspektera” och sedan hitta formulärets ID:n för varje fält.

När du har fått alla dina ID:n kopierar du dem till Autocomplete page, där det står ”Form ID”.

När du lägger till flera ID:n måste du separera varje ID med ett kommatecken med citattecken, som visas under. När du är klar, glöm inte att trycka på ”Save Changes”.

Det var all; you can now visit your form page and try entering an address.

Formulärfältet kommer automatiskt att börja visa förslag med hjälp av Google Places och Google Maps.

Nu har du utan problem addat funktionen för autofyllning av Google-adresser till dina formulär. Användare kommer att kunna autofylla ditt formulär, om de kontrollerar ut från din WooCommerce store eller completed en användarregistrering signup form.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar autofullständighet för adressfält i WordPress. Du kanske också vill se vår lista över 24 WordPress-tillägg som du måste ha för företagswebbplatser eller vår guide om hur du skapar ett nyhetsbrev via e-post.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.