Как создать AMP-формы на WordPress

В этой статье мы расскажем, как можно создавать AMP-формы на WordPress с использованием плагина WPForms.

Создание AMP-форм на WordPress (пошаговое руководство)

Создание AMP-форм на WordPress (пошаговое руководство)

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

Для изменения настроек AMP, перейдите в меню «AMP» - «Общие настройки», которое появится в панели администрирования WordPress.

Создание AMP-форм на WordPress (пошаговое руководство) - 2

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

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

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

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

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

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

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

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

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

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

На вкладке «Уведомления» активируется уведомление на email о заполнении формы пользователем.

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

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

В редакторе страницы нажмите кнопку «Добавить новый блок» и выберите блок WPForms.

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

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

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

Далее опубликуйте или обновите отредактированную страницу. Затем плагин WPForms Lite автоматически добавит полноценную поддержку AMP. В этом можно убедиться, просмотрев страницу на смартфоне.

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

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

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

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

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

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

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

Введите название сайта в поле «Label». Google AMP поддерживает только reCAPTCHA v3, поэтому нужно эту версию. После этого введите доменное имя в разделе «Domains».

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

Затем примите условия использования reCAPTCHA и установите флажок «Send alerts to owners». Это позволит Google уведомлять вас о таких проблемах, как неправильная настройка и подозрительный трафик, обнаруженный на сайте.

Нажмите кнопку «Submit». Далее вы увидите сообщение об успешной регистрации вместе с ключом сайта и секретным ключом, необходимым для добавления reCAPTCHA на сайт.

Но для обеспечения совместимости AMP с reCAPTCHA требуется еще одна настройка. Перейдите по ссылке «Go to Settings». Активируйте параметр «Allow this key to work with AMP pages» и нажмите кнопку «Save».

Затем в панели администрирования WordPress откройте страницу «WPForms» - «Настройки» -«reCAPTCHA».

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

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

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

Активируйте его, а затем сохраните форму. После этого можете протестировать  AMP-форму с reCAPTCHA в действии.

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

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

Вадим Дворниковавтор-переводчик статьи «How to Create AMP Forms in WordPress (The Easy Way)»