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

Хотите знать, как добавить форму автозаполнения адреса WordPress на свой сайт? Тогда эта статья — то, что вам нужно прямо сейчас.

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

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

Но перед уроком давайте обсудим преимущества функции автозаполнения адреса и лучший способ добавить ее в форму.

Чем полезна опция автозаполнения адреса в онлайн-форме?

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

Что ж, вот несколько важных способов, которыми может быть полезен вариант автозаполнения адреса:

• Поле автозаполнения адреса автоматически предлагает места вашим пользователям на основе их ввода.
• Пользователи могут выбирать точные адреса из списка доступных вариантов адресов.
• Поскольку пользователям не нужно вводить полный адрес, они могут заполнить форму относительно быстрее.
• Функция автозаполнения упрощает и ускоряет заполнение форм. Это может помочь увеличить количество успешных отправок форм и уменьшить отказ от форм.

Поэтому разумно включить в формы поле адреса автозаполнения.

Однако WordPress не предлагает эту функцию по умолчанию. Итак, какова ваша лучшая альтернатива?

Мы рассмотрим лучший способ добавить поле автозаполнения адреса в следующем разделе.

Лучший способ создать адресную форму автозаполнения WordPress

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

Правильный плагин WordPress позволит вам без проблем добавить эту функцию в форму. И одним из таких плагинов является Everest Forms.

Популярный плагин для создания форм с перетаскиванием может стать идеальным дополнением к вашему веб-сайту WordPress.

Этот мощный инструмент делает все! Он позволяет создавать пользовательские формы, не затрагивая ни одной строки кода.

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

Кроме того, он предлагает поле адреса, где вы можете легко включить опцию автозаполнения. Таким образом, мы рекомендуем плагин Everest Forms как лучший способ оснастить ваши формы этой функцией.

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

В этом уроке мы использовали Everest Forms, чтобы продемонстрировать процесс создания формы WordPress с автозаполнением адреса.

Выполните эти 7 простых шагов, чтобы добавить опцию автозаполнения адреса WordPress Google в свою форму.

Шаг 1. Установите и активируйте Everest Forms Pro

Начните с установки и активации плагина Everest Forms Pro на своем сайте. Эта премиум-версия работает поверх базового бесплатного плагина Everest Forms.

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

У нас есть отдельное руководство о том, как правильно настроить Everest Forms Pro на вашем сайте. Итак, проверьте это, если вам нужна помощь в установке и активации плагина.

Шаг 2: Установите и активируйте надстройку геолокации

Если вы правильно настроили Everest Forms Pro, вы сможете получить доступ ко всем доступным надстройкам. Помните, что доступ к надстройкам, к которым вы получаете, зависит от приобретенного вами плана.

Итак, откройте Everest Forms >> Надстройки в панели управления WordPress.

Прокрутите вниз, чтобы найти надстройку « Геолокация », и нажмите « Установить надстройку» . Чтобы завершить установку, нажмите кнопку « Активировать ».

Это настроит надстройку для использования в ваших формах WordPress.

Шаг 3. Получите ключ API из консоли Google.

Третий шаг — получить ключ API из консоли Google. Это поможет вам подключить плагин Everest Forms к консоли Google.

Сначала посетите панель инструментов Google Console. Вы должны войти в свою учетную запись Google , чтобы получить доступ к этой панели.

Затем выберите свой проект в верхней части панели инструментов.

Если у вас еще нет проекта, вы можете создать его, нажав Новый проект . Затем дайте вашему проекту имя и нажмите « Создать ».

После того, как вы выберете проект, вы попадете на страницу API и служб для проекта.

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

Нажмите меню и откройте APIs & Services >> Enabled APIs & Services .

Здесь нажмите + ВКЛЮЧИТЬ API И УСЛУГИ .

В библиотеке API найдите Places API и включите его.

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

После того, как вы включили API, перейдите в раздел APIs & Services >> Credentials . Теперь нажмите «+Создать учетные данные », а затем выберите «Ключ API» .

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

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

Затем добавьте веб-сайт, на котором будет действовать ключ API, и нажмите « Готово ». Вы можете добавить несколько веб-сайтов, если вам нужно.

После этого вы должны установить ограничения API , выбрав переключатель Restrict key . Это позволяет вашему ключу узнать, какие активированные API он может вызывать.

Поскольку нам нужен только Places API, давайте выберем его из раскрывающегося списка. Вы можете включить и добавить дополнительные API, такие как Maps JavaScript API, в соответствии с требованиями.

Наконец, нажмите кнопку Сохранить .

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

Шаг 4. Добавьте ключ API в настройки геолокации

