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

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

^

Первое, что вам нужно сделать, это установить и активировать автозаполнение адреса с помощью плагина Google Place Api. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

После активации вам нужно зайти на страницу Настройки »Автозаполнение Google, чтобы настроить параметры плагина.

^

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

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

^

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

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

Теперь вы увидите список популярных API Google, которые вы можете включить для своего проекта. Вам нужно найти и нажать «Веб-сервис API Google Адресов».

^

Это приведет вас к обзорной странице, объясняющей, как работает этот API. Вам нужно нажать на ссылку Включить, чтобы продолжить.

^

Консоль разработчика теперь включает Google Places API для вашего проекта.

Однако вам все равно понадобятся учетные данные для использования API на вашем веб-сайте. Итак, продолжайте и нажмите на кнопку создания учетных данных, чтобы продолжить.

^

На следующем экране вам нужно нажать кнопку «Какие учетные данные мне нужны?».

^

Консоль разработчика теперь покажет вам ключ API. Вам нужно скопировать этот ключ и вставить его в настройках плагина на вашем сайте WordPress.

^

Вам все еще нужно включить другой API в вашем проекте разработчиков Google. Нажмите на библиотеку в консоли разработчика Google, а затем нажмите «Google Maps JavaScript API».

^

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

^

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

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

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

В этом уроке мы будем использовать WPForms. Однако эти инструкции будут работать независимо от того, какой плагин контактной формы вы используете.

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

Как только вы закончите, добавьте эту форму на свой сайт, как вы это обычно делаете.

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

^

Вы увидите имя, ID и значения класса CSS для поля адреса.

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

Вам нужно скопировать только одно из этих значений и вставить его на странице настроек плагина.

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

^

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

Вот и все, теперь вы можете посетить страницу формы и попробовать ввести адрес. Поле формы автоматически начнет показывать предложения с использованием мест Google и карт Google.

^

Мы надеемся, что эта статья помогла вам узнать, как добавить автозаполнение для полей адреса в WordPress. Возможно, вы также захотите увидеть в нашем списке из 24 плагинов WordPress для бизнес-сайтов.