Hur man bäddar in en Google-karta i kontaktformulär (med kartnål)

Vi har fyllt i en hel del onlineformulär och upptäcker ofta att vi ständigt skriver in samma adress.

Föreställ dig detta istället: en besökare landar på din kontaktsida, ser sin adress automatiskt ifylld och en nål redan placerad på kartan. Det är snabbt, personligt och sparar dem tid.

Att lägga till en Google Maps med en platsnål i ditt WordPress kontaktformulär kan verka som en liten detalj, men det kan ha stor inverkan. Baserat på vår erfarenhet med WPForms kan det bidra till att öka antalet ifyllda formulär och ge användarna en smidigare och mer tillfredsställande upplevelse.

I den här steg-för-steg-guiden visar vi dig hur du bäddar in en interaktiv Google-karta direkt i ditt WordPress-kontaktformulär – ingen kod krävs. 🗺️

Varför bädda in en Googlekarta i ditt kontaktformulär?

När du satte upp din WordPress-webbplats, lade du förmodligen till ett kontaktformulär så att besökare kan nå dig angående dina produkter eller tjänster. Och om du har en fysisk butik, har du förmodligen lagt till en Google Maps för att hjälpa folk att enkelt hitta din plats.

Vad många företagare inte vet är att du kan använda geolokalisering för att automatiskt fylla i adressfältet i ditt kontaktformulär och visa besökarens plats på en karta. Sedan kan de enkelt verifiera att deras adress är korrekt eller dra nålen för att ändra den om det behövs.

Detta förbättrar den övergripande användarupplevelsen och kan bidra till att minska antalet övergivna formulär.

Att känna till dina användares platser låter dig också använda geolokalisering för att visa personligt innehåll och öka konverteringsgraden.

Nu ska vi titta på hur man bäddar in en Google Maps i dina kontaktformulär. Här är en översikt över alla ämnen vi kommer att täcka i den här artikeln:

• How to Embed a Google Map in a Contact Form
  • Generera en Google Places API-nyckel
  • Begränsa din Google Places API-nyckel
  • Lägga till Google API-nyckeln i WPForms-inställningar
  • Skapa ett kontaktformulär med inbäddad Google Map i WordPress
  • Lägga till kontaktformuläret på din webbplats
  • Visa Google Maps i kontaktformuläret
• Hur man visar användarplatsdata i ett formulär
• Videohandledning: Bädda in en Google Maps i kontaktformulär
• Bonusresurser 🔗: Bästa guiderna för att använda kartor på WordPress

Låt oss börja!

Hur man bäddar in en Google-karta i ett kontaktformulär

För den här handledningen kommer vi att använda WPForms, det bästa kontaktformulärpluginet för WordPress. Det låter dig enkelt skapa alla typer av formulär med en enkel dra-och-släpp-formulärbyggare.

Det finns en gratisversion av WPForms tillgänglig med alla funktioner du behöver för att skapa ett grundläggande kontaktformulär. För den här handledningen kommer vi dock att använda WPForms Pro eftersom den inkluderar Google Maps-tillägget.

ℹ️ Visste du? På WPBeginner använder vi WPForms till mycket. Till exempel driver det vårt kontaktformulär och årliga enkäter om läsarnas nöjdhet. Vi har haft en fantastisk upplevelse med det, och du kan läsa mer i vår djupgående WPForms-recension.

Det första du behöver göra är att skapa ett WPForms-konto. På WPForms webbplats klickar du på ‘Get WPForms Now’ och slutför sedan registreringsprocessen.

När det är gjort kommer du till ditt WPForms-kontos instrumentpanel, där du kan komma åt din WPForms Pro ZIP-fil och licensnyckel.

Därefter kan du installera och aktivera WPForms-pluginet.

Från ditt WordPress adminområde kan du gå till Plugins » Lägg till nytt plugin.

Gå sedan vidare och använd sökfältet för att snabbt hitta WPForms-pluginet.

I sökresultaten klickar du helt enkelt på knappen ‘Installera nu’ och sedan ‘Aktivera’ för att börja använda det på din WordPress-webbplats.

För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering måste du besöka sidan WPForms » Inställningar för att ange din licensnyckel. Du hittar denna information i ditt WPForms-kontoområde. Se till att du klickar på knappen ‘Verifiera nyckel’ för att aktivera din licens.

Därefter behöver du navigera till WPForms » Tillägg och hitta Geolocation Addon.

Du kan använda sökfunktionen högst upp på skärmen eller helt enkelt bläddra igenom de tillgängliga tilläggen.

När du har hittat det, gå vidare och klicka på knappen ‘Installera tillägg’.

Nu när tillägget Geolocation är aktiverat måste du konfigurera dess inställningar. För att göra det, navigera till WPForms » Inställningar och klicka på fliken ‘Geolocation’.

På den här sidan måste du välja en geografisk platsleverantör.

För den här handledningen väljer vi ‘Google Places API.’

Du bör också klicka i kryssrutan ‘Aktuell plats’. Detta ber användarens webbläsare om deras plats för att automatiskt förifylla adressfältet. Det sparar tid och hjälper till att förbättra noggrannheten.

Därefter behöver du skrolla ner till inställningarna för Google Places API.

Här kommer WPForms att be dig ange din Google API-nyckel. Du kan hämta din nyckel från Google och sedan klistra in den i inmatningsfältet. Vi visar dig hur du gör det i nästa avsnitt.

Generera en Google Places API-nyckel

Du kan få en API-nyckel för Google Places genom att gå till webbplatsen Google Cloud Console.

Välj först ditt land från en rullgardinsmeny och godkänn användarvillkoren. I vissa länder kan du också erbjudas möjligheten att anmäla dig till en e-postlista.

När du är redo att gå vidare till nästa steg, klicka på ‘Godkänn och fortsätt’.

Därefter behöver du välja ett projekt för API-nyckeln. Klicka helt enkelt på ‘Välj ett projekt’ och klicka på det projekt du vill använda från listan.

Om du inte har skapat ett projekt tidigare, eller om detta är en ny webbplats som du ännu inte har lagt till i Google, bör du klicka på ‘Nytt projekt’ för att ställa in ett.

Du bör nu vara på sidan 'APIs & Services', där du kan aktivera de API:er som behövs för att visa Google Maps på din WordPress-webbplats.

Du behöver klicka på knappen ‘+ Aktivera API:er och tjänster’ högst upp på sidan.

Detta tar dig till Googles API-bibliotek, där du måste aktivera tre kart-API:er:

• Google Places API – låter ditt formulär hämta föreslagna adresser medan användare skriver.
• Maps JavaScript API – visar den interaktiva kartan på din webbplats.
• Geocoding API – omvandlar en adress till exakta koordinater så att kartan kan placera nålen korrekt.

Du kan hitta dessa genom att använda sökfältet högst upp eller genom att klicka på knappen ‘Visa alla’ i avsnittet Kartor.

Härifrån, låt oss hitta och aktivera Places API. När du har hittat det, behöver du klicka på det.

På nästa sida, klicka på knappen ‘Aktivera’.

Därefter bör du göra samma sak för Maps JavaScript API och Geocoding API.

Och när du har aktiverat de tre API:erna kan du skapa en API-nyckel.

I menyn till vänster behöver du navigera till API:er & tjänster » Behörigheter.

Härifrån kommer du att kunna klicka på knappen '+ Skapa behörigheter' högst upp på skärmen och sedan välja alternativet 'API-nyckel'.

Din API-nyckel kommer att skapas och visas i ett popup-fönster.

Senare i den här handledningen behöver du kopiera den nyckeln till WPForms inställningar. För nu, låt oss titta på hur man sätter begränsningar för användningen av API-nyckeln.

Begränsa din Google Places API-nyckel

Överanvändning av API-nyckeln kan flytta dig ur gratisnivån och kosta mer än du förväntar dig. Vi rekommenderar att du begränsar nyckeln för att förhindra obehörig eller oväntad användning.

För att göra det måste du klicka på länken 'Begränsa nyckel' längst ner i popup-fönstret 'API-nyckel skapad' i skärmdumpen ovan.

På nästa sida kan du ställa in flera olika begränsningar. Den första av dessa är ‘Applikationsbegränsningar’.

I det här avsnittet bör du klicka på alternativet ‘HTTP-hänvisare (webbplatser)’. Då kommer nyckeln endast att användas på webbplatser.

Därefter bör du se till att den endast används på din egen webbplats. För att göra det bör du scrolla ner till avsnittet 'Webbplatsbegränsningar' och sedan klicka på knappen 'Lägg till ett objekt'.

Nu bör du skriva in din webbplatsdomännamn i fältet ‘Nytt objekt’ med mönstret *example.com/*.

Om du kommer att använda Google Maps på mer än en webbplats, kan du klicka på knappen 'Lägg till ett objekt' och lägga till så många domäner som du behöver.

Nu när du har begränsat API-nyckeln till endast dina egna webbplatser, kan du också begränsa den till att endast fungera med de Google API:er som du lade till ovan.

Du behöver skrolla ner till avsnittet ‘API-begränsningar’ på sidan och välja alternativet ‘Begränsa nyckel’. Detta kommer att visa en rullgardinsmeny där du bör kryssa i rutorna för ‘Geocoding API’, ‘Maps JavaScript API’ och ‘Places API’.

När du har gjort det bör du klicka på länken 'OK' för att spara dina inställningar.

Slutligen, se till att du klickar på knappen ‘Spara’ längst ner på sidan för att aktivera alla de begränsningar du har valt.

Observera att det kan ta upp till 5 minuter för inställningarna att träda i kraft.

Lägga till Google API-nyckeln i WPForms-inställningar

Du kommer nu att se API-nyckeln listad tillsammans med eventuella andra du har tillgängliga. Du bör klicka på ‘Kopiera’-ikonen så att du kan lägga till nyckeln på WPForms Geolocation-inställningssida.

Notera att om du någonsin behöver ändra några av API:ets inställningar eller begränsningar, kan du klicka på Redigera-ikonen till höger.

Nu måste du återgå till din webbplats, som fortfarande bör vara på sidan WPForms » Inställningar » Geolocation.

Väl där, klistra in nyckeln i fältet ‘Google Places API’ i WPForms inställningar. Och se till att du klickar på knappen ‘Spara inställningar’.

Skapa ett kontaktformulär med inbäddad Google Map i WordPress

Nu när du har konfigurerat WPForms och Google Places är du redo att skapa ett kontaktformulär i WordPress.

Det finns några olika sätt du kan bygga dina WordPress-formulär med WPForms.

Först kan du börja med en tom duk. Detta ger dig full kontroll att lägga till och ordna formulärfält från grunden, vilket gör det perfekt för helt anpassade designer.

För det andra kan du använda AI-formulärbyggaren för att generera ett komplett formulär baserat på en enkel textprompt. Detta är en stor tidsbesparing om du inte är säker på var du ska börja.

Slutligen kan du välja bland över 2 000 färdiga formulärmallar. Oavsett om du behöver ett kontaktformulär, enkät, bokningsformulär eller något mer komplext, finns det troligen en mall som passar dina behov!

Du kan komma igång genom att följa vår guide om hur man skapar ett kontaktformulär i WordPress.

När du har skapat ett grundläggande formulär behöver du lägga till ett adressfält. Du kan använda antingen ett adressblock eller ett fält för enradig text.

För den här handledningen använder vi ett fält för 'Enradig text'. Så, låt oss helt enkelt dra blocket 'Enradig text' till formuläret.

Därefter kommer vi att anpassa fältets inställningar.

För att göra det behöver du klicka på fältet för att visa inställningarna för Enradig text.

Först bör du ändra fältets etikett till 'Adress'. Detta kommer att göra det tydligt för dina användare vad de ska skriva i fältet.

Därefter behöver du ändra fältets inställningar så att det visar en karta i WordPress-formuläret. För att göra det behöver du klicka på fliken Avancerat.

Väl där bör du leta efter alternativet ‘Aktivera adressauto-komplettering’ längst ner i inställningarna och slå på det.

Du kommer då att se ett annat alternativ, 'Visa karta', som du också bör aktivera. Du kan välja att visa kartan ovanför eller under fältet.

Lägga till kontaktformuläret på din webbplats

Det enklaste sättet att lägga till kontaktformuläret på din webbplats är att klicka på knappen ‘Bädda in’. Du hittar den bredvid knappen ‘Spara’ högst upp på formulärredigeringsskärmen.

Du kommer att tillfrågas om du vill lägga till formuläret på en befintlig sida eller skapa en ny.

För den här handledningen klickar vi på knappen ‘Skapa ny sida’.

Därefter bör du ge sidan ett namn och sedan klicka på knappen ‘Låt oss köra!’.

En ny sida med det namnet kommer att skapas, och ditt kontaktformulär kommer att läggas till automatiskt.

Allt du behöver göra är att klicka på knappen 'Publicera' för att göra sidan live.

Visa Google Maps i kontaktformuläret

När en användare besöker ditt kontaktformulär kommer de att tillfrågas om de vill tillåta din webbplats att komma åt deras plats.

Om de klickar på knappen ‘Tillåt’, kommer deras nuvarande plats att anges i adressfältet, och en markör för den platsen kommer att läggas till på kartan.

Denna autokompletteringsfunktion sparar tid för dina besökare genom att göra det snabbare och enklare att ange sina adresser.

Om de behöver ändra adressen kan de helt enkelt skriva en ny eller dra nålen till en annan plats på kartan.

Hur man visar användarplatsdata i ett formulär

När du aktiverar geolokalisering kommer WPForms också att registrera varje användares plats när de skickar in ditt formulär. Att känna till dina användares plats kan hjälpa dig att hitta bättre leads.

Du behöver navigera till WPForms » Entries och sedan klicka på ditt kontaktformulär.

Du kommer nu att se en lista över inlägg som fyllts i av dina användare för det formuläret.

Om du vill visa ett specifikt formulärinlämning klickar du helt enkelt på länken 'Visa' till höger.

Du kommer nu att se formulärdata som skickats in av användaren, såsom deras namn, företags e-postadress och företagets telefonnummer, tillsammans med viss platsdata.

Detta inkluderar en nål på Google Maps, användarens plats, postnummer och land. Notera att noggrannheten beror på användarens enhet; GPS-data från mobiltelefoner är vanligtvis mycket exakt, medan IP-baserad plats från stationära datorer kan vara ungefärlig.

Naturligtvis, om användaren inte gav tillstånd för formuläret att känna till deras plats, kommer inga platsdata att visas.

Det var allt. Du har nu framgångsrikt lagt till en Google Map i ditt kontaktformulär i WordPress. Du kan också använda WPForms för att skapa undersökningar i WordPress, skapa ett betalningsformulär för att ta emot onlinebetalningar, och mer.

Videohandledning: Bädda in en Google Maps i kontaktformulär

Vill du se hur det fungerar? Klicka bara på Spela ▶️-knappen på videohandledningen nedan för att lära dig hur du bäddar in en Google Map i ditt kontaktformulär.

Prenumerera på WPBeginner

Bonusresurser 🔗: Bästa guiderna för att använda kartor på WordPress

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du bäddar in en Google-karta i kontaktformulär. Därefter kanske du också vill se några av våra andra guider om hur du använder kartor på din webbplats:

• Hur man lägger till Google Maps i WordPress (PÅ RÄTT SÄTT)
• Hur man lägger till Google Maps butikslokalisering i WordPress
• Hur man bäddar in Bing Maps i WordPress (steg för steg)
• Hur man lägger till en interaktiv karta i WordPress
• Bästa Google Maps-pluginsen för WordPress (de flesta är gratis)
• Bästa Mapbox WordPress-plugins
• Bästa WordPress-plugins för geolokalisering och GeoIP

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.