Niedawno jeden z naszych użytkowników zapytał nas, jak dodać autouzupełnianie pól adresowych w formularzach WordPress. Autouzupełnianie pozwala użytkownikom szybko wybrać adres z sugestii generowanych w czasie rzeczywistym podczas pisania. W tym artykule pokażemy, jak dodać autouzupełnianie pól adresowych w WordPress za pomocą Google Places API.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować Autouzupełnianie adresu za pomocą wtyczki Google Place Api. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Ustawienia ” Google Autocomplete strona do konfiguracji ustawień wtyczki.
Zostaniesz poproszony o podanie klucza API Google Places. Ten klucz API pozwala Twojej witrynie połączyć się z Mapami Google i pobierać sugestie autouzupełniania z ich bazy danych w czasie rzeczywistym.
Przejdź do Witryny Google Developer Console i utwórz nowy projekt.
Pojawi się okienko z prośbą o podanie nazwy projektu. Użyj nazwy, która pomoże Ci później zidentyfikować projekt, a następnie kliknij przycisk Utwórz.
Wyskakujące okienko zniknie, odczekaj kilka sekund i zostaniesz automatycznie przekierowany do nowego projektu.
Teraz zobaczysz listę popularnych interfejsów API Google, które możesz włączyć dla swojego projektu. Musisz zlokalizować i kliknąć „Google Places API Web Service”.
Spowoduje to przejście do strony opisującej działanie tego interfejsu API. Musisz kliknąć link Włącz, aby kontynuować.
Developer console włączy teraz interfejs API Google Places dla Twojego projektu.
Jednak nadal będziesz potrzebować poświadczeń, aby korzystać z interfejsu API w swojej witrynie. Więc śmiało i kliknij przycisk Utwórz poświadczenia, aby kontynuować.
Na następnym ekranie, musisz kliknąć na ” jakie poświadczenia są potrzebne? guzik.
Konsola programisty pokaże ci teraz klucz API. Musisz skopiować ten klucz i wkleić go w ustawieniach wtyczki na swojej stronie WordPress.
Nadal musisz włączyć inny interfejs API w swoim projekcie Google Developers. Kliknij bibliotekę w Google Developer Console, a następnie kliknij „Google Maps JavaScript API”.
Spowoduje to przejście do strony przeglądu API, gdzie należy kliknąć link „Włącz”, aby kontynuować.
Ten interfejs API nie potrzebuje dodatkowego klucza API, więc możesz już iść.
Włączanie adresu autouzupełniania w polach formularza WordPress
Możesz dodać funkcję autouzupełniania adresu do dowolnego pola formularza utworzonego przez dowolną wtyczkę do tworzenia formularzy WordPress.
Będziemy używać WPForms w tym samouczku. Jednak te instrukcje będą działać bez względu na to, jakiej wtyczki formularza kontaktowego używasz.
Najpierw musisz utworzyć formularz, który ma pole adresu lub zestaw pól adresu.
Gdy skończysz, dodaj ten formularz do swojej witryny, tak jak zwykle.
Następnie przejdź do posta lub strony, na której dodałeś swój formularz. Musisz kliknąć prawym przyciskiem myszy pole adresu i wybrać „Inspect”z menu przeglądarki.
Zobaczysz nazwę, ID i wartości klas CSS dla pola adresu.
Na przykład na tym zrzucie ekranu wartość nazwy naszego formularza to wpforms[pola] [9][adres1], Wartość ID to wpforms-352-field_9, A Klasa css jest wpforms-field-address-address1.
Musisz skopiować tylko jedną z tych wartości i wkleić ją na stronie ustawień wtyczki.
Jeśli chcesz kierować na wiele pól w wielu formularzach, możesz po prostu dodać przecinek i dodać kolejną wartość.
Nie zapomnij kliknąć przycisku Zapisz, aby zapisać zmiany.
To wszystko, możesz teraz odwiedzić stronę formularza i spróbować wprowadzić adres. Pole formularza automatycznie rozpocznie wyświetlanie sugestii za pomocą Google places I Google Maps.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać autouzupełnianie pól adresowych w WordPress. Możesz również zobaczyć naszą listę 24 musi mieć wtyczki WordPress dla stron biznesowych.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
