Как добавить автозаполнение форм для полей адресов в WordPress

Автозаполнение форм на сайте позволяет пользователям быстро выбирать адрес из предложенных вариантов, сгенерированных в режиме реального времени при вводе первых символов. В этой статье мы покажем, как добавить автозаполнение полей адресов в WordPress с помощью API Google Places.

Первое, что нужно сделать, это установить плагин Address Autocomplete Using Google Place Api. После активации плагина перейдите на страницу Настройки - Автозаполнение Google, чтобы настроить параметры плагина.

Вам будет предложено ввести ключ Google Places API. Этот ключ позволяет подключаться к сервису Google Карты и извлекать варианты для автозаполнения из базы данных Google в режиме реального времени.

Перейдите на сайт Google Developer Console и создайте новый проект.

Используйте название, которое в дальнейшем поможет идентифицировать проект, а затем нажмите кнопку «Создать». Всплывающее окно исчезнет, ​​подождите несколько секунд, и вы будете автоматически перенаправлены к новому проекту.

Здесь вы увидите список популярных Google API, которые можно включить в свой проект. Нужно найти и нажать на "Google Places API Web Service".

На экране появится информационная страница, на которой объясняется, как работает этот API. Чтобы продолжить, перейдите по ссылке «Включить».

Теперь Google Places API будет добавлен в ваш проект. Но вам все равно нужны учетные данные для использования API на собственном сайте. Поэтому нажмите кнопку создания учетных данных, чтобы продолжить.

В появившемся окне нажмите кнопку «What credentials do I need?».

Теперь в консоли разработчика вам будет предоставлен ключ API. Скопируйте этот ключ и вставьте его в соответствующее поле в панели настроек плагина, установленного на сайте.

Добавьте еще один API в проект Google Developers. Откройте библиотеку API в консоли разработчика, а затем нажмите на «API Google Maps JavaScript».

Появится страница с обзором API, на которой нужно нажать кнопку «Включить».

Для этого API не нужен дополнительный ключ, поэтому можно вернуться на свой сайт.

Включение автозаполнения адресов в полях форм WordPress

Можно добавить функцию автозаполнения для поля любой формы, сгенерированной любым плагином WordPress для создания форм.

Мы будем использовать плагин WPForms. Но дальнейшие инструкции актуальны независимо от того, какой плагин для создания форм вы применяете.

Сначала нужно создать форму, в которой есть поле адреса или набор полей, предназначенных для ввода адреса. После этого добавьте форму на сайт.

Затем перейдите к записи или странице, на которую вы добавили форму. Кликните правой кнопкой мыши по полю адреса и выберите из контекстного меню пункт «Посмотреть код элемента».

Вы увидите имя идентификатора и CSS-класса для поля адреса. Например, на приведенном выше скриншоте значение имени формы - это wpforms[fields][9][address1], значение ID - wpforms-352-field_9, а css-класс - wpforms-field-address-address1.

Вам нужно скопировать только одно из этих значений и вставить на странице настроек плагина. Если вы хотите указать несколько полей в нескольких формах, то нужно добавить другое значение через запятую.

Не забудьте нажать кнопку «Сохранить», чтобы сохранить внесенные изменения.

Теперь можно перейти на страницу с формой и попробовать ввести адрес. В поле формы автоматически начнут отображаться варианты, предлагаемые Google Places и Google Maps.

Мы надеемся, что теперь вы сможете добавить автозаполнение для полей адресов в WordPress.