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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *