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
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
M K Soleman Ahmed says
It is not working now.
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look and find an alternative.
Administratör
Vinod says
autocomplete is coming in the first filed but not in zip and state fields, please advice.
WPBeginner Support says
Hi Vinod,
Sadly, for that customization, you would need to reach out to the plugin’s support for if they currently support multiple fields
Administratör
Mooki says
It works thanks, I had searched of websites and plugins and nothing worked until I got to this helpful site
WPBeginner Support says
Glad our site could help you
Administratör
Fabiano Hirtz says
I have a travel site, tours and transfers, I would like to install this tool, when the client selected the place of visit and the arrival was not transferred, or tour, but it is not a contact form, but rather a search form, does it work? I put the class, did everything correctly, it still does not work. Can someone help me?
Jay Kuntal says
Hey, I tried a lot with getting API. It works fine when i use custom code from google on code pen. But when i put the same API on this plugin, it doesn’t work.
I have enabled two APIs – Places Web and Maps JS with credentials on Places Web.
What am i missing here
Thanks
ahmer says
Hi jay,
did you get it working? i’m stuck, can’t seem to get it working.
Tess says
Curious to know how to set a default country to appear first (instead of the default US addresses). Do you have any idea if there is a shortcode or some way to do this with this plugin?
BTW, I got the plugin working by just adding into the ”Name” field. It works fine for me apart from wanting it to show AU addresses first.
asima says
How to populate the ’current location’ in ’area/neighborhood ’ select dropdown as the first select option (rest of the options coming from the database) ?
steve hajjaj says
Hi there thanks for the article. I have followed the process you described but I still cannot get autocomplete to work at all. Is there something wrong with my google developers account ? as I can see the 2 APIs are enabled but cannot see any requests. Thanks
WPBeginner Support says
Hi Steve,
Make sure that you are targeting the correct CSS class or ID used by your form’s address field.
Administratör
Luke says
I found a bug. When you type in the name of the business, the auto-completed address does NOT include the street number, only the street name (Main St, not 123 Main St). Big problem!!!
Luke says
Also, the zip code is always missing!
Luke says
Also, the only thing that comes through on form submission is the keys a user started typing. The address the user selects is what is shown, but not what is submitted with the form
WPBeginner Support says
Hey Luke,
If you think you have found a bug, then please report it to plugin authors. They may be aware of a fix or can then work on it.
Administratör
Sarah says
If there is one thing we are mindful; it’s the ’mission creep’ of Google into websites and related app areas.
Where able, we try not to engage google into our sites so as to remain ’in control’ in what we do.
But thanks for the insight …
Camilo says
Can it be possible to have the autocomplete fill out the zipcode, state and country as well? I just followed everything here and the address populates automatically but the user still has to manually input their zip code, state, and city
WPBeginner Support says
Hi Camilo,
Currently it is only possible if you use the single field for complete address.
Administratör
Zafar Rathore says
Excellent article for autocomplete. I was looking for such a easy to go method and you guys made it.
Autocomplete really saves a lot of time for end users which ultimately contributes to user friendly environment.
Keep it up guys.
Thank you
Nicholas Johnson says
I’m planned to create WP form with autocomplete, but I don’t know how to do that. After reading this post, I have an idea to create auto-complete forms.