Как создавать формы AMP в WordPress (простой способ)

/

Вы хотите создавать формы, удобные для AMP на своем сайте WordPress?

Accelerated Mobile Pages или AMP - это проект Google, который ускоряет загрузку веб-сайтов на мобильных устройствах.

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

Один из них - контактные формы. Поскольку AMP использует ограниченный набор HTML и JavaScript, он не может правильно загружать ваши формы WordPress на страницах AMP.

Но, к счастью, теперь доступно простое решение. WPForms, самый удобный для начинающих плагин форм WordPress, теперь помогает создавать формы WordPress с поддержкой AMP. Их команда недавно работала с Google, чтобы упростить формы AMP для WordPress.

В этой статье мы покажем вам, как создавать формы AMP в WordPress с помощью WPForms (простой способ).

Создание форм AMP в WordPress (легкий способ)

Создание форм AMP в WordPress (шаг за шагом)

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

После активации плагин автоматически добавит поддержку Google AMP для вашего сайта WordPress.

Однако вы можете изменить настройки AMP для своего веб-сайта, выбрав AMP »Общие на панели управления.

AMP для настроек WordPress

На странице настроек AMP вы можете включить или отключить AMP на своем веб-сайте, выбрать режим веб-сайта для AMP и выбрать поддерживаемые шаблоны.

После того, как вы настроили AMP, следующим шагом будет создание контактной формы, совместимой с AMP, на вашем сайте WordPress.

Шаг 1. Создайте форму WordPress с помощью WPForms

Для начала установите и активируйте плагин WPForms Lite на своем сайте. Это облегченная версия плагина WPForms Pro.

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

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

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

Шаблоны форм WPForms

Далее откроется страница конструктора форм.

Конструктор форм перетаскивания WPForms

Отсюда вы можете добавлять или удалять поля формы. Чтобы добавить новое поле в форму, вы можете просто щелкнуть поле формы на левой панели, и оно появится на панели построителя форм справа.

После этого вы можете настроить параметры поля. Просто щелкните поле, и появятся параметры поля.

Настройка параметров поля в плагине WPForms

Аналогичным образом вы можете настроить все остальные поля.

После этого вы можете перейти на вкладку «Настройки», чтобы настроить параметры формы.

Общие настройки WPForms

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

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

Настройки уведомлений WPForms

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

Настройки подтверждающего сообщения WPForms

После завершения настройки вы можете сохранить форму.

Шаг 2. Добавьте форму AMP на страницу

Теперь, когда ваша форма WordPress готова, вы можете добавить ее на страницу.

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

На экране редактирования страницы щелкните значок «Добавить новый блок» и выберите блок WPForms.

Добавить блок WPForms в редактор страниц WordPress

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

Добавить контактную форму на страницу WordPress с помощью WPForms

Далее вы можете опубликовать или обновить свою страницу.

Это все! Больше ничего настраивать не нужно. Плагин WPForms Lite добавит в вашу форму полную поддержку AMP.

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

Или вы можете открыть страницу в браузере настольного компьютера, добавив / amp / или /? Amp в конце URL-адреса страницы. Например, https://www.example.com/contact/?amp.

Добавление Google reCAPTCHA в вашу форму AMP

По умолчанию WPForms включает ловушку для защиты от спама для перехвата и блокировки спама. Кроме того, вы можете использовать Google reCAPTCHA, чтобы уменьшить количество спама.

Чтобы использовать Google reCAPTCHA с вашими формами AMP, вам необходимо зарегистрировать свой сайт в Google reCAPTCHA v3 и получить ключи Google API.

Перейдите на сайт Google reCAPTCHA и нажмите кнопку «Консоль администратора» в правом верхнем углу страницы.

Посетите сайт Google reCAPTCHA

После этого вам необходимо войти в свою учетную запись Google. После этого вы увидите страницу «Зарегистрируйте новый сайт».

Зарегистрируйте новый сайт для Google reCAPTCHA

Во-первых, вам нужно ввести название вашего сайта в поле «Ярлык». Google AMP поддерживает только reCAPTCHA v3, поэтому вам нужно выбрать его из опций типа reCAPTCHA.

После этого введите свое доменное имя в разделе Домены.

Добавить доменное имя и владельца для Google reCAPTCHA

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

Затем вам необходимо принять Условия использования reCAPTCHA, чтобы продолжить. Кроме того, установите флажок «Отправлять оповещения владельцам», который позволит Google уведомлять вас о таких проблемах, как неправильная конфигурация и подозрительный трафик на вашем сайте.

Примите Условия использования Google reCAPTCHA

После этого нажмите кнопку «Отправить».

Затем вы увидите сообщение об успешном выполнении вместе с ключом сайта и секретным ключом для добавления reCAPTCHA на ваш сайт.

Ключи reCAPTCHA

Теперь у вас есть ключи API Google для добавления reCAPTCHA в ваши формы. Однако требуется еще одна настройка, чтобы обеспечить совместимость AMP с reCATCHA. Щелкните ссылку «Перейти к настройкам».

Затем вы снова увидите настройки reCAPTCHA с флажком «Разрешить этому ключу работать со страницами AMP». Просто установите флажок и нажмите кнопку «Сохранить» ниже.

Разрешить reCAPTCHA работать на страницах AMP

Теперь, когда у вас есть ключи API Google для добавления reCAPTCHA в формы AMP, вам нужно открыть страницу WPForms »Настройки» reCAPTCHA на панели инструментов WordPress.

WPForms Настройки reCAPTCHA WordPress

На этом экране вам нужно выбрать опцию reCAPTCHA v3 и вставить ключ сайта и секретный ключ. После этого нажмите кнопку «Сохранить настройки».

Теперь, когда Google reCAPTCHA добавлен в WPForms, вы можете включить его в своих формах, где это необходимо. Перейдите в WPForms »Все формы и выберите форму, в которой вы хотите включить reCAPTCHA.

Редактировать форму, созданную с помощью WPForms

Когда появится экран настройки формы, щелкните вкладку «Настройки» и выберите раздел «Общие настройки». Внизу вы можете увидеть флажок «Включить Google v3 reCAPTCHA».

Включить Google v3 reCAPTCHA в WPForms

Установите флажок и сохраните форму, нажав кнопку «Сохранить» в правом верхнем углу.

После этого вы можете вернуться на свою страницу контактов и увидеть форму AMP с reCAPTCHA в действии.

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как исправить ошибку слишком большого количества запросов в WordPress 429

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

Как превратить посетителей WooCommerce в клиентов

Вы хотите превратить посетителей WooCommerce в клиентов? Привлечение трафика в ваш магазин WooCommerce - это только половина дела, вторая половина - превратить

Как исправить ошибку «Не удалось загрузить ресурс» в WordPress

Вы видите сообщение «Ошибка загрузки ресурса» в WordPress или в инструменте проверки вашего браузера? Многим пользователям WordPress трудно понять, какой

WooCommerce Made Simple: пошаговое руководство [+ ресурсы]

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