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

Хотите ли вы создать AMP-дружественные формы на своем сайте WordPress? Ускоренные мобильные страницы или AMP - это проект Google, благодаря которому...

Хотите ли вы создать AMP-дружественные формы на своем сайте WordPress?

Ускоренные мобильные страницы или AMP — это проект Google, благодаря которому сайты быстрее загружаются на мобильных устройствах.

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

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

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

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

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

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

Сделать форму обратной связи на WordPress

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

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

Настройки AMP для WordPress

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

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

Шаг 1. Создание формы WordPress с помощью WPForms

Чтобы начать работу, установите и активируйте плагин WPForms Lite на своем сайте. Это lite-версия плагина WPForms Pro.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перейдите на сайт Google reCAPTCHA и нажмите на кнопку ‘Admin Console’ в правом верхнем углу страницы.

Посетите веб-сайт Google reCAPTCHA

После этого вам нужно войти в свой аккаунт Google. После этого вы увидите страницу «Регистрация нового сайта».

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

Сначала вам нужно ввести название вашего сайта в поле Label. Google AMP поддерживает только reCAPTCHA v3, поэтому вам нужно выбрать его из опций типа reCAPTCHA.

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

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

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

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

Принять условия обслуживания Google reCAPTCHA

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

После этого вы увидите сообщение об успехе, а также ключ сайта и секретный ключ для добавления reCAPTCHA на ваш сайт.

ключи reCAPTCHA

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

Далее вы снова увидите настройки reCAPTCHA с галочкой ‘Allow this key to work with AMP pages’. Просто установите флажок и нажмите на кнопку «Сохранить».

Разрешите 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.

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для получения видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook (признана экстремистской организацией на территории РФ)

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий