Jak dodać autouzupełnianie pól adresowych w WordPress

Czy kiedykolwiek straciłeś klienta, ponieważ Twój formularz WordPress był zbyt długi lub frustrujący do wypełnienia? Zdarza się to cały czas. Klient jest gotowy do zakupu, ale potem utyka przy wpisywaniu długiego adresu, zwłaszcza na urządzeniu mobilnym.

Jeden mały błąd w pisowni może oznaczać nieudaną dostawę, a w wielu przypadkach klient po prostu rezygnuje, zanim skończy.

Dlatego autouzupełnianie adresu jest tak pomocne. Sugeruje poprawny adres, gdy tylko użytkownicy zaczną pisać, dzięki czemu proces jest szybszy, łatwiejszy i mniej podatny na błędy. Rezultatem są szczęśliwsi klienci i mniej utraconych sprzedaży.

Ponadto, łatwo go skonfigurować. W tym przewodniku pokażę Ci krok po kroku, jak dodać autouzupełnianie adresu do formularzy WordPress za pomocą WPForms i jego dodatku Geolocation.

Dlaczego warto dodać pola adresu z autouzupełnianiem w WordPress?

Dodanie autouzupełniania adresu do Twojej witryny WordPress to łatwy sposób na poprawę doświadczenia użytkownika na Twojej stronie. Na przykład w sklepie eCommerce pomaga klientom szybciej wprowadzać adres i unikać literówek.

Oto jak to działa: Gdy kupujący wpisują tekst, pojawiają się sugestie adresów pobrane z Google Places/Maps. Pozwala im to po prostu wybrać właściwy, a formularz wypełnia się automatycznie.

Zmniejsza to liczbę błędów i przyspiesza proces finalizacji zakupu. Szybsze i dokładniejsze finalizacje zakupu zwiększają sprzedaż i sprawiają, że kupujący chętniej wracają.

Oprócz sklepów internetowych, autouzupełnianie adresów pomaga zmniejszyć liczbę błędów w formularzach rejestracyjnych i rezerwacyjnych. Ponadto znacznie ułatwia wypełnianie wszelkiego rodzaju formularzy, zwłaszcza na urządzeniach mobilnych.

Teraz, gdy rozumiesz korzyści z dodawania pól autouzupełniania adresów w WordPress, pokażę Ci, jak to zrobić, krok po kroku.

Oto krótkie podsumowanie wszystkich kroków, które omówię w tym artykule:

• Krok 1: Wygeneruj klucz API Google Places
• Krok 2: Zainstaluj wtyczkę WPForms i dodatek Geolocation
• Krok 3: Włącz autouzupełnianie adresów w formularzach WordPress
• Krok 4: Utwórz formularz z autouzupełnianiem adresu
• Krok 5: Osadź swój formularz WordPress z autouzupełnianiem adresu
• Dodatkowa wskazówka: Śledź i redukuj porzucenia formularzy w WordPress
• Najczęściej zadawane pytania dotyczące autouzupełniania pól adresowych w formularzach WordPress
• Więcej przewodników dotyczących korzystania z formularzy WordPress

Gotowi? Zacznijmy.

Krok 1: Wygeneruj klucz API Google Places

Aby połączyć WPForms z Google Maps i włączyć funkcję autouzupełniania adresu, będziesz potrzebować klucza API Google Places. Przejdźmy przez ten proces.

Aby uzyskać klucz, musisz przejść do Google Maps Platform, która jest zarządzana w Google Cloud Console. Konsola może wydawać się nieco skomplikowana, ale nie martw się – przeprowadzę Cię przez dokładne kroki, których potrzebujesz.

Najpierw kliknij „Utwórz projekt”.

Na następnym ekranie będziesz musiał nazwać swój nowy projekt. Zalecam użycie nazwy, która pomoże Ci łatwo go zidentyfikować później.

Następnie, jeśli masz organizację, z którą chcesz się połączyć, możesz kliknąć link „Przeglądaj”, aby wyświetlić listę opcji. Alternatywnie możesz wybrać „Brak organizacji”.

Gdy wszystko będzie wyglądać dobrze, możesz kliknąć przycisk „Utwórz”.

Na następnym ekranie przejdź do karty „Biblioteka”.

Stamtąd będziesz musiał aktywować trzy konkretne interfejsy API. Pomyśl o nich jak o zespole, który pracuje razem:

