Niedawno jeden z naszych użytkowników zapytał nas, jak dodać automatyczne uzupełnianie pól adresowych formularze WordPressa. Automatyczne uzupełnianie pozwala użytkownikom szybko wybrać adres z sugestii generowanych w czasie rzeczywistym podczas wpisywania.

W tym samouczku pokażemy, jak dodać autouzupełnianie pól adresowych w WordPress za pomocą „ Adresy API Google ".

Jak dodać autouzupełnianie w wordpress 1

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę „ Adres autouzupełniania za pomocą Google Place Api ”. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić lokalizację „ Ustawienia> Autouzupełnianie Google Strona, aby skonfigurować ustawienia wtyczki.

Skonfiguruj autouzupełnianie w wordpress

Zostaniesz poproszony o podanie klucza Google Places API. Ten klucz API umożliwia Witryna internetowa łączyć się z Mapami Google i pobierać sugestie z ich bazy danych w czasie rzeczywistym.

Idź do „ Konsola Google Developer Aby utworzyć nowy projekt.

Konsola programistyczna Google

Pojawi się okno 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, poczekaj kilka sekund, a nastąpi automatyczne przekierowanie do nowego projektu.

Teraz zobaczysz listę interfejsów API Google, które możesz włączyć dla swojego projektu. Musisz zlokalizować i kliknąć „ Usługa internetowa Google Places API ".

Lista kluczy Google API

Spowoduje to przejście do strony podglądu wyjaśniającej, jak działa ten interfejs API. Aby kontynuować, musisz kliknąć łącze „Aktywuj”.

Aktywacja modułu usługi internetowej Google Place API

Konsola programisty umożliwia program Google Place API dla Twojego projektu.

Jednak nadal będziesz potrzebować poświadczeń, aby korzystać z interfejsu API w swojej witrynie. Więc idź dalej i kliknij przycisk tworzenia poświadczeń, aby kontynuować.

Utwórz poświadczenia

Na następnym ekranie należy kliknąć przycisk „Jakie dane uwierzytelniające potrzebuję”.

Wszelkie potrzebne informacje

Konsola programisty wyświetli teraz klucz interfejsu API. Musisz skopiować ten klucz i wkleić go w ustawieniach na swojej stronie WordPress.

Skopiuj klucz Google API

Zawsze musisz aktywować inny klucz API w swoim projekcie Google Developers. Kliknij bibliotekę w Google Developer Console, a następnie kliknij „ Interfejs API Google Maps API ".

Mapy Google javascript api

Spowoduje to przejście do strony „Przegląd API”, na której należy kliknąć łącze „Aktywuj”, aby kontynuować.

API javascript na mapie google

Ten interfejs API nie wymaga dodatkowego klucza API, więc możesz teraz kontynuować.

Jak włączyć autouzupełnianie w polach formularza

Możesz dodać funkcję autouzupełniania w polach utworzonych przez wtyczki do tworzenia formularze.

W tym samouczku będziemy używać WPForms. Jednak ta wtyczka może współpracować z prawie każdą wtyczką konstruktora. forma.

Najpierw musisz utworzyć plik forma który ma pole adresowe lub zestaw pól adresowych.

Gdy już skończysz, dodaj to forma swój Witryna internetowa tak jak zwykle.

Następnie przejdź do artykułu lub strony, na której dodano formularz. Musisz kliknąć pole prawym przyciskiem myszy i wybrać polecenie „Sprawdź” z menu przeglądarki.

Formularz Wordpress wpforms pole adresu

Zobaczysz nazwę, identyfikator i wartości klasy CSS dla pola adresu.

Na przykład w tym przechwytywaniu nazwa atrybutu „ wpforms [pola] [9] [address1] Wartość identyfikatora to „ wpforms-352-field_9 A klasa css to „ wpforms-field-address-address1 ".

Musisz skopiować tylko jedną z tych wartości i wkleić ją na stronie ustawień wtyczki.

Jeśli chcesz kierować reklamy na wiele pól w formularze wielokrotności, możesz po prostu dodać przecinek i dodać inne wartości.

Dodaj adresy z pól wordpress

Nie zapomnij kliknąć przycisku « Enregistrer Aby zapisać zmiany.

To wszystko, możesz teraz odwiedzić stronę formularza i spróbować wprowadzić adres. Pole formularza zacznie wyświetlać sugestie za pomocą Miejsc Google i Map Google.

Lokalizacja na mapie Google i Google

To wszystko w tym samouczku, mam nadzieję, że pozwoli ci to na dodanie autouzupełniania w polach WordPress.