Gå till innehållet

Hur man automatiskt fylla i adressfält

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Nyligen frågade en av våra användare oss hur man lägger till autoslutförande för adressfält på WordPress-formulär. Med automatisk komplettering kan användare snabbt välja adressen till förslag som genereras i realtid när 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 blir ombedd att ange Google Places API-nyckeln. Med denna API-nyckel kan din webbplats ansluta till Google Maps och hämta förslag på deras databas i realtid.

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

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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 autofullständig funktionalitet i fält som skapas av formulär skapande plugins.

Vi kommer att använda WPForms i denna handledning. Men detta plugin kan fungera med nästan alla form skapande plugin.

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

När du är klar lägger du till detta formulär på din webbplats som normalt.

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

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

Denna artikel innehåller 1 kommentar

  1. Vet jag vad jag ska göra för att blockera automatisk fyllning av formulär på sidan?
    För ofta om någon har mycket data, till exempel genom att klicka på namnet på autoslutföringen, hoppar resten på oss och är ofta felaktig och kunden ser det inte och skickar fel formulär ? Naturligtvis är detta WordPress.

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
15 aktier
del12
tweet
Enregistrer3