Skapa enkelt din webbplats idag!

ELEMENTOR är världens enklaste bloggbyggare!

sluta slöseri med tid och mycket pengar att betala en utvecklare när du kan Skapa enkelt din WordPress-webbplats eller blogg med en professionell design bara några minuter ! Inga tekniska kunskaper krävs.

Nyligen frågade en av våra användare oss hur man lägger till automatisk komplettering för adressfält på former av WordPress. Med automatisk komplettering kan användare snabbt välja adressen från förslag som genereras i realtid medan de skriver.

I den här handledningen kommer vi att visa dig hur du lägger till autoslutförande för adressfält på WordPress med " Googles API adresser ".

Så här lägger du till autoslutförande på wordpress 1

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

Efter aktivering måste du besöka platsen " Inställningar> Google Autoslutför Sida för att konfigurera insticksinställningarna.

Konfigurera autoslutförande på wordpress

Du kommer att bli ombedd att ange Google Places API-nyckel. Denna API-nyckel tillåter din webbplats att ansluta till Google Maps och hämta förslag från deras realtidsdatabas.

Gå till " Google utvecklarkonsolen För att skapa ett nytt projekt.

Google utveckla konsolen

Ett fönster visas där du ber dig ange ett namn för ditt projekt. Använd ett namn som hjälper dig att identifiera projektet senare och klicka sedan på knappen "Skapa".

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

Nu ser du listan över Google API: er som du kan aktivera för ditt projekt. Du måste hitta och klicka på " Google Places API webbtjänst ".

Lista över google api-nycklar

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

Google place api web service module-aktivering

Utvecklarkonsolen aktivera Google API plats för ditt projekt.

Du behöver dock fortfarande referenser för att använda API: et på din webbplats. Så fortsätt och klicka på knappen Skapa referenser för att fortsätta.

Skapa referenser

På nästa skärm måste du klicka på knappen "Vilka referenser behöver jag".

All information jag behöver

Developer Console visar nu API-nyckeln. Du måste kopiera den här nyckeln och klistra in den i inställningarna på din WordPress-webbplats.

Kopiera en google api-nyckel

Du måste alltid aktivera en annan API-nyckel i ditt Google Developers-projekt. Klicka på biblioteket i Google Developer Console och klicka sedan på " Google Maps JavaScript API ".

Google maps API för javascript

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

Google Map Javascript API

Detta API behöver ingen ytterligare API-nyckel, så du är nu redo att fortsätta.

Hur man möjliggör autokomplettering i formulärfält

Du kan lägga till en autokompletterande funktion i fälten som skapats av skapande plugins former.

Vi kommer att använda WPForms i denna handledning. Det här pluginet kan dock fungera med nästan alla byggarplugin. formen.

Först måste du skapa en formen 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 i din webbplats som du brukar.

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

Wordpress formulär wpforms adressfält

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

Till exempel, i den här inspelningen, attributnamnet " wpforms [fält] [9] [address1] ID-värdet är " wpforms-352-field_9 Och klassen css är " wpforms-field-adress address1 ".

Du måste bara kopiera ett av dessa värden och klistra in det på inställningssidan för plugin.

Om du vill rikta in sig på flera fält i flera former kan du helt enkelt lägga till ett komma och lägga till andra värden.

Lägg till adresser från wordpress-fält

Glöm inte att klicka på knappen « Enregistrer För att spara dina ändringar.

Det är det, du kan nu besöka formulärsidan och försöka ange en adress. Formulärfältet börjar visa förslag med Google Places och Google Maps.

Google och google map plats

Det här är allt för den här tutorialen, jag hoppas att det kommer att tillåta dig att lägga till autofyllt i WordPress-fälten.

%d bloggare gillar denna sida: