Jak osadzić mapę Google w formularzach kontaktowych (z pinezką mapy)

Wypełniliśmy już sporo formularzy online i często zdarza się, że ciągle wpisujemy ten sam adres.

Wyobraź sobie to zamiast tego: odwiedzający ląduje na Twojej stronie kontaktowej, widzi automatycznie wypełniony adres i już umieszczoną na mapie pinezkę. Jest to szybkie, osobiste i oszczędza im czas.

Dodanie mapy Google z pinezką lokalizacji do formularza kontaktowego WordPress może wydawać się drobnym usprawnieniem, ale może mieć duży wpływ. Z naszego doświadczenia z WPForms wynika, że może to pomóc zwiększyć wskaźnik ukończenia formularzy i zapewnić użytkownikom płynniejsze, bardziej satysfakcjonujące doświadczenie.

W tym przewodniku krok po kroku pokażemy Ci, jak osadzić interaktywną mapę Google bezpośrednio w Twoim formularzu kontaktowym WordPress – bez potrzeby kodowania. 🗺️

Dlaczego osadzać mapę Google w formularzu kontaktowym?

Konfigurując swoją stronę WordPress, prawdopodobnie dodałeś formularz kontaktowy, aby odwiedzający mogli się z Tobą skontaktować w sprawie Twoich produktów lub usług. A jeśli masz fizyczny sklep, prawdopodobnie dodałeś mapę Google, aby ułatwić ludziom znalezienie Twojej lokalizacji.

Wielu właścicieli firm nie wie, że można wykorzystać geolokalizację do automatycznego wypełniania pola adresu w formularzu kontaktowym i wyświetlania lokalizacji odwiedzającego na mapie. Następnie mogą oni łatwo zweryfikować poprawność swojego adresu lub przeciągnąć pinezkę, aby go w razie potrzeby zmienić.

Poprawia to ogólne doświadczenie użytkownika i może pomóc zmniejszyć liczbę porzuconych formularzy.

Znajomość lokalizacji użytkowników pozwala również na wykorzystanie geotargetingu do wyświetlania spersonalizowanych treści i zwiększania współczynników konwersji.

Teraz przyjrzyjmy się, jak osadzić mapę Google w formularzach kontaktowych. Oto przegląd wszystkich tematów, które omówimy w tym artykule:

• How to Embed a Google Map in a Contact Form
  • Generowanie klucza API Google Places
  • Ograniczanie klucza Google Places API
  • Dodawanie klucza API Google do ustawień WPForms
  • Tworzenie formularza kontaktowego z osadzonym Mapą Google w WordPress
  • Dodawanie formularza kontaktowego do Twojej witryny
  • Wyświetlanie mapy Google w formularzu kontaktowym
• Jak przeglądać dane lokalizacji użytkownika w formularzu
• Samouczek wideo: Osadzanie mapy Google w formularzach kontaktowych
• Dodatkowe zasoby 🔗: Najlepsze przewodniki dotyczące korzystania z map w WordPressie

Zacznijmy!

Jak osadzić mapę Google w formularzu kontaktowym

W tym samouczku będziemy używać WPForms, najlepszej wtyczki formularzy kontaktowych dla WordPress. Pozwala ona łatwo tworzyć dowolny typ formularza za pomocą prostego kreatora formularzy metodą przeciągnij i upuść.

Dostępna jest bezpłatna wersja WPForms ze wszystkimi funkcjami potrzebnymi do stworzenia podstawowego formularza kontaktowego. Jednak w tym samouczku użyjemy WPForms Pro, ponieważ zawiera on dodatek Google Map.

ℹ️ Czy wiesz? W WPBeginner używamy WPForms do wielu rzeczy. Na przykład, zasila on nasz formularz kontaktowy i coroczne ankiety satysfakcji czytelników. Mamy z nim świetne doświadczenia i możesz dowiedzieć się więcej w naszej szczegółowej recenzji WPForms.

Pierwszą rzeczą, którą musisz zrobić, jest utworzenie konta WPForms. Na stronie internetowej WPForms kliknij „Get WPForms Now”, a następnie zakończ proces rejestracji.

Po wykonaniu tej czynności znajdziesz się w panelu konta WPForms, gdzie możesz uzyskać dostęp do pliku ZIP WPForms Pro i klucza licencyjnego.

Następnie możesz zainstalować i aktywować wtyczkę WPForms.

Z obszaru administracyjnego WordPress możesz przejść do Wtyczki » Dodaj nową wtyczkę.

Następnie użyj paska wyszukiwania, aby szybko znaleźć wtyczkę WPForms.

