Недавно один из наших пользователей спросил нас, как добавить автозаполнение для полей адреса в формах WordPress. Автозаполнение позволяет пользователям быстро выбирать адрес из предложений, генерируемых в реальном времени по мере ввода текста. В этой статье мы покажем вам, как добавить автозаполнение для полей адреса в WordPress с помощью Google Places API.
Если вам не понравилось видео или нужны дополнительные инструкции, то продолжите чтение.
Первое, что вам нужно сделать, это установить и активировать плагин Address Autocomplete Using Google Place Api. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
После активации вам необходимо посетить Настройки » Автозаполнение Google страница для настройки параметров плагина.
Вам будет предложено ввести API-ключ Google Places. Этот API-ключ позволяет вашему сайту соединяться с Google Maps и получать предложения автозаполнения из их базы данных в режиме реального времени.
Перейдите на сайт Google Developer Console и создайте новый проект.
Появится всплывающее окно с просьбой дать название проекту. Используйте имя, которое поможет вам в дальнейшем идентифицировать проект, а затем нажмите на кнопку создать.
Всплывающее окно исчезнет, подождите несколько секунд, и вы будете автоматически перенаправлены на новый проект.
Теперь вы увидите список популярных API Google, которые вы можете включить для своего проекта. Вам нужно найти и щелкнуть на «Google Places API Web Service».
Вы перейдете на страницу обзора, объясняющую, как работает этот API. Вам нужно нажать на ссылку Включить, чтобы продолжить.
Консоль разработчика теперь включит Google Places API для вашего проекта.
Однако для использования API на вашем сайте вам все равно понадобятся учетные данные. Далее нажмите на кнопку создания учетных данных, чтобы продолжить.
На следующем экране вам нужно нажать на «Какие учетные данные мне нужны??’ кнопка.
Теперь консоль разработчика покажет вам ключ API. Вам нужно скопировать этот ключ и вставить его в настройки плагина на вашем сайте WordPress.
Вам все еще нужно включить другой API в вашем проекте Google Developers. Нажмите на библиотеку в Google Developer Console и затем нажмите на «Google Maps JavaScript API».
Это приведет вас на страницу обзора API, где вам нужно нажать на ссылку ‘Enable’, чтобы продолжить.
Этому API не нужен дополнительный API-ключ, так что вы можете приступать к работе.
Включение автозаполнения адреса в полях форм WordPress
Вы можете добавить функцию автозаполнения адреса в любое поле формы, созданное любым плагином для построения форм WordPress.
В этом руководстве мы будем использовать WPForms. Однако эти инструкции будут работать независимо от того, какой плагин контактной формы вы используете.
Сначала вам нужно создать форму, которая имеет поле адреса или набор полей адреса.
Как только вы закончите, добавьте эту форму на свой сайт, как вы обычно это делаете.
Далее перейдите на пост или страницу, где вы добавили свою форму. Вам нужно щелкнуть правой кнопкой мыши на поле адреса и выбрать ‘Inspect’ из меню браузера.
Вы увидите значения имени, ID и класса CSS для поля адреса.
Например, на этом скриншоте имя нашей формы имеет значение wpforms[fields][9][address1], ID — wpforms-352-field_9, а css класс — wpforms-field-address-address1 .
Вам нужно скопировать только одно из этих значений и вставить его на странице настроек плагина.
Если вы хотите выбрать несколько полей в нескольких формах, то вы можете просто добавить запятую и добавить другое значение.
Не забудьте нажать на кнопку сохранения, чтобы сохранить свои изменения.
Вот и все, теперь вы можете посетить страницу вашей формы и попробовать ввести адрес. Поле формы автоматически начнет показывать предложения с использованием Google Места и Google Карт.
Надеемся, эта статья помогла вам узнать, как добавить автозаполнение для поля адреса в WordPress. Вы также можете посмотреть наш список из 24 обязательных плагинов WordPress для бизнес-сайтов.
Источник: www.wpbeginner.com