Så här lägger du till autokomplettering för adressfält i WordPress

Nyligen frågade en av våra användare hur man lägger till autokompletter för adressfält i WordPress-formulär. Autofullständigt tillåter användare att snabbt välja adress från förslag som genereras i realtid när de skriver. I den här artikeln visar vi hur du lägger till autokomplettering för adressfält i WordPress med hjälp av Google Places API.

Video Tutorial

Om du inte gillar videon eller behöver mer instruktioner, fortsätt läsa.

Det första du behöver göra är att installera och aktivera Adress Autocomplete med hjälp av Google Place Api-plugin. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering måste du besöka Inställningar »Google Autofullständig sida för att konfigurera insticksinställningar.

Du kommer att bli ombedd att ange Google Places API-nyckel. Med denna API-nyckel kan din webbplats ansluta till Google Maps och hämta autofullständiga förslag från sin databas i realtid.

Gå över till webbplatsen för Google Developer Console och skapa ett nytt projekt.

En popup visas som ber dig att ange ett namn för ditt projekt. Använd ett namn som hjälper dig att identifiera projektet senare och klicka sedan på Skapa-knappen.

Popupen kommer att försvinna, vänta i några sekunder och du omdirigeras automatiskt till ditt nya projekt.

Nu kommer du att se listan över populära Google APIs som du kan aktivera för ditt projekt. Du måste hitta och klicka på "Google Places API-webbtjänst".

Detta tar dig till en översiktssida som förklarar hur detta API fungerar. Du måste klicka på länken Aktivera för att fortsätta.

Utvecklarkonsolen aktiverar nu Google Places API för ditt projekt.

Du måste dock fortfarande ha behörighetsuppgifter för att använda API-en på din webbplats. Så fortsätt och klicka på Skapa credentials för att fortsätta.

På nästa skärm måste du klicka på "Vilka legitimationsuppgifter behöver jag?" knapp.

Utvecklarens konsol visar nu API-nyckeln. Du måste kopiera den här nyckeln och klistra in den under plugin-inställningarna på din WordPress-webbplats.

Du måste fortfarande aktivera ett annat API i ditt Google Developers-projekt. Klicka på biblioteket i Google Developer Console och klicka sedan på "Google Maps JavaScript API".

Detta tar dig till API: s översiktssida där du måste klicka på länken "Aktivera" för att fortsätta.

Detta API behöver inte en extra API-nyckel, så du är nu bra att gå.

Aktivera autofullständig adress i WordPress-formulärfält

Du kan lägga till autokomplett adressfunktion till något formulärfält som skapats av ett WordPress-formulärbyggare-plugin.

Vi kommer att använda WPForms i denna handledning. Men dessa anvisningar kommer att fungera oavsett vilken kontaktform plugin du använder.

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

När du är klar lägger du till det här formuläret på din webbplats som du normalt gör.

Gå sedan till posten eller sidan där du har lagt till ditt formulär. Du måste högerklicka på adressfältet och välj "Inspektera" från webbläsarmenyn.

Du kommer att se namn, ID och CSS klassvärden för adressfältet.

Till exempel, i denna skärmdump är vår forms namnvärde wpforms [fält] [9] [Adress1], ID-värdet är wpforms-352-field_9, och css klass är wpforms-field-adress Adress1.

Du behöver bara kopiera en av dessa värden och klistra in den på plugin-inställningssidan.

Om du vill rikta flera fält i flera former kan du bara lägga till ett komma och lägga till ett annat värde.

Glöm inte att klicka på Spara-knappen för att lagra dina ändringar.

Det är allt, du kan nu besöka din formulärsida och försöka ange en adress. Formfältet börjar automatiskt visa förslag med hjälp av Google-platser och Google Maps.

Vi hoppas att den här artikeln hjälper dig att lära dig hur du lägger till autofullständig för adressfält i WordPress. Du kanske också vill se vår lista över 24 måste ha pluggar för WordPress för företagswebbplatser.

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