W wynikach wyszukiwania po prostu kliknij przycisk „Zainstaluj teraz”, a następnie „Aktywuj”, aby zacząć z niej korzystać na swojej stronie WordPress.

Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić stronę WPForms » Ustawienia, aby wprowadzić swój klucz licencyjny. Informacje te znajdziesz w swoim obszarze konta WPForms. Upewnij się, że kliknąłeś przycisk „Zweryfikuj klucz”, aby aktywować swoją licencję.

Następnie musisz przejść do WPForms » Dodatki i znaleźć dodatek Geolocation.

Możesz użyć opcji wyszukiwania u góry ekranu lub po prostu przewijać dostępne dodatki.

Gdy ją znajdziesz, kliknij przycisk „Zainstaluj dodatek”.

Teraz, gdy dodatek Geolocation jest aktywny, musisz skonfigurować jego ustawienia. Aby to zrobić, przejdź do WPForms » Ustawienia i kliknij zakładkę „Geolocation”.

Na tej stronie musisz wybrać dostawcę geolokalizacji.

W tym samouczku wybierzemy „Google Places API”.

Powinieneś również zaznaczyć pole wyboru „Aktualna lokalizacja”. Prosi to przeglądarkę użytkownika o jego lokalizację, aby automatycznie wstępnie wypełnić pole adresu. Oszczędza to czas i pomaga poprawić dokładność.

Następnie musisz przewinąć w dół do ustawień Google Places API.

Tutaj WPForms poprosi Cię o podanie klucza API Google. Możesz uzyskać swój klucz od Google, a następnie wkleić go w pole wprowadzania. Pokażemy Ci, jak to zrobić w następnej sekcji.

Generowanie klucza API Google Places

Klucz API dla Google Places możesz uzyskać, odwiedzając stronę Google Cloud Console.

Najpierw po prostu wybierz swój kraj z listy rozwijanej i zaakceptuj warunki korzystania z usługi. W niektórych krajach możesz również otrzymać możliwość zapisania się na listę mailingową.

Kiedy będziesz gotowy do przejścia do następnego kroku, kliknij „Zgadzam się i kontynuuj”.

Następnie musisz wybrać projekt dla klucza API. Po prostu kliknij „Wybierz projekt” i wybierz projekt, którego chcesz użyć z listy.

Jeśli nigdy wcześniej nie tworzyłeś projektu lub jest to nowa strona internetowa, której jeszcze nie dodałeś do Google, kliknij „Nowy projekt”, aby ją skonfigurować.

Powinieneś teraz być na stronie „API i usługi”, gdzie możesz włączyć API potrzebne do wyświetlania map Google na Twojej stronie WordPress.

Musisz kliknąć przycisk „+ Włącz interfejsy API i usługi” u góry strony.

To przeniesie Cię do Biblioteki API Google, gdzie będziesz musiał włączyć trzy API map:

• Google Places API – pozwala formularzowi pobierać sugerowane adresy podczas wpisywania przez użytkowników.
• Maps JavaScript API – wyświetla interaktywną mapę na Twojej stronie.
• API Geokodowania – zamienia adres na dokładne współrzędne, dzięki czemu mapa może poprawnie umieścić pinezkę.

Możesz je znaleźć, korzystając z paska wyszukiwania na górze lub klikając przycisk „Wyświetl wszystko” w sekcji Mapy.

Stąd znajdźmy i włączmy API Miejsc. Po jego zlokalizowaniu musisz w nie kliknąć.

Na następnej stronie kliknij przycisk „Włącz”.

Następnie powinieneś zrobić to samo dla interfejsu API JavaScript Maps i interfejsu API Geocoding.

Po włączeniu trzech API możesz utworzyć klucz API.

W menu po lewej stronie musisz przejść do Interfejsy API i usługi » Poświadczenia.

Stąd będziesz mógł kliknąć przycisk „+ Utwórz dane uwierzytelniające” u góry ekranu, a następnie wybrać opcję „Klucz API”.

Twój klucz API zostanie utworzony i wyświetlony w oknie podręcznym.

Później w tym samouczku będziesz musiał skopiować ten klucz do ustawień WPForms. Na razie przyjrzyjmy się, jak nałożyć pewne ograniczenia na użycie klucza API.

Ograniczanie klucza Google Places API

Nadmierne używanie klucza API może spowodować wyjście z darmowego poziomu i kosztować więcej, niż się spodziewasz. Zalecamy ograniczenie klucza, aby zapobiec nieautoryzowanemu lub nieoczekiwanemu użyciu.

Aby to zrobić, musisz kliknąć link „Ogranicz klucz” na dole okna podręcznego „Klucz API został utworzony” na zrzucie ekranu powyżej.