• API Miejsc: To gwiazda, która zapewnia sugestie autouzupełniania adresów podczas pisania.
• Interfejs API JavaScript Map: Pozwala to na wyświetlenie widoku mapy wybranego adresu bezpośrednio w formularzu (co jest fajną, opcjonalną funkcją).
• API geokodowania: Działa ono w tle, konwertując adresy na współrzędne mapy.

Najprostszym sposobem na ich znalezienie jest użycie paska wyszukiwania – wystarczy wyszukać, wybrać API i kliknąć „Włącz”. Powtórz to, aż wszystkie trzy API będą aktywne.

Po zakończeniu wygenerujesz unikalny klucz, którego Twoja witryna będzie używać do komunikacji z interfejsami API Google.

Tak więc, mimo że włączyłeś trzy różne API, nie potrzebujesz trzech oddzielnych kluczy. Pojedynczy klucz API może zapewnić Twojej witrynie dostęp do wszystkich z nich, o ile ustawisz odpowiednie ograniczenia.

Aby to zrobić, możesz przejść do zakładki „Poświadczenia”. Następnie kliknij Utwórz poświadczenia » Klucz API.

Spowoduje to otwarcie panelu do konfiguracji klucza API.

W sekcji „Ograniczenia aplikacji” wybierz „Witryny”, aby klucz działał tylko na Twojej stronie internetowej.

Otworzy to opcję konfiguracji „Ograniczenia witryny”.

Tutaj możesz po prostu wprowadzić swoją nazwę domeny i kliknąć „Gotowe”.

Po tym możesz przejść do sekcji „Ograniczenia API”.

Najpierw włączmy opcję „Ogranicz klucz”.

Następnie w menu rozwijanym „Wybierz API” wybierz trzy właśnie włączone API i kliknij „OK”.

Ograniczy to dostęp klucza tylko do tych API.

Po zapisaniu zmian zobaczysz swój unikalny klucz API.

Skopiuj go – będzie Ci potrzebny w następnym kroku podczas łączenia go z WPForms.

Krok 2: Zainstaluj wtyczkę WPForms i dodatek Geolocation

W tym samouczku użyjemy WPForms, który jest najlepszym kreatorem formularzy kontaktowych dla WordPress. Posiada potężny dodatek Geolocation, który sprawia, że dodawanie autouzupełniania adresów jest niezwykle proste.

W WPBeginner używamy WPForms do wyświetlania naszego formularza kontaktowego i przeprowadzania corocznych ankiet czytelników. Zapoznaj się z naszą pełną recenzją WPForms, aby uzyskać więcej informacji o wtyczce.

Pierwszą rzeczą do zrobienia jest założenie konta WPForms. Na ich stronie kliknij „Zdobądź WPForms teraz”, aby rozpocząć.

Następnie możesz wybrać plan i przejść do procesu płatności.

Po zarejestrowaniu będziesz musiał zainstalować i aktywować wtyczkę WPForms.

Z obszaru administracyjnego WordPress przejdź do Wtyczki » Dodaj nową wtyczkę.

Następnie możesz użyć funkcji wyszukiwania, aby znaleźć wtyczkę WPForms.

W wynikach wyszukiwania kliknij „Zainstaluj teraz”, a następnie kliknij przycisk „Aktywuj”, gdy się pojawi.

Jeśli potrzebujesz pomocy, możesz skorzystać z naszego przewodnika jak zainstalować wtyczkę WordPress.

Po aktywacji będziesz musiał zweryfikować swój klucz licencyjny.

Aby rozpocząć, przejdź do WPForms » Ustawienia, wprowadź swój klucz licencyjny w podanym polu i kliknij przycisk „Zweryfikuj klucz”. Swój klucz licencyjny znajdziesz na swoim koncie WPForms.

Po wykonaniu tej czynności możesz przejść do WPForms » Dodatki z panelu administracyjnego WordPress, aby zainstalować dodatek Geolocation.

Na następnym ekranie przejrzyj opcje (lub użyj paska wyszukiwania) i kliknij „Zainstaluj dodatek” dla dodatku Geolocation.

WPForms automatycznie zainstaluje i aktywuje dodatek w ciągu kilku chwil.

Krok 3: Włącz autouzupełnianie adresów w formularzach WordPress

Teraz, gdy masz swój unikalny klucz API i dodatek Geolocation, czas włączyć autouzupełnianie adresu w swoim formularzu WordPress.

Przejdź do WPForms » Ustawienia z panelu administracyjnego WordPress. Następnie przejdź do zakładki „Geolokalizacja” na górze.

Tutaj znajdziesz kilka opcji, które możesz dostosować:

