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

Dodanie autouzupełniania dla pól adresowych może sprawić, że twoje formularze WordPress będą bardziej przyjazne dla użytkownika. Pozwala to użytkownikom szybko wybierać adresy z sugestii podczas ich rodzaju, przyspieszając proces i zmniejszając liczbę błędów.

Niedawno jeden z naszych użytkowników chciał wiedzieć, jak skonfigurować tę funkcję dla swoich formularzy. Dzięki autouzupełnianiu użytkownicy mogą cieszyć się płynniejszą obsługą i uzyskiwać dokładne wpisy adresów.

W tym artykule przeprowadzimy Cię przez kroki, aby dodać autouzupełnianie adresu do Twojej witryny WordPress za pomocą Google Places API. Jest to łatwy sposób na ulepszenie twoich formularzy i uczynienie ich bardziej wydajnymi.

Po co dodawać autouzupełnianie pól adresowych w WordPress?

Dodanie autouzupełniania pól adresowych w WordPressie może pomóc poprawić komfort użytkowania twojej witryny internetowej.

Na przykład, jeśli jesteś właścicielem sklepu e-handel, twoi klienci będą mogli szybciej wpisz swoje adresy i uniknąć literówek.

Gdy kupujący wpiszą swój adres, możliwe adresy pojawią się na ich ekranie w oparciu o ich obecną, aktualną lokalizację, więc wszystko, co muszą zrobić, to wybrać właściwy. Pomaga to zmniejszyć liczbę błędów, ponieważ opcje wyświetlane użytkownikowi są połączone z Miejscami Google i Google Maps API.

Autouzupełnianie w polach adresowych to jedna z najwygodniejszych funkcji, jakie możesz zapewnić swoim użytkownikom. Jeśli możesz szybko pomóc kupującym w przejściu do kasy, są oni bardziej skłonni do sfinalizowania zakupu.

Może to prowadzić do poprawy sprzedaży i przekształcenia okazjonalnych klientów w stałych klientów.

Teraz, gdy rozumiesz już korzyści płynące z dodawania autouzupełniania pól adresowych w WordPress, pokażemy Ci, jak to zrobić krok po kroku.

Oto krótki przegląd wszystkich kroków, które omówimy w tym artykule:

Gotowy? Zacznijmy od filmowego poradnika.

Film instruktażowy

Subscribe to WPBeginner

Jeśli wolisz instrukcje pisemne, czytaj dalej.

Krok 1: Zainstalowanie i włączanie autouzupełniania adresu Google

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę Autocomplete Google Address .

Aby uzyskać więcej informacji, możesz zapoznać się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdźmy do Ustawienia ” Autouzupełnianie z twojego kokpitu WordPress, aby skonfigurować ustawienia wtyczki.

Następnie zostaniesz poproszony o wpisz klucz API Miejsc Google. Ten klucz API pozwala Twojej witrynie internetowej łączyć się z Mapami Google i pobierać sugestie autouzupełniania z ich bazy danych w czasie rzeczywistym.

Krok 2: Uzyskaj dostęp do klucza API Miejsc Google

Aby uzyskać dostęp do twojego klucza API Miejsc Google, możesz przejść do witryny internetowej Google Developer Console i utworzyć nowy projekt.

Zostaniesz przeniesiony na nową stronę z prośbą o nadanie nazwy twojemu projektowi. Zalecamy użycie nazwy, która ułatwi identyfikację projektu.

Następnie możesz kliknąć przycisk „Utwórz”.

Jeśli masz organizację, z którą chcesz się połączyć, możesz kliknąć odnośnik „Przeglądaj”, aby wyświetlić listę rozwijaną opcji.

Poczekaj kilka sekund, a zostaniesz automatycznie przekierowany na stronę „APIs & Services”.

Następnie należy przejść do panelu po lewej stronie i kliknąć kartę „Biblioteka”.

Teraz zobaczysz listę popularnych interfejsów API Google, które możesz włączyć dla swojego projektu. W lewym panelu wybierz „Mapy”, aby przefiltrować opcje związane z mapami.

Następnie należy znaleźć i kliknąć opcję „Places API”.

Następnie zostaniesz przekierowany na stronę przeglądu „Places API”.

Wystarczy kliknąć przycisk „Włącz”, aby autoryzować API.

Jeśli Twoja konsola Google Console jest skonfigurowana poprawnie, powinno pojawić się wyskakujące okienko z Twoim kluczem API.

Jeśli jednak konfigurujesz konto Google Console po raz pierwszy, może być konieczne wpiszenie Twoich danych rozliczeniowych.

Teraz możesz wrócić do swojej witryny WordPress.

Następnie należy wkleić klucz API z Twojej Konsoli Google w miejscu „Klucz API Miejsca Google”.

Aby upewnić się, że autouzupełnianie adresu działa w WordPress, musisz włączyć Google Maps JavaScript API.

