Autocomplete toevoegen voor adresvelden in WordPress

Onlangs heeft een van onze gebruikers ons gevraagd hoe u automatisch aanvullen voor adresvelden in WordPress-formulieren kunt toevoegen. Met automatisch aanvullen kunnen gebruikers snel een adres selecteren op basis van suggesties die tijdens het typen in realtime worden gegenereerd. In dit artikel laten we u zien hoe u automatisch aanvullen voor adresvelden toevoegt in WordPress met de Google Places API.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Het eerste wat u hoeft te doen, is het installeren en activeren van de automatisch aanvullen van adressen met behulp van de Google Place Api-plug-in. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Bij activering moet je bezoeken Instellingen »Google Autocomplete pagina om plugin-instellingen te configureren.

U wordt gevraagd om de API-sleutel van Google Places in te voeren. Met deze API-sleutel kan uw website verbinding maken met Google Maps en suggesties voor automatisch aanvullen in realtime uit hun database ophalen.

Ga naar de website van Google Developer Console en maak een nieuw project.

Er verschijnt een pop-up met de vraag om een ​​naam voor uw project op te geven. Gebruik een naam die u later helpt bij het identificeren van het project en klik vervolgens op de knop Maken.

De pop-up verdwijnt, wacht een paar seconden en u wordt automatisch doorgestuurd naar uw nieuwe project.

Nu ziet u de lijst met populaire Google API's die u voor uw project kunt inschakelen. U moet 'Google Places API Web Service' zoeken en erop klikken.

Dit brengt u naar een overzichtspagina die uitlegt hoe deze API werkt. U moet op de koppeling Activeren klikken om door te gaan.

De ontwikkelaarsconsole zal nu de Google Places API inschakelen voor uw project.

U hebt echter nog steeds referenties nodig om de API op uw website te gebruiken. Dus ga je gang en klik op de knop Inloggegevens maken om door te gaan.

Op het volgende scherm moet u klikken op 'Welke inloggegevens heb ik nodig?' knop.

De ontwikkelaarsconsole toont u nu de API-sleutel. U moet deze sleutel kopiëren en deze plakken onder de plug-ininstellingen op uw WordPress-website.

U moet nog steeds een andere API inschakelen voor uw Google Developers-project. Klik op de bibliotheek in Google Developer Console en klik vervolgens op 'Google Maps JavaScript API'.

Dit brengt u naar de overzichtspagina van de API waar u op de koppeling 'Inschakelen' moet klikken om door te gaan.

Deze API heeft geen extra API-sleutel nodig, dus u bent nu klaar om te gaan.

Adres automatisch aanvullen inschakelen in WordPress formuliervelden

U kunt de functie voor het automatisch aanvullen van adressen toevoegen aan elk formulierveld dat is gemaakt met een WordPress-invoegtoepassing voor formulieropbouw.

We zullen WPForms gebruiken in deze tutorial. Deze instructies werken echter, ongeacht welke plug-in voor het contactformulier u gebruikt.

Eerst moet u een formulier maken met een adresveld of een set adresvelden.

Als u klaar bent, voegt u dit formulier toe aan uw website zoals u dat normaal zou doen.

Ga vervolgens naar het bericht of de pagina waar je je formulier hebt toegevoegd. U moet met de rechtermuisknop op het adresveld klikken en 'Inspecteren' selecteren in het browsermenu.

U ziet de klassenaam naam, ID en CSS voor het adresveld.

In deze schermafbeelding is de naamwaarde van ons formulier bijvoorbeeld wpforms [velden] [9] [address1], ID-waarde is wpforms-352-field_9, en CSS-klasse is wpforms-field-adres-address1.

U moet slechts een van deze waarden kopiëren en op de pagina met instellingen voor plug-ins plakken.

Als u meerdere velden in meerdere formulieren wilt targeten, kunt u eenvoudig een komma toevoegen en een andere waarde toevoegen.

Vergeet niet op de knop Opslaan te klikken om uw wijzigingen op te slaan.

Dat is alles, u kunt nu uw formulierpagina bezoeken en een adres invoeren. In het formulierveld worden automatisch suggesties weergegeven met Google-plaatsen en Google Maps.

We hopen dat dit artikel u heeft geholpen bij het toevoegen van autocomplete voor adresvelden in WordPress. Wellicht wilt u ook dat onze lijst met 24 WordPress-plug-ins voor zakelijke websites bevat.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.