Вернувшись в панель управления WordPress, перейдите в Everest Forms >> Settings >> Geolocation .

Вставьте скопированный ключ API в поле Ключ API Google Адресов . После этого нажмите кнопку Сохранить изменения .

На этом соединение между Google Places API и Everest Forms завершено.

В настройках геолокации есть еще одна опция « Текущее местоположение ». Когда вы включаете эту опцию, ваши формы автоматически определяют и заполняют текущее местоположение пользователя в поле « Адрес ».

Это совершенно необязательно, поэтому включение или выключение зависит от ваших требований.

Шаг 5: Создайте новую форму с адресным полем

Вы успешно подключили Everest Forms к Google Places API. Однако вам по-прежнему нужна форма, в которой применима функция автозаполнения адреса.

Для этого вы должны создать новую форму WordPress с полем « Адрес ».

Вопрос: какую форму вы делаете? Ну, это полностью зависит от вас!

Самое лучшее в Everest Forms — это то, что он позволяет вам создавать любые формы, которые вам нужны. Контактные формы, формы опросов, формы заявлений о приеме на работу, формы бронирования и так далее.

Следовательно, перейдите в Everest Forms >> Добавить новый .

Everest Forms предлагает несколько готовых шаблонов для различных форм. Таким образом, вы можете настроить один из них, если у вас мало времени.

Но разработать форму с нуля так же просто! Просто перетащите нужные поля и настройте их.

Для этого руководства мы создадим простую контактную форму с полем адреса с нуля.

Итак, нажмите «Начать с нуля ». Затем введите заголовок формы и нажмите « Продолжить ».

Это приведет вас к конструктору форм. Как видите, все поля формы сгруппированы слева. Вы можете перетащить их в строки формы справа.

Таким образом, добавьте в форму любые необходимые вам поля, такие как Имя , Электронная почта , Тема , Сообщение и, самое главное, Адрес .

Когда форма автозаполнения адреса WordPress будет завершена, нажмите кнопку « Сохранить » вверху, чтобы сохранить новую форму.

Шаг 6. Включите автозаполнение адреса для поля адреса

С каждым полем вы получаете множество вариантов настройки. Точно так же вы получаете несколько вариантов для поля « Адрес », одним из которых является функция автозаполнения адреса.

Хотя здесь мы сосредоточены на поле « Адрес », убедитесь, что вы также настроили другие поля.

Щелкните поле, которое хотите изменить; его параметры настройки откроются слева.

Отсюда вы можете изменить поле Label , Description , Field Visibility и т. д. Вы также можете включить Required , Enable Tooltip , Hide Label и добавить CSS Classes .

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

Но давайте вернемся к нашему полю выделения здесь. Когда вы нажимаете на поле « Адрес », в параметрах поля отображаются параметры, аналогичные тем, которые мы обсуждали выше.

Однако расширенные параметры включают в себя некоторые функции, специально предназначенные для поля « Адрес ».

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

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

Нажмите кнопку « Сохранить », и поле « Адрес » автоматически предложит места пользователям, заполняющим форму.

Шаг 7. Отобразите форму WordPress автозаполнения адреса на своем сайте

Поздравляем! Вы находитесь на последнем шаге этого урока!

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

Everest Forms позволяет сделать это за несколько простых шагов.

Начните с открытия страницы или поста, где вы хотите добавить форму WordPress.

Как только вы окажетесь в редакторе Gutenberg, нажмите кнопку вставки блоков ( + ).

Найдите блок Everest Forms и добавьте его на страницу/публикацию, нажав на него.

Затем выберите форму с полем автозаполнения адреса из выпадающего списка. Это автоматически добавит форму на страницу/сообщение.

Наконец, нажмите кнопку « Обновить » вверху.

Вы также можете добавить форму на совершенно новую страницу/публикацию. Просто выполните те же действия и нажмите кнопку « Опубликовать » в конце. И вы сделали!

Форма автозаполнения адресов WordPress теперь доступна вашим пользователям из внешнего интерфейса.

Подведение итогов

Как вы уже поняли, создать форму автозаполнения адреса Google для WordPress очень просто. Особенно, когда под рукой есть плагин Everest Forms.

Этот невероятный плагин позволяет быстро подключать ваши формы к консоли Google. Таким образом, ваши пользователи могут легко заполнить поле адреса с помощью функции автозаполнения.

Но знаете ли вы? Everest Forms может предложить гораздо больше.

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

Читайте все об этом плагине в нашем блоге. Посетите наш канал на YouTube, чтобы посмотреть простые видеоуроки, если вы визуальный ученик.

Кроме того, следите за обновлениями еженедельных сообщений в Twitter и Facebook.