Slik legger du til autofullfør for adressefelt i WordPress

Nylig spurte en av brukerne oss hvordan du legger til autofullfør for adressefelt i WordPress-skjemaer. Autofullføring lar brukerne raskt velge adresse fra forslag generert i realtid mens de skriver. I denne artikkelen vil vi vise deg hvordan du legger til autofullfør for adressefelt i WordPress ved hjelp av Google Places API.

Videoopplæring

Hvis du ikke liker videoen eller trenger mer instruksjoner, fortsett å lese.

Det første du må gjøre er å installere og aktivere Adress Autofullføring ved hjelp av Google Place Api-plugin. For mer informasjon, se vår trinnvise veiledning om hvordan du installerer et WordPress-plugin.

Ved aktivering må du besøke Innstillinger »Google Autofullfør side for å konfigurere plugininnstillinger.

Du blir bedt om å skrive inn Google Places API-nøkkel. Med denne API-nøkkelen kan nettstedet ditt koble til Google Maps og hente autofullfør forslag fra databasen i sanntid.

Gå over til Google Developer Console-webområdet og opprett et nytt prosjekt.

En popup vises som ber deg om å gi et navn til prosjektet ditt. Bruk et navn som vil hjelpe deg med å identifisere prosjektet senere, og klikk deretter på opprett-knappen.

Popupen vil forsvinne, vent i noen sekunder, og du blir automatisk omdirigert til ditt nye prosjekt.

Nå ser du listen over populære Google APIer som du kan aktivere for prosjektet ditt. Du må finne og klikke på 'Google Places API-webtjeneste'.

Dette tar deg til en oversiktsside som forklarer hvordan denne API-en fungerer. Du må klikke på Aktiver-koblingen for å fortsette.

Utviklerkonsoll vil nå aktivere Google Places API for prosjektet ditt.

Du vil imidlertid fortsatt trenge legitimasjon for å bruke API på nettstedet ditt. Så gå videre og klikk på opprett credentials-knappen for å fortsette.

På neste skjerm må du klikke på 'Hvilke legitimasjon trenger jeg?' knapp.

Utviklerkonsoll vil nå vise deg API-nøkkelen. Du må kopiere denne nøkkelen og lime den inn under plugininnstillingene på WordPress-nettstedet ditt.

Du må fortsatt aktivere en annen API i Google Developers-prosjektet ditt. Klikk på biblioteket i Google Developer Console og klikk deretter på "Google Maps JavaScript API".

Dette tar deg til APIs oversiktsside der du må klikke på koblingen Aktiver for å fortsette.

Denne API-en trenger ikke en ekstra API-nøkkel, så du er nå god til å gå.

Aktiverer Autofullfør Adresse i WordPress Form Fields

Du kan legge til autofullfør adressefunksjon til et hvilket som helst skjemafelt som er opprettet av et WordPress-skjemabygger-plugin.

Vi bruker WPForms i denne opplæringen. Disse instruksjonene vil imidlertid fungere uansett hvilken kontaktformular plugin du bruker.

Først må du opprette et skjema som har et adressefelt eller et sett med adressefelt.

Når du er ferdig, legg til dette skjemaet på nettstedet ditt slik du vanligvis gjør det.

Deretter går du til innlegget eller siden hvor du har lagt til skjemaet ditt. Du må høyreklikke adressefeltet og velge 'Inspiser' fra nettlesermenyen.

Du vil se navn, ID og CSS klasse verdier for adressefeltet.

For eksempel, i dette skjermbildet er skjemaets navnverdien wpforms [felter] [9] [Adresse 1], ID-verdien er wpforms-352-field_9, og css klassen er wpforms-field-adresse-Adresse 1.

Du må bare kopiere en av disse verdiene og lime den inn på plugininnstillingssiden.

Hvis du vil målrette flere felt i flere former, kan du bare legge til et komma og legge til en annen verdi.

Ikke glem å klikke på lagre-knappen for å lagre endringene dine.

Det er alt, du kan nå gå til skjema siden din og prøve å skrive inn en adresse. Skjemafeltet begynner automatisk å vise forslag ved hjelp av Google-steder og Google Maps.

Vi håper denne artikkelen hjalp deg med å lære hvordan du legger til autofullfør for adressefelt i WordPress. Du vil kanskje også se vår liste over 24 må ha WordPress-plugins for bedriftsnettsteder.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.