Na następnej stronie możesz skonfigurować kilka różnych ograniczeń. Pierwszym z nich są „Ograniczenia aplikacji”.

W tej sekcji powinieneś kliknąć opcję „Referencje HTTP (witryny)”. Wtedy klucz będzie używany tylko na stronach internetowych.

Następnie upewnij się, że jest on używany tylko na Twojej własnej stronie internetowej. Aby to zrobić, przewiń w dół do sekcji „Ograniczenia witryny” i kliknij przycisk „Dodaj element”.

Teraz powinieneś wpisać nazwę domeny swojej witryny w polu „Nowy element” używając wzorca *example.com/*.

Jeśli będziesz używać Map Google na więcej niż jednej stronie internetowej, możesz kliknąć przycisk „Dodaj element” i dodać tyle domen, ile potrzebujesz.

Teraz, gdy ograniczyłeś klucz API tylko do swoich własnych stron internetowych, możesz również ograniczyć go do pracy tylko z tymi interfejsami API Google, które dodałeś powyżej.

Musisz przewinąć w dół do sekcji „Ograniczenia API” na stronie i wybrać opcję „Ogranicz klucz”. Spowoduje to wyświetlenie listy rozwijanej, w której należy zaznaczyć pola „API Geokodowania”, „API JavaScript Map” i „API Miejsc”.

Po wykonaniu tej czynności kliknij link „OK”, aby zapisać ustawienia.

Na koniec upewnij się, że kliknąłeś przycisk „Zapisz” na dole strony, aby aktywować wszystkie wybrane przez Ciebie ograniczenia.

Pamiętaj, że zastosowanie zmian w ustawieniach może potrwać do 5 minut.

Dodawanie klucza API Google do ustawień WPForms

Teraz zobaczysz klucz API wymieniony obok innych dostępnych kluczy. Powinieneś kliknąć ikonę „Kopiuj”, aby dodać klucz do strony ustawień Geokodowania WPForms.

Pamiętaj, że jeśli kiedykolwiek będziesz musiał zmienić jakiekolwiek ustawienia lub ograniczenia API, możesz kliknąć ikonę Edytuj po prawej stronie.

Teraz musisz wrócić do swojej strony internetowej, która powinna być nadal na stronie WPForms » Ustawienia » Geolocation.

Po przejściu na stronę wklej klucz w pole „Google Places API” w ustawieniach WPForms. I upewnij się, że kliknąłeś przycisk „Zapisz ustawienia”.

Tworzenie formularza kontaktowego z osadzonym Mapą Google w WordPress

Teraz, gdy skonfigurowałeś WPForms i Google Places, możesz utworzyć formularz kontaktowy w WordPress.

Istnieje kilka różnych sposobów tworzenia formularzy WordPress za pomocą WPForms.

Po pierwsze, możesz zacząć od pustego obszaru roboczego. Daje to pełną kontrolę nad dodawaniem i układaniem pól formularza od podstaw, co czyni go idealnym do w pełni spersonalizowanych projektów.

Po drugie, możesz użyć kreatora formularzy AI, aby wygenerować kompletny formularz na podstawie prostego polecenia tekstowego. Jest to świetny sposób na zaoszczędzenie czasu, jeśli nie wiesz, od czego zacząć.

Na koniec możesz wybrać spośród ponad 2000 gotowych szablonów formularzy. Niezależnie od tego, czy potrzebujesz formularza kontaktowego, ankiety, formularza rezerwacji, czy czegoś bardziej złożonego, prawdopodobnie znajdzie się szablon, który spełni Twoje potrzeby!

Możesz zacząć, postępując zgodnie z naszym przewodnikiem jak stworzyć formularz kontaktowy w WordPress.

Po utworzeniu podstawowego formularza musisz dodać pole adresu. Możesz użyć bloku Adres lub pola Tekst jednoliniowy.

W tym samouczku użyjemy pola „Tekst jednoliniowy”. Zatem po prostu przeciągnij blok „Tekst jednoliniowy” na formularz.

Następnie dostosujemy ustawienia pola.

Aby to zrobić, musisz kliknąć pole, aby wyświetlić ustawienia pola Tekst jednowierszowy.

Najpierw powinieneś zmienić etykietę pola na „Adres”. Pokaże to użytkownikom, co powinni wpisać w polu.

Następnie musisz zmienić ustawienia pola, aby wyświetlało ono mapę w formularzu WordPress. Aby to zrobić, kliknij zakładkę Zaawansowane.

Po przejściu do tego miejsca, poszukaj opcji „Włącz autouzupełnianie adresu” na dole ustawień i przełącz ją w pozycję „Włącz”.

Zobaczysz wtedy kolejną opcję, „Wyświetl mapę”, którą również należy włączyć. Możesz wybrać wyświetlenie mapy nad polem lub pod nim.

Dodawanie formularza kontaktowego do Twojej witryny

Najprostszym sposobem dodania formularza kontaktowego do witryny jest kliknięcie przycisku „Osadź”. Znajdziesz go obok przycisku „Zapisz” na górze ekranu edytora formularza.

Zostaniesz zapytany, czy dodać formularz do istniejącej strony, czy utworzyć nową.

W tym samouczku klikniemy przycisk „Utwórz nową stronę”.

Następnie powinieneś nadać stronie nazwę, a następnie kliknąć przycisk „Zaczynajmy!”.

Utworzona zostanie nowa strona o tej nazwie, a Twój formularz kontaktowy zostanie dodany automatycznie.

Wszystko, co musisz zrobić, to kliknąć przycisk „Opublikuj”, aby opublikować stronę.

Wyświetlanie mapy Google w formularzu kontaktowym

Gdy użytkownik odwiedzi Twój formularz kontaktowy, zostanie zapytany, czy chce zezwolić Twojej witrynie na dostęp do jego lokalizacji.

Jeśli klikną przycisk „Zezwól”, ich aktualna lokalizacja zostanie wprowadzona do pola adresu, a na mapie pojawi się pinezka tej lokalizacji.

Ta funkcja autouzupełniania zaoszczędzi czas Twoim odwiedzającym, ułatwiając i przyspieszając wprowadzanie ich adresów.

Jeśli potrzebują zmienić adres, mogą po prostu wpisać nowy lub przeciągnąć pinezkę w inne miejsce na mapie.

Jak przeglądać dane lokalizacji użytkownika w formularzu

Po włączeniu geolokalizacji WPForms będzie również rejestrować lokalizację każdego użytkownika podczas przesyłania formularza. Znajomość lokalizacji użytkowników może pomóc Ci w pozyskiwaniu lepszych leadów.

Musisz przejść do WPForms » Wpisy, a następnie kliknąć swój formularz kontaktowy.

Zobaczysz teraz listę wpisów wypełnionych przez użytkowników dla tego formularza.

Aby wyświetlić konkretne zgłoszenie formularza, po prostu kliknij link „Wyświetl” po prawej stronie.

Zobaczysz teraz dane formularza przesłane przez użytkownika, takie jak jego imię i nazwisko, firmowy adres e-mail i firmowy numer telefonu, wraz z danymi lokalizacyjnymi.

Obejmuje to pinezkę na Mapach Google, lokalizację użytkownika, kod pocztowy i kraj. Należy pamiętać, że dokładność zależy od urządzenia użytkownika; dane GPS z telefonów komórkowych są zazwyczaj bardzo precyzyjne, podczas gdy lokalizacja oparta na adresie IP z komputerów stacjonarnych może być przybliżona.

Oczywiście, jeśli użytkownik nie udzielił pozwolenia formularzowi na poznanie jego lokalizacji, żadne dane lokalizacyjne nie zostaną wyświetlone.

To wszystko. Pomyślnie dodałeś Mapę Google do swojego formularza kontaktowego w WordPress. Możesz również użyć WPForms do tworzenia ankiet w WordPress, tworzenia formularza płatności do akceptowania płatności online i nie tylko.

Samouczek wideo: Osadzanie mapy Google w formularzach kontaktowych

Chcesz zobaczyć, jak to działa? Po prostu kliknij przycisk Odtwórz ▶️ w poniższym samouczku wideo, aby dowiedzieć się, jak osadzić mapę Google w swoim formularzu kontaktowym.

Subskrybuj WPBeginner

Dodatkowe zasoby 🔗: Najlepsze przewodniki dotyczące korzystania z map w WordPressie

Mamy nadzieję, że ten samouczek pomógł Ci nauczyć się, jak osadzić mapę Google w formularzach kontaktowych. Następnie możesz również zapoznać się z innymi naszymi przewodnikami dotyczącymi korzystania z map na Twojej stronie internetowej:

• Jak dodać Google Maps w WordPress (WŁAŚCIWY sposób)
• Jak dodać lokalizator sklepu Google Maps w WordPress
• Jak osadzić Mapy Bing w WordPressie (krok po kroku)
• Jak dodać interaktywną mapę w WordPress
• Najlepsze wtyczki Google Maps dla WordPress (większość jest darmowa)
• Najlepsze wtyczki Mapbox do WordPressa
• Najlepsze wtyczki geolokalizacji i GeoIP dla WordPressa

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.