Czy chcesz dodać autouzupełnianie dla pól adresowych w WordPress?
Niedawno jeden z naszych użytkowników zapytał nas, jak dodać autouzupełnianie dla pól adresowych w formularzach WordPress. Autouzupełnianie pozwala użytkownikom szybko wybierać adresy z sugestii generowanych w czasie rzeczywistym w trakcie wpisywania ich rodzaju.
W tym artykule pokażemy, jak dodać autouzupełnianie dla pól adresowych w WordPress przy użyciu Google Places API.
Dlaczego warto dodać autouzupełnianie pól adresowych w WordPress?
Dodanie autouzupełniania pól adresowych w WordPress może pomóc poprawić wrażenia użytkownika na twojej witrynie 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 dokonania zakupu.
Sprawiając, że każdy zakup jest szybki i prosty, masz większe szanse na zwiększenie sprzedaży i przekształcenie 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.
Film instruktażowy
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, czytaj dalej.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę Autocomplete Google Address .
Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu należy przejść na stronę Ustawienia ” Autouzupełnianie w twoim kokpicie WordPress, aby skonfigurować ustawienia wtyczki.
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.
Dostęp do klucza API Miejsc Google
Przejdź do witryny internetowej Google Developer Console i utwórz nowy projekt.
Zostaniesz przeniesiony na nową stronę z prośbą o podanie nazwy twojego projektu.
Użyj nazwy, która pomoże ci później zidentyfikować projekt, a następnie kliknij 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 API Google, które możesz włączyć dla twojego projektu. W lewym panelu wybierz „Maps”, aby filtrować według opcji związanych tylko z mapami.
Wystarczy znaleźć i kliknąć opcję „Places API”.
Stamtąd zostaniesz przekierowany na stronę przeglądu interfejsu API Places.
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.
Wklej klucz API z Twojej Konsoli Google do miejsca, w którym jest napisane „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 znajdź „Maps JavaScript API” i kliknij „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.
Włączanie autouzupełniania 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 w użyciu 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, dodaj ten formularz do twojej witryny internetowej WordPress, tak jak robisz to normalnie.
Następnie przejdź do wpisu lub strony, na której dodałeś twój formularz. Kliknij prawym przyciskiem myszy pole adresu i wybierz „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, oznacza to, że 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.
Gdy masz już wszystkie twoje identyfikatory, skopiuj je na stronę autouzupełniania, gdzie jest napisane „Identyfikator formularza”.
W przypadku dodawania wielu identyfikatorów należy oddzielić każdy z nich 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 zacznie wyświetlać 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.
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 naszą listą 24 niezbędnych wtyczek WordPress dla witryn internetowych dla firm lub naszym przewodnikiem na temat tworzenia biuletynu e-mail.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
M K Soleman Ahmed says
It is not working now.
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look and find an alternative.
Administrator
Vinod says
autocomplete is coming in the first filed but not in zip and state fields, please advice.
WPBeginner Support says
Hi Vinod,
Sadly, for that customization, you would need to reach out to the plugin’s support for if they currently support multiple fields
Administrator
Mooki says
It works thanks, I had searched of websites and plugins and nothing worked until I got to this helpful site
WPBeginner Support says
Glad our site could help you
Administrator
Fabiano Hirtz says
I have a travel site, tours and transfers, I would like to install this tool, when the client selected the place of visit and the arrival was not transferred, or tour, but it is not a contact form, but rather a search form, does it work? I put the class, did everything correctly, it still does not work. Can someone help me?
Jay Kuntal says
Hey, I tried a lot with getting API. It works fine when i use custom code from google on code pen. But when i put the same API on this plugin, it doesn’t work.
I have enabled two APIs – Places Web and Maps JS with credentials on Places Web.
What am i missing here
Thanks
ahmer says
Hi jay,
did you get it working? i’m stuck, can’t seem to get it working.
Tess says
Curious to know how to set a default country to appear first (instead of the default US addresses). Do you have any idea if there is a shortcode or some way to do this with this plugin?
BTW, I got the plugin working by just adding into the „Name” field. It works fine for me apart from wanting it to show AU addresses first.
asima says
How to populate the 'current location’ in 'area/neighborhood ’ select dropdown as the first select option (rest of the options coming from the database) ?
steve hajjaj says
Hi there thanks for the article. I have followed the process you described but I still cannot get autocomplete to work at all. Is there something wrong with my google developers account ? as I can see the 2 APIs are enabled but cannot see any requests. Thanks
WPBeginner Support says
Hi Steve,
Make sure that you are targeting the correct CSS class or ID used by your form’s address field.
Administrator
Luke says
I found a bug. When you type in the name of the business, the auto-completed address does NOT include the street number, only the street name (Main St, not 123 Main St). Big problem!!!
Luke says
Also, the zip code is always missing!
Luke says
Also, the only thing that comes through on form submission is the keys a user started typing. The address the user selects is what is shown, but not what is submitted with the form
WPBeginner Support says
Hey Luke,
If you think you have found a bug, then please report it to plugin authors. They may be aware of a fix or can then work on it.
Administrator
Sarah says
If there is one thing we are mindful; it’s the 'mission creep’ of Google into websites and related app areas.
Where able, we try not to engage google into our sites so as to remain 'in control’ in what we do.
But thanks for the insight …
Camilo says
Can it be possible to have the autocomplete fill out the zipcode, state and country as well? I just followed everything here and the address populates automatically but the user still has to manually input their zip code, state, and city
WPBeginner Support says
Hi Camilo,
Currently it is only possible if you use the single field for complete address.
Administrator
Zafar Rathore says
Excellent article for autocomplete. I was looking for such a easy to go method and you guys made it.
Autocomplete really saves a lot of time for end users which ultimately contributes to user friendly environment.
Keep it up guys.
Thank you
Nicholas Johnson says
I’m planned to create WP form with autocomplete, but I don’t know how to do that. After reading this post, I have an idea to create auto-complete forms.