Jak dodać pola autouzupełniania adresu w formularzu WordPress?

Zastanawiasz się, jak dodać formularz WordPress z autouzupełnianiem adresu do swojej witryny? W takim razie ten artykuł jest właśnie tym, czego teraz potrzebujesz.

Jeśli Twój formularz WordPress ma pole adresu, sugerujemy dodanie do niego funkcji autouzupełniania. W ten sposób użytkownikom łatwiej będzie wypełnić pole adresu i pomyślnie przesłać formularz.

Dlatego przygotowaliśmy szczegółowy przewodnik, jak stworzyć formularz WordPress z autouzupełnianiem adresu. Więc czytaj do końca.

Ale przed samouczkiem omówmy zalety funkcji autouzupełniania adresu i najlepszy sposób dodania jej do formularza.

W jaki sposób opcja autouzupełniania adresu jest pomocna w formularzu online?

Możesz po prostu użyć zwykłego pola adresu dla dowolnego formularza WordPress. Po co więc dodawać do niego opcję autouzupełniania adresu?

Oto kilka istotnych sposobów, w jakie opcja autouzupełniania adresów jest pomocna:

• Pole autouzupełniania adresu automatycznie sugeruje użytkownikom miejsca na podstawie ich danych.
• Użytkownicy mogą wybrać dokładne adresy z listy dostępnych propozycji adresów.
• Ponieważ użytkownicy nie muszą wpisywać pełnego adresu, mogą stosunkowo szybciej wypełnić formularz.
• Funkcja autouzupełniania sprawia, że ​​wypełnianie formularzy jest łatwe i szybkie. Może to pomóc w zwiększeniu liczby pomyślnie przesłanych formularzy i zmniejszeniu liczby porzucanych formularzy.

Dlatego warto dołączyć do formularzy pole adresu autouzupełniania.

Jednak WordPress domyślnie nie oferuje tej funkcji. Więc jaka jest twoja najlepsza alternatywa?

W następnej sekcji omówimy najlepszy sposób dodawania pola autouzupełniania adresu.

Najlepszy sposób na utworzenie formularza WordPress z autouzupełnianiem adresu

Ponieważ WordPress domyślnie nie pozwala na dodanie funkcji autouzupełniania adresów, zamiast tego będziesz musiał polegać na wtyczkach.

Odpowiednia wtyczka WordPress pozwoli Ci bezproblemowo dodać tę funkcję do formularza. Jedną z takich wtyczek jest Everest Forms.

Popularna wtyczka do tworzenia formularzy typu „przeciągnij i upuść” może być idealnym dodatkiem do Twojej witryny WordPress.

To potężne narzędzie potrafi wszystko! Pozwala tworzyć niestandardowe formularze bez dotykania ani jednego wiersza kodu.

Możesz użyć ponad 20 pól formularzy do tworzenia formularzy kontaktowych, formularzy wniosków o urlop, formularzy zamówień lub dowolnego wymaganego formularza.

Ponadto oferuje pole adresu, w którym można łatwo włączyć opcję autouzupełniania. Dlatego zalecamy wtyczkę Everest Forms jako najlepszy sposób na wyposażenie formularzy w tę funkcję.

Jak dodać pola autouzupełniania adresu w formularzu WordPress?

W tym samouczku użyliśmy formularzy Everest, aby zademonstrować proces tworzenia formularza WordPress z autouzupełnianiem adresu.

Wykonaj te 7 prostych kroków, aby dodać opcję autouzupełniania adresu Google WordPress w swoim formularzu.

Krok 1: Zainstaluj i aktywuj Everest Forms Pro

Zacznij od zainstalowania i aktywacji wtyczki Everest Forms Pro na swojej stronie. Ta wersja premium działa na podstawowej bezpłatnej wtyczce Everest Forms.

Dlatego musisz skonfigurować zarówno darmową, jak i premium wersję wtyczki, aby funkcja autouzupełniania adresu działała.

Mamy oddzielny przewodnik, jak prawidłowo skonfigurować Everest Forms Pro na swojej stronie internetowej. Sprawdź to, jeśli potrzebujesz pomocy w instalacji i aktywacji wtyczki.

Krok 2: Zainstaluj i aktywuj dodatek do geolokalizacji

Jeśli poprawnie skonfigurowałeś Everest Forms Pro, powinieneś mieć dostęp do wszystkich dostępnych dodatków. Pamiętaj, że dodatki, do których uzyskasz dostęp, zależą od zakupionego planu.

Więc otwórz Everest Forms >> Dodatki na pulpicie nawigacyjnym WordPress.

Przewiń w dół, aby znaleźć dodatek Geolokalizacja i kliknij Zainstaluj dodatek . Aby zakończyć instalację, naciśnij przycisk Aktywuj później.

Spowoduje to skonfigurowanie dodatku do użycia w formularzach WordPress.

Krok 3: Uzyskaj klucz API z konsoli Google

Trzecim krokiem jest uzyskanie klucza API z Google Console. Pomoże Ci to połączyć wtyczkę Everest Forms z Konsolą Google.

Najpierw odwiedź Pulpit nawigacyjny konsoli Google. Aby uzyskać dostęp do tego pulpitu nawigacyjnego, musisz być zalogowany na swoje konto Google .

Następnie wybierz projekt u góry pulpitu nawigacyjnego.

Jeśli nie masz jeszcze projektu, możesz go utworzyć, klikając Nowy projekt . Następnie nadaj projektowi nazwę i naciśnij Utwórz .

Po wybraniu projektu przejdziesz do strony API i usług dla projektu.

Załóżmy, że nie zostałeś automatycznie przekierowany na tę stronę. W takim przypadku możesz otwierać go co roku z menu nawigacji w lewym górnym rogu.

Naciśnij menu i otwórz API i usługi >> Włączone interfejsy API i usługi .

Tutaj kliknij +WŁĄCZ APIS I USŁUGI .

W bibliotece interfejsu API wyszukaj interfejs API miejsc i włącz go.

Uwaga: aby pomyślnie włączyć interfejs API, musisz mieć konto rozliczeniowe. Zanim przejdziesz dalej, włącz rozliczenia za Google Cloud Console.

Po włączeniu interfejsu API przejdź do interfejsu API i usług >> Poświadczenia . Teraz kliknij + Utwórz dane uwierzytelniające , a następnie wybierz Klucz API .

Spowoduje to wygenerowanie nowego klucza API . Ale zanim skopiujesz klucz API, musisz dodać do niego pewne ograniczenia. W tym celu kliknij Edytuj klucz .

Najpierw musisz ustawić ograniczenie aplikacji . Pozwala to ograniczyć, które strony internetowe, adresy IP lub aplikacje mogą używać klucza API. W naszym przypadku wybierzmy Strony internetowe .

Następnie dodaj stronę internetową, na której klucz API będzie ważny i naciśnij Gotowe . W razie potrzeby możesz dodać wiele witryn.

Następnie musisz ustawić ograniczenia interfejsu API , wybierając przycisk opcji Ogranicz klucz . Dzięki temu klucz wie, które aktywne interfejsy API może wywoływać.

Ponieważ potrzebujemy tylko interfejsu Places API, wybierzmy go z listy rozwijanej. Możesz włączyć i dodać więcej interfejsów API, takich jak Maps JavaScript API, zgodnie z wymaganiami.

Na koniec naciśnij przycisk Zapisz .

Wszystko, co musisz teraz zrobić, to skopiować klucz do późniejszego użycia. Zachowaj go w bezpiecznym miejscu, ponieważ będzie potrzebny do następnego kroku.

Krok 4: Dodaj klucz API do ustawień geolokalizacji

Wróć do pulpitu nawigacyjnego WordPress, przejdź do Everest Forms >> Ustawienia >> Geolokalizacja .

Wklej skopiowany klucz API w polu Klucz API Miejsc Google . Następnie naciśnij przycisk Zapisz zmiany .

To kończy połączenie między interfejsem API Miejsc Google a formularzami Everest.

W ustawieniach geolokalizacji jest jeszcze jedna opcja, Bieżąca lokalizacja . Po włączeniu tej opcji formularze automatycznie wykrywają i uzupełniają bieżącą lokalizację użytkownika w polu Adres .

Jest całkowicie opcjonalny, więc to, czy go włączysz, czy nie, zależy od twoich wymagań.

Krok 5: Utwórz nowy formularz z polem adresowym

Pomyślnie połączyłeś Everest Forms z API Miejsc Google. Jednak nadal potrzebujesz formularza, w którym ma zastosowanie funkcja autouzupełniania adresu.

W tym celu musisz utworzyć nowy formularz WordPress z polem Adres .

Pytanie brzmi: jaki rodzaj formy tworzysz? Cóż, wszystko zależy od Ciebie!

Najlepszą rzeczą w Everest Forms jest to, że pozwala tworzyć dowolne formularze, których potrzebujesz. Formularze kontaktowe, formularze ankiet, formularze wniosków o pracę, formularze rezerwacji i tak dalej.

Dlatego przejdź do Everest Forms >> Add New .

Everest Forms oferuje kilka gotowych szablonów dla różnych formularzy. W ten sposób możesz dostosować jeden z nich, jeśli masz mało czasu.

