Хотите создать AMP-дружественные формы на своем сайте WordPress?
Ускоренные мобильные страницы (AMP) помогают ускорить работу веб-сайтов. Однако AMP удаляет формы WordPress, чтобы повысить производительность вашего сайта.
В этой статье мы покажем вам, как создавать формы AMP в WordPress с помощью WPForms (простой способ).
Зачем создавать форму AMP в WordPress?
Accelerated Mobile Pages или AMP — это проект Google, который ускоряет загрузку веб-сайтов на мобильных устройствах.
Хотя AMP предлагает отличные возможности просмотра на мобильных устройствах, ускоряя загрузку веб-страниц, он отключает многие полезные функции на вашем веб-сайте WordPress.
Один из них — контактные формы. Поскольку AMP использует ограниченный набор HTML и JavaScript, он не может правильно загружать ваши формы WordPress на страницах AMP.
Альтернативно вы можете использовать одну из многих адаптивных тем WordPress, которые обеспечивают отличную производительность на настольных компьютерах и мобильных устройствах. Таким образом, вам не придется идти на компромисс со стилем своего веб-сайта, чтобы обеспечить превосходное качество его работы на мобильных устройствах.
Однако, если вы используете AMP на своем сайте WordPress, вы можете использовать плагин для отображения форм. Давайте посмотрим, как добавить форму AMP на ваш сайт.
Добавление AMP-форм в WordPress (шаг за шагом)
Лучший способ создать форму AMP — использовать WPForms. Это самый удобный для начинающих плагин форм WordPress, который помогает создавать формы WordPress, готовые к AMP.
Их команда недавно работала с Google, чтобы упростить формы AMP для WordPress.
Шаг 1. Установите и активируйте плагин WPForms.
В этом руководстве мы будем использовать версию WPForms Pro, поскольку она предлагает больше функций, шаблонов форм, надстроек и возможностей настройки. Существует также WPForms Lite версию, которую вы можете использовать, чтобы начать работу бесплатно.
И облегченная, и профессиональная версия WPForms позволяют создать базовую контактную форму, готовую к использованию AMP.
Сначала вам нужно будет установить и активировать плагин WPForms. Если вам нужна помощь, ознакомьтесь с нашим руководством по установке плагина WordPress.
Шаг 2. Добавьте AMP на свой сайт WordPress
Прежде чем мы создадим форму, важно, чтобы на вашем сайте WordPress был настроен AMP.
Чтобы использовать AMP с WordPress, вам необходимо установить и активировать официальный плагин AMP для WordPress. Более подробную информацию можно найти в нашем пошаговом руководстве по установке плагина WordPress.
После активации плагин автоматически добавит поддержку Google AMP для вашего сайта WordPress.
Однако вы можете изменить настройки AMP для своего веб-сайта, перейдя на AMP » Настройки с вашей приборной панели.
На странице настроек AMP вы можете включить или отключить AMP на своем веб-сайте, выбрать режим веб-сайта для AMP и выбрать поддерживаемые шаблоны.
Для получения более подробной информации ознакомьтесь с нашим руководством по правильной настройке Google AMP на вашем сайте WordPress.
После того, как вы настроили AMP, следующим шагом будет создание контактной формы, совместимой с AMP, на вашем сайте WordPress.
Шаг 3. Создайте новую форму AMP в WPForms
Просто зайдите на WPForms » Добавить новый страница для создания новой формы WordPress. WPForms по умолчанию совместим с AMP, поэтому вам не потребуется включать какие-либо специальные настройки.
На экране настройки формы вы можете выбрать шаблон формы и ввести имя вверху. Вы можете выбрать пустую форму, если хотите начать с нуля, или использовать готовый шаблон, чтобы быстро отредактировать его в соответствии с вашими потребностями.
Для этого урока мы выберем шаблон «Простая контактная форма».
Далее вы увидите страницу конструктора форм, где есть различные варианты настройки вашего шаблона.
Отсюда вы можете добавлять или удалять поля формы. Чтобы добавить новое поле в форму, вы можете просто щелкнуть поле формы на левой панели и перетащить его в шаблон формы.
Примечание: Поля «Раскрывающийся список в современном стиле» и «Цифровой ползунок» несовместимы с Google AMP. Вместо этого вам нужно будет использовать поля «Число» и «Классический стиль».
После этого вы можете настроить параметры поля. Просто нажмите на поле, и слева появятся параметры поля.
Например, вы можете отредактировать метку и формат поля, сделать его обязательным, настроить условную логику и многое другое. Аналогичным образом вы можете настроить все остальные поля.
После этого вы можете нажать на вкладку «Настройки», чтобы настроить параметры формы.
«Общие» настройки позволяют вам изменить имя формы, текст кнопки отправки, текст обработки кнопки отправки и многое другое.
Затем вы можете нажать на вкладку «Уведомления», чтобы настроить уведомления по электронной почте, чтобы уведомлять вас, когда пользователь заполняет форму.
Затем вы можете нажать на вкладку «Подтверждение», чтобы настроить сообщение с подтверждением, которое будет отображаться, когда пользователь отправляет форму.
WPForms позволяет показывать сообщение, показывать страницу или перенаправлять пользователей на URL-адрес при отправке формы.
После завершения настройки вы можете сохранить форму.
Шаг 4. Добавьте форму AMP на страницу
Теперь, когда ваша форма WordPress готова, вы можете добавить ее на страницу.
В конструкторе форм WPForms вверху вы увидите кнопку «Встроить». Просто нажмите на нее, чтобы добавить форму на новую или существующую страницу.
Далее откроется всплывающее окно с просьбой создать новую страницу или выбрать существующую.
Для этого урока мы выберем опцию «Создать новую страницу».
Далее вам нужно будет ввести имя новой страницы формы.
Как только это будет сделано, просто нажмите кнопку «Поехали».
Отсюда вы увидите предварительный просмотр вашей формы AMP в редакторе контента.
Альтернативно вы также можете использовать блок WPForms, чтобы добавить форму в редактор контента. Просто выберите форму AMP из раскрывающегося меню.
Далее вы можете опубликовать или обновить свою страницу.
Вот и все! Больше ничего настраивать вам не нужно. Плагин WPForms теперь добавит в вашу форму полную поддержку AMP.
Если вы хотите посмотреть, как это выглядит, то можете открыть страницу на своем мобильном телефоне. Или вы можете открыть страницу в браузере на рабочем столе, добавив /amp/ или /?amp в конце URL-адреса страницы, например:
Добавление Google reCAPTCHA в вашу AMP-форму
По умолчанию WPForms включает настройки защиты от спама для перехвата и блокировки спама. Кроме того, вы можете использовать Google reCAPTCHA, чтобы уменьшить количество спама.
Чтобы использовать Google reCAPTCHA с формами AMP, вам необходимо зарегистрировать свой сайт для Google reCAPTCHA v3 и получить ключи Google API.
Сначала вам нужно будет зайти в Веб-сайт Google reCAPTCHA и нажмите кнопку «Консоль администратора v3» в правом верхнем углу страницы.
После этого вам необходимо войти в свою учетную запись Google. После этого вы увидите страницу «Зарегистрировать новый сайт».
Далее вам нужно ввести название вашего сайта в поле «Метка». Google AMP поддерживает только reCAPTCHA v3, поэтому вам необходимо выбрать параметр типа reCAPTCHA «На основе оценки (v3)».
После этого введите свое доменное имя (не в поле Домены.
Далее нажмите кнопку «Отправить».
Затем вы увидите сообщение об успешном завершении, а также ключ сайта и секретный ключ для добавления reCAPTCHA на ваш сайт.
Просто скопируйте эти ключи.
Теперь у вас есть ключи API Google для добавления reCAPTCHA в ваши формы. Однако есть еще одна настройка, необходимая для обеспечения совместимости AMP с reCATCHA.
Сначала вам нужно будет нажать на ссылку «Перейти к настройкам».
Далее вы снова увидите настройки reCAPTCHA с флажком «Разрешить этому ключу работать со страницами AMP». Просто установите флажок и нажмите кнопку «Сохранить» ниже.
Теперь, когда у вас есть ключи Google API для добавления reCAPTCHA в формы AMP, вам нужно ввести их в WPForms.
Вы можете открыть WPForms » Настройки » CAPTCHA на панели управления WordPress.
Затем вы можете прокрутить вниз и выбрать опцию «reCAPTCHA v3».
После этого просто вставьте ключ сайта и секретный ключ. Когда вы закончите, просто нажмите кнопку «Сохранить настройки».
Теперь, когда Google reCAPTCHA добавлен в WPForms, вы можете включить его в своих формах там, где это необходимо.
Идти к WPForms » Все формы и выберите форму, в которой вы хотите включить reCAPTCHA. Просто нажмите кнопку «Изменить» под названием формы.
Когда появится экран настройки формы, нажмите вкладку «Настройки» и выберите вкладку «Защита от спама и безопасность».
Отсюда просто включите опцию Google v3 reCAPTCHA.
После этого сохраните форму, нажав кнопку «Сохранить» в правом верхнем углу.
После этого вы можете вернуться на свою страницу контактов и увидеть форму AMP с reCAPTCHA в действии.
Мы надеемся, что эта статья помогла вам легко научиться создавать AMP-формы в WordPress. Возможно, вы также захотите ознакомиться с нашим руководством о том, как создавать формы, соответствующие GDPR, в WordPress и о лучшем конструкторе страниц с функцией перетаскивания для WordPress.
Если вам понравилась эта статья, то подписывайтесь на нашу рассылку YouTube канал для видеоуроков по WordPress. Вы также можете найти нас на Твиттер и Фейсбук.