• Dostawca miejsc – W tym przewodniku wybierzemy „Google Places”.
• Klucz API – Wklej unikalny klucz API, który wygenerowałeś w Kroku 1. Umożliwi to autouzupełnianie adresów i wyświetlanie map Google w Twoich formularzach.
• Aktualna lokalizacja – Włącz tę opcję, aby automatycznie wypełniać lokalizacje użytkowników w Twoich formularzach.

Nie zapomnij kliknąć „Zapisz ustawienia” na dole tego panelu.

Następnie wystarczy włączyć autouzupełnianie w formularzu, w którym chcesz go używać. Możesz edytować istniejący formularz lub utworzyć nowy.

Krok 4: Utwórz formularz z autouzupełnianiem adresu

Do tej pory połączyłeś WPForms z Google Maps. W tym kroku utworzymy formularz z polem Adres.

Aby rozpocząć, przejdź do WPForms » Dodaj nowy z obszaru administracyjnego WordPressa.

Na następnym ekranie możesz nadać swojemu formularzowi nazwę.

Chcesz użyć jasnej, opisowej nazwy, aby łatwiej było ją zorganizować w miarę tworzenia kolejnych formularzy.

Następnie wybierzesz, jak chcesz zbudować swój formularz: używając pustego obszaru roboczego, gotowego szablonu lub kreatora formularzy AI.

Jeśli chcesz skorzystać z kreatora formularzy opartego na sztucznej inteligencji, wystarczy wprowadzić proste polecenie. WPForms AI wygeneruje formularz w ciągu kilku sekund.

W tym samouczku użyję jednak gotowego szablonu.

WPForms oferuje ponad 2000 szablonów formularzy, co ułatwia znalezienie takiego, który jest prawie idealny do Twojego celu.

Gdy znajdziesz dobry szablon do wykorzystania jako bazę, najedź na niego kursorem i kliknij przycisk „Użyj szablonu”. Tutaj użyję szablonu Prosty formularz kontaktowy.

Spowoduje to otwarcie kreatora formularzy metodą przeciągnij i upuść.

Następnie przeciągnij pole „Adres” z lewego panelu i upuść je w swoim formularzu (jeśli jeszcze go tam nie ma).

Gdy pole „Adres” będzie już na miejscu, możesz kliknąć je, aby otworzyć panel „Opcje pola”.

Tutaj możesz dostosować etykietę pola, dodać opis pola lub wybrać inny schemat adresu – amerykański lub międzynarodowy.

Po dostosowaniu ustawień ogólnych możesz przejść do zakładki „Zaawansowane”.

Następnie przewiń panel, aż znajdziesz opcję „Włącz autouzupełnianie adresu”. Przejdź dalej i włącz ją.

Pozwoli to użytkownikom szybko automatycznie wypełnić ich pełny adres, w tym miasto, stan i kod pocztowy, bezpośrednio w Twoim formularzu WordPress.

Włączenie tej funkcji otworzy opcje „Wyświetl mapę”. Po prostu włącz ją, aby dodać mapę do pola „Adres”.

Następnie możesz wybrać, czy mapa ma być wyświetlana nad polem, czy pod nim w Twoim formularzu.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz” u góry, aby zastosować zmiany.

Tutaj możesz dostosować swoje powiadomienia i potwierdzenia. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem jak utworzyć formularz kontaktowy.

Krok 5: Osadź swój formularz WordPress z autouzupełnianiem adresu

Teraz jesteś gotowy, aby dodać swój formularz do swojej witryny WordPress.

Aby rozpocząć, kliknij przycisk „Osadź” na górze kreatora formularzy.

Pojawi się okno podręczne, w którym możesz dodać formularz do istniejącej strony lub utworzyć nową stronę.

W tym samouczku wybiorę „Wybierz istniejącą stronę”.

W następnym wyskakującym okienku możesz wybrać stronę z listy rozwijanej.

Następnie kliknij „Let’s Go!”, aby kontynuować.

WPForms przekieruje Cię do edytora bloków WordPress.

Tutaj kliknij ikonę „+” i dodaj blok WPForms.

Następnie wybierz swój formularz z menu rozwijanego.

WPForms automatycznie załaduje go do edytora treści.

W panelu po prawej stronie możesz dostosować „Ustawienia formularza”.

Na przykład możesz chcieć wyświetlić tytuł lub opis formularza, aby zapewnić odwiedzającym więcej kontekstu.

Możesz również stylizować swój formularz, aby lepiej pasował do motywu Twojej witryny. A gdy będziesz zadowolony z projektu, po prostu kliknij przycisk „Zapisz”.