Ale zaprojektowanie formularza od podstaw jest równie łatwe! Po prostu przeciągnij i upuść wymagane pola i dostosuj je.

Na potrzeby tego przewodnika zbudujemy od podstaw prosty formularz kontaktowy z polem adresowym.

Więc kliknij Zacznij od podstaw . Następnie wprowadź tytuł formularza i naciśnij Kontynuuj .

Spowoduje to przejście do konstruktora formularzy. Jak widać, wszystkie pola formularza są zgrupowane po lewej stronie. Możesz przeciągać i upuszczać je w wierszach formularza po prawej stronie.

Dlatego dodaj do formularza dowolne potrzebne pola, takie jak Imię , E-mail , Temat , Wiadomość i co najważniejsze Adres .

Gdy formularz WordPress z autouzupełnianiem adresu jest kompletny, naciśnij przycisk Zapisz u góry, aby zapisać nowy formularz.

Krok 6: Włącz autouzupełnianie adresu dla pola adresu

Z każdym polem masz wiele opcji dostosowywania. Podobnie masz kilka opcji dla pola Adres , jedną z nich jest funkcja autouzupełniania adresu.

Chociaż skupiamy się tutaj na polu adresu , upewnij się, że dostosujesz również inne pola.

Kliknij pole, które chcesz edytować; jego opcje dostosowywania otworzą się po lewej stronie.

W tym miejscu możesz zmienić pole Etykieta , Opis , Widoczność pola itp. Możesz także włączyć Wymagane , Włącz podpowiedź , Ukryj etykietę i dodać Klasy CSS .

Ponadto będziesz mógł ustawić logikę warunkową dla poszczególnych pól.

Wróćmy jednak do naszego wyróżnionego pola tutaj. Po kliknięciu pola Adres opcje pola wyświetlają podobne opcje, jak omówiliśmy powyżej.

Jednak Opcje zaawansowane obejmują niektóre funkcje wybrane dla pola Adres .

Na przykład możesz zmienić symbol zastępczy i wartość domyślną dla wiersza adresu 1 , wiersza adresu 2 , kraju itp. Ponadto możesz wybrać kraje, które chcesz udostępnić użytkownikom z listy krajów domyślnych .

Co najważniejsze, możesz włączyć funkcję autouzupełniania adresu, po prostu zaznaczając pole wyboru.

Naciśnij przycisk Zapisz , a Twoje pole adresu automatycznie zasugeruje miejsca użytkownikom wypełniającym formularz.

Krok 7: Wyświetl formularz WordPress z autouzupełnianiem adresu w swojej witrynie

Gratulacje! Jesteś na ostatnim etapie tego samouczka!

Ponieważ formularz WordPress z autouzupełnianiem adresu jest gotowy, musisz dodać go do interfejsu swojej witryny.

Everest Forms pozwala to zrobić w kilku prostych krokach.

Zacznij od otwarcia strony lub postu, do którego chcesz dodać formularz WordPress.

Gdy znajdziesz się w edytorze Gutenberga, wybierz przycisk wstawiania bloków ( + ).

Wyszukaj blok Everest Forms i dodaj go do strony/postu, klikając go.

Następnie wybierz z rozwijanego menu formularz z polem autouzupełniania adresu. Spowoduje to automatyczne dodanie formularza do strony/postu.

Na koniec naciśnij przycisk Aktualizuj u góry.

Możesz także dodać formularz do zupełnie nowej strony/postu. Po prostu wykonaj te same kroki i naciśnij przycisk Publikuj na końcu. I jesteś skończony!

Formularz WordPress z autouzupełnianiem adresu jest teraz dostępny dla użytkowników z poziomu interfejsu.

Podsumowanie

Jak już wiesz, zbudowanie formularza autouzupełniania adresu Google w WordPress jest bardzo łatwe. Zwłaszcza, gdy masz pod ręką wtyczkę Everest Forms.

Ta niesamowita wtyczka umożliwia szybkie łączenie formularzy z konsolą Google. Dzięki temu użytkownicy mogą łatwo wypełnić pole adresu za pomocą funkcji autouzupełniania.

Ale czy wiedziałeś? Everest Forms ma o wiele więcej do zaoferowania.

Możesz go używać do dostosowywania szablonów wiadomości e-mail, planowania przesyłania formularzy, automatycznego wypełniania pól formularzy i nie tylko.

Przeczytaj wszystko o tej wtyczce na naszym blogu. Jeśli jesteś wzrokowcem, zajrzyj na nasz kanał YouTube, gdzie znajdziesz proste samouczki wideo.

Śledź także Twittera i Facebooka, aby otrzymywać aktualizacje cotygodniowych postów.