Wszystko, co musisz zrobić, to wrócić do karty „Interfejsy API i usługi” z kokpitu Google Developer Console. Następnie należy znaleźć „Maps JavaScript API” i kliknąć „Włącz”.

Teraz możesz przejść do dodania identyfikatora formularza.

W następnym kroku potrzebny będzie identyfikator pola adresu, do którego ma zostać dodana funkcja autouzupełniania adresu.

Krok 3: Włącz autouzupełnianie adresu w polach formularzy WordPressa

Możesz dodać funkcję autouzupełniania adresu do dowolnego pola formularza utworzonego przez dowolną wtyczkę WordPress form builder.

W tym poradniku będziemy używać WPForms, ponieważ jest to najlepszy kreator formularzy typu „przeciągnij i upuść” i najłatwiejszy dla początkujących. Jednak te instrukcje będą działać bez względu na używaną wtyczkę formularza kontaktowego.

Najpierw należy utworzyć formularz z polem adresu lub zestawem pól adresu. Gdy skończysz, możesz dodać ten formularz do twojej witryny internetowej WordPress, tak jak robisz to normalnie. Jeśli potrzebujesz pomocy, możesz przeczytać nasz przewodnik na temat tworzenia formularza kontaktowego.

Następnie otwórzmy wpis lub stronę, na której dodaliśmy twój formularz, kliknijmy prawym przyciskiem myszy pole adresu i wybierzmy „Sprawdź” z menu przeglądarki.

Tutaj zobaczysz podświetloną sekcję z wartością identyfikatora formularza dla pola wejściowego.

Na przykład, na tym zrzucie ekranu wartość identyfikatora naszego formularza to wpforms-567-field_4.

Należy skopiować tę wartość i wkleić ją na stronie ustawień wtyczki.

Będziesz jednak chciał dodać funkcję autouzupełniania do całego twojego formularza adresowego. Na przykład, jeśli chcesz, aby użytkownicy mogli automatycznie wypełnić cały adres wysyłki, będą musieli automatycznie wypełnić miasto, początek i kod pocztowy.

W tym przypadku należy wykonać ten sam proces, klikając „Inspect”, a następnie znajdując identyfikator formularza dla każdego pola.

Po uzyskaniu wszystkich twoich identyfikatorów, skopiuj je na stronę „Autouzupełnianie”, gdzie znajduje się napis „Identyfikator formularza”.

W przypadku dodawania wielu identyfikatorów należy oddzielić każdy identyfikator przecinkiem z cudzysłowem, jak pokazano poniżej.

Po zakończeniu nie zapomnij nacisnąć przycisku „Zapisz zmiany”.

To wszystko; możesz teraz przejść na stronę Twojego formularza i spróbować wpisz adres. Pole formularza automatycznie wyświetli sugestie przy użyciu Miejsc Google i Map Google.

Teraz z powodzeniem dodałeś funkcję autouzupełniania adresu Google do twojego formularza. Użytkownicy będą mogli automatycznie wypełniać twój formularz, niezależnie od tego, czy dokonują płatności w twoim sklepie WooCommerce, czy też wypełniają rejestrację użytkownika.

Wskazówka bonusowa: Śledź i redukuj porzucanie formularzy w WordPress

Porzucenie formularza ma miejsce, gdy ludzie opuszczają formularz bez jego przesłania, często z powodu złego doświadczenia użytkownika lub z innych powodów.

Ograniczenie porzucania formularzy jest ważne, ponieważ ma wpływ na rozwój twojej listy mailingowej, sprzedaż e-handlu i ogólny sukces biznesowy. Badania pokazują, że ponad 77% kupujących online nie kończy formularzy zakupu, co oznacza utratę dużej ilości pieniędzy z powodu niekompletnej sprzedaży.

Śledząc i ulepszając formularze, które ludzie często porzucają, można zmniejszyć te straty przychodów. Chociaż automatyczne uzupełnianie może pomóc, nadal istnieją inne czynniki, które mogą przyczyniać się do porzucania formularzy:

• Pola opcjonalne stały się obowiązkowe: Zmuszanie ludzi do wypełniania nieistotnych informacji może być naprawdę irytujące.
• Niejasne instrukcje: Mylące lub niejasne pola formularza mogą sprawić, że ludzie zrezygnują.
• Nieprzyjazność dla urządzeń mobilnych: Formularze, które są trudne w użyciu na urządzeniach mobilnych, mogą być bardzo zniechęcające.
• Problemy techniczne: Problemy takie jak niedziałający dobrze formularz lub wolne czasy wczytywania mogą powstrzymać ludzi przed wypełnieniem formularza.

Więcej szczegółów można znaleźć w naszym przewodniku na temat śledzenia i ograniczania porzucania formularzy w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać autouzupełnianie dla pól adresowych w WordPress. Możesz również zapoznać się z naszymi poradami ekspertów, aby tworzyć bardziej interaktywne formularze i zwiększać konwersje lub z naszym przewodnikiem na temat dostosowywania i stylizowania twoich formularzy WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.