To wszystko! Możesz teraz odwiedzić stronę swojego formularza i spróbować wpisać adres.

Pole adresu automatycznie wyświetli sugestie z Google Maps, umożliwiając użytkownikom wypełnienie adresu jednym kliknięciem.

Pomyślnie dodałeś funkcję autouzupełniania adresów Google do swoich formularzy.

Użytkownicy będą mogli automatycznie wypełniać Twój formularz, niezależnie od tego, czy dokonują zakupu w Twoim sklepie WooCommerce, czy też dokonują rejestracji użytkownika.

Oto jak to może wyglądać, gdy użytkownicy wybiorą sugestię autouzupełniania adresu:

Dodatkowa wskazówka: Śledź i redukuj porzucenia formularzy w WordPress

Odrzucenie formularza następuje, gdy ludzie opuszczają formularz bez jego przesłania, co często wynika ze złego doświadczenia użytkownika.

Redukcja porzucania formularzy jest ważna, ponieważ może zaszkodzić wzrostowi Twojej listy e-mail, sprzedaży w Twoim sklepie e-commerce i ogólnemu sukcesowi biznesowemu.

Badania pokazują, że ponad 77% kupujących online nie kończy swoich formularzy płatności, co oznacza utratę dużej ilości pieniędzy z powodu niedokończonych sprzedaży.

Śledząc i ulepszając formularze, które ludzie często porzucają, możesz zmniejszyć te straty przychodów.

Chociaż autouzupełnianie może pomóc, nadal istnieją inne czynniki, które mogą przyczynić się do porzucenia formularza:

• Opcjonalne pola stały się obowiązkowe: Zmuszanie ludzi do wypełniania nieistotnych informacji może być bardzo irytujące.
• Niejasne instrukcje: Mylące lub niejasne pola formularza mogą zniechęcić ludzi.
• Niedostosowanie do urządzeń mobilnych: Formularze, z których trudno korzystać na urządzeniach mobilnych, mogą być dużym zniechęceniem.
• Problemy techniczne: Problemy, takie jak niedziałający formularz lub powolne ładowanie, mogą powstrzymać ludzi przed jego wypełnieniem.

Aby uzyskać więcej szczegółów, możesz przeczytać nasz przewodnik na temat jak śledzić i zmniejszać odrzucanie formularzy w WordPress.

Najczęściej zadawane pytania dotyczące autouzupełniania pól adresowych w formularzach WordPress

Jak działa autouzupełnianie adresu?

Twój formularz łączy się z usługą lokalizacyjną, taką jak Google Places lub Mapbox. Gdy użytkownicy wpisują tekst, usługa wyświetla pasujące sugestie adresów. Kiedy wybiorą jedną z nich, pola (ulica, miasto, kod pocztowy itp.) wypełniają się automatycznie.

Czy będzie działać z moim motywem WordPress?

Zazwyczaj tak. Autouzupełnianie działa z większością nowoczesnych motywów WordPress, ale czasami niestandardowe skrypty lub mocno zmodyfikowane motywy mogą powodować konflikty.

Które wtyczki WordPress obsługują autouzupełnianie adresów?

Kilka wtyczek formularzy oferuje tę funkcję, zazwyczaj poprzez dodatki lub integracje. WPForms z dodatkiem Geolocation jest jedną z najlepszych opcji.

Co jeśli sugestie się nie pojawią?

Kilka częstych przyczyn obejmuje brakujący lub nieprawidłowy klucz API, błędy JavaScript lub konflikty motywów oraz ograniczenia API (takie jak nieprawidłowe ustawienia domeny).

Więcej przewodników dotyczących korzystania z formularzy WordPress

Mam nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać autouzupełnianie dla pól adresowych w WordPressie.

Jeśli uznałeś to za pomocne, możesz również zapoznać się z naszymi innymi pomocnymi przewodnikami na temat:

• Jak tworzyć formularze WordPress z polami wyboru
• Jak tworzyć wielojęzyczne formularze w WordPress
• Jak śledzić podróż użytkownika w formularzach leadów WordPress
• Eksperckie wskazówki dotyczące tworzenia bardziej interaktywnych formularzy i zwiększania konwersji
• Sposoby wykorzystania logiki warunkowej w formularzach WordPress (najczęstsze przypadki użycia)
• Jak utworzyć niestandardowy formularz Airtable w WordPress
• Ostateczny przewodnik po korzystaniu z formularzy WordPress

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.