Vill du visa en karta i kontaktformuläret på din hemsida?
Du kan använda geolokalisering för att fylla i en användares adress i förväg och ange deras plats genom att placera en markör på en karta. Detta gör det enklare och snabbare att fylla i formuläret, vilket leder till en bättre ifyllningsgrad.
I den här artikeln kommer vi att visa dig hur du bäddar in en Google-karta i kontaktformulär med en kartnål.
Varför infoga en Google-karta i ditt kontaktformulär?
När du skapade din WordPress-webbplats lade du sannolikt till ett kontaktformulär så att besökare enkelt kan kontakta dig om dina produkter och tjänster.
Och om ditt företag har en fysisk plats har du förmodligen också lagt till en Google-karta över din egen plats för att uppmuntra folk att besöka din butik.
Vad många företagsägare inte vet är att du kan använda geolokalisering för att automatiskt fylla i adressfältet på ditt kontaktformulär och visa användarens plats på en karta. Detta förbättrar den övergripande användarupplevelsen och hjälper till att minska formövergivandet.
Genom att känna till dina användares platser kan du också använda geografisk inriktning för att visa personligt innehåll och öka omvandlingsfrekvensen.
Som sagt, låt oss se hur man infogar en Google-karta i kontaktformulär.
Video-tutorial
Om du föredrar skriftliga instruktioner, läs vidare.
Hur man infogar en Google-karta i ett kontaktformulär
För den här handledningen kommer vi att använda WPForms, det bästa kontaktformuläret 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 gratis version av WPForms Tillgänglig med alla funktioner du behöver för att skapa ett grundläggande kontaktformulär. Men för denna handledning kommer vi att använda WPForms Pro eftersom det innehåller Google Maps plugin.
Det första du bör göra är att installera och aktivera WP-formulär plugg. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.
Efter aktivering måste du besöka WPForms » Inställningar sida för att ange din licensnyckel. Du kan hitta denna information i ditt WPForms-kontoområde. Se till att klicka på knappen ‘Verifiera nyckel’ för att aktivera din licens.
Du måste sedan navigera till WPForms » Plugins och leta efter insticksprogrammet för geolokalisering. Du kan använda sökalternativet högst upp på skärmen eller helt enkelt bläddra igenom de tillgängliga plugins.
När du har hittat den måste du installera plugin genom att klicka på knappen “Install Plugin”.
Nu när Geolocation-pluginet är aktiverat måste du konfigurera dess inställningar. För att göra det, navigera till WPForms » Inställningar och klicka på fliken Geolokalisering.
På den här sidan måste du välja en geolokaliseringsleverantör. För den här artikeln kommer vi att välja Google Places API.
Du måste också klicka på kryssrutan “Nuvarande plats”. Detta kommer automatiskt att upptäcka och fylla i adressen när användare fyller i kontaktformuläret, vilket sparar tid och förbättrar noggrannheten.
Därefter måste du rulla ner till Google Places API-inställningar. Du kommer att bli ombedd att fylla i din Google API-nyckel. Du kan hämta din nyckel från Google och sedan klistra in den i fältet. Vi visar dig hur du gör i nästa avsnitt.
Genererar en Google Places API-nyckel
Du kan få en API-nyckel för Google Places genom att gå till Google Cloud Console hemsida.
Du kommer att bli ombedd att välja ditt land från en rullgardinsmeny och acceptera användarvillkoren. I vissa länder kan du också erbjudas möjligheten att registrera dig för en e-postlista.
När du är redo att gå vidare till nästa steg, klicka på “Acceptera och fortsätt.”
Därefter måste du välja ett projekt för API-nyckeln. Klicka bara på “Välj ett projekt” och klicka på det projekt du vill använda i listan.
Om du inte har skapat ett projekt tidigare, eller om det är en ny webbplats som du inte har lagt till på Google ännu, måste du klicka på “Nytt projekt” för att skapa ett.
Notera: Google kommer att be dig aktivera fakturering för det projektet för att kunna använda Google Places API. De erbjuder de första $300 gratis, vilket är tillräckligt för att täcka en enkel kartinsats som den vi skapar i den här handledningen. Webbplatser med lägre trafik kommer inte att behöva betala någonting och kommer att be ditt tillåtelse att uppdatera innan de tar ut några avgifter.
Du bör nu vara på sidan ‘API:er och tjänster’ där du kan aktivera de API:er som behövs för att visa Google Maps på din webbplats. Du måste 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 olika mappnings-API:er.
Du kan hitta dem genom att använda sökfunktionen högst upp på sidan eller genom att klicka på länken “Se alla” bredvid kartavsnittet.
Först måste du hitta och aktivera Places API. När du har hittat den måste du klicka på den. På nästa sida måste du klicka på knappen “Aktivera”.
Efter det måste du göra samma sak med Maps JavaScript API och Geocoding API.
Nu när du har aktiverat alla tre API:erna kan du skapa en API-nyckel.
I menyn till vänster måste du navigera till API och tjänster » Inloggningsuppgifter.
Härifrån kommer du att kunna klicka på knappen ‘+ Skapa inloggningsuppgifter’ längst upp på skärmen och sedan välja alternativet ‘API Key’.
Din API-nyckel kommer att skapas och visas i ett popup-fönster.
Senare i den här handledningen måste du kopiera den nyckeln till dina WPForm-inställningar. För nu, låt oss ta en titt på hur man inför vissa begränsningar för API-nyckelanvändning.
Begränsa din Google Places API-nyckel
Överdriven användning av API-nyckeln kan sparka dig ur gratisplanen och kosta mer än förväntat. 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 “Skapad API-nyckel” i skärmdumpen ovan.
På nästa sida kan du konfigurera flera olika begränsningar. Den första av dessa är “Ansökningsbegränsningar”. I det här avsnittet måste du klicka på alternativet ‘HTTP-hänvisningar (webbplatser)’. Då kommer nyckeln endast att användas på webbplatser.
Därefter måste du se till att den bara används på din egen webbplats. För att göra det måste du rulla ner till avsnittet “Webbplatsbegränsningar” och klicka sedan på knappen “Lägg till ett objekt”.
Nu måste du skriva in domännamnet för din webbplats i fältet “Nytt objekt” med hjälp av mönstret *example.com/*.
Om du ska 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 du behöver.
Nu när du har begränsat API-nyckeln till endast dina egna webbplatser kan du också begränsa den så att den bara fungerar med Googles API:er som du lagt till tidigare.
Du måste rulla ner till avsnittet “API-begränsningar” på sidan och välja alternativet “Begränsa nyckel”. Detta visar en rullgardinsmeny där du måste markera rutorna ‘Geocaching API’, ‘Map JavaScript API’ och ‘Places API’.
När du har gjort det måste du klicka på länken “OK” för att lagra dina inställningar. Slutligen, se till att klicka på “Spara”-knappen längst ner på sidan för att aktivera alla begränsningar du har valt.
Observera att det kan ta upp till 5 minuter innan inställningarna träder i kraft.
Lägg till Google API Key till WPForms-inställningar
Du kommer nu att se API-nyckeln listad med alla andra du har tillgängliga. Du måste klicka på ikonen Kopiera innan du kan lägga till nyckeln på inställningssidan för WPForms Geolocation.
Observera att om du någonsin behöver ändra någon av API-inställningarna eller begränsningarna kan du klicka på ikonen Redigera till höger.
Du bör nu återgå till din webbplats, som fortfarande bör finnas på WPForms » Inställningar » Geolokalisering sida.
Väl där klistrar du in nyckeln i Google Places API-fält i WPForms-inställningarna. När du har gjort det, se till att klicka på knappen “Spara inställningar”.
Notera: Google Places kräver att du har ett SSL-certifikat för din webbplats. För att ta reda på hur du skaffar ett, kolla in vår nybörjarguide om hur du får ett gratis SSL-certifikat.
Skapa ett kontaktformulär med Google Map integrerat i WordPress
Nu när du har ställt in WPForms och Google Places är du redo att skapa ett kontaktformulär i WordPress. Du kan komma igång genom att följa vår guide om hur du skapar ett kontaktformulär i WordPress.
När du har skapat ett grundläggande formulär måste du lägga till ett adressfält. Du kan använda ett adressblock eller ett textfält på en rad. För den här handledningen kommer vi att använda ett textfält på en rad.
Dra bara textblocket på en rad till formuläret.
Därefter kommer vi att anpassa fältinställningarna. För att göra det måste du klicka på fältet för att visa inställningen Enkelradstext.
Först måste du ändra fältetiketten till “Adress”. Detta kommer att göra det tydligt för dina användare vad de ska skriva i fältet.
Därefter måste du ändra fältinställningarna så att den visar en karta på formuläret. För att göra det måste du klicka på fliken Avancerat.
Väl där bör du leta efter alternativet “Aktivera autoslutförande av adress” längst ner i inställningarna och ändra det till “På”. Du kommer då att se ett annat alternativ, “Visa karta”, som du också måste aktivera. Du kan välja att visa kartan ovanför eller under fältet.
Lägg 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å skärmen för formulärredigerare.
Du kommer att tillfrågas om du vill lägga till formuläret i ett befintligt formulär eller skapa en ny sida.
För den här handledningen klickar vi på knappen “Skapa ny sida”.
Därefter måste du ge sidan ett namn och sedan klicka på “Låt oss gå!” knapp.
En ny sida kommer att skapas med det namnet och ditt kontaktformulär läggs till automatiskt.
Allt du behöver göra är att klicka på knappen ‘Publicera’ för att publicera formuläret.
Se Google-kartan 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 sin plats.
Om de klickar på “Tillåt”-knappen kommer deras nuvarande plats att anges i adressfältet och en nål för den platsen kommer att läggas till på kartan.
Den här autoslutförandefunktionen kommer att spara tid för dina besökare genom att göra det snabbare och enklare att skriva deras adresser.
Om de behöver ändra adressen kan de helt enkelt skriva en ny eller dra markören till en annan plats på kartan.
Hur man visar användarens platsdata i ett formulär
När du har aktiverat geolokalisering kommer WPForms också att registrera platsen för varje användare när de fyller i ditt formulär. Att veta var dina användare befinner sig kan hjälpa dig att hitta bättre potentiella kunder.
Du måste navigera till WPForms » Inlägg och klicka sedan på ditt kontaktformulär.
Du kommer nu att se en lista över poster som fyllts i av dina användare för det formuläret.
För att se en viss post klickar du helt enkelt på länken “Visa” till höger.
Du kommer nu att se formulärdata som fyllts i av användaren, såsom deras namn, företags-e-postadress, företagstelefonnummer, tillsammans med vissa platsdata.
Detta inkluderar en nål på Google Maps, användarens plats, postnummer och land, samt deras ungefärliga latitud och longitud.
Naturligtvis, om användaren inte har gett tillåtelse för att formuläret ska veta sin plats, kommer ingen platsdata att visas.
Det var allt, du har framgångsrikt lagt till en Google-karta i ditt kontaktformulär. Du kan också använda WPForms för att skapa undersökningar i WordPress, skapa ett betalningsformulär för att acceptera onlinebetalningar och mer.
Vi hoppas att den här handledningen hjälpte dig att lära dig hur du infogar en Google-karta i kontaktformulär. Du kanske också vill lära dig hur du kör en giveaway eller tävling, eller kolla in vårt expertval av de bästa WordPress-plugins för alla företagswebbplatser.
