Как создать адаптивные формы для легкого взаимодействия с пользователями

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

Содержание

Что такое Google AMP (Accelerated Mobile Project)?

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

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

Зачем создавать AMP-страницы и AMP-формы

С помощью AMP вы сможете ускорить загрузку сайта на мобильных устройствах. Это позволит снизить показатель отказов и увеличит количество просмотров страниц.

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

Но данную проблему можно решить с помощью плагина WPForms. Он позволяет добавлять на страницы сайта адаптивные формы совместимые с AMP.

Как создавать адаптивные формы на AMP- страницах с WPForms Lite

Чтобы создавать AMP-страницы на WordPress-сайте, вам понадобится официальный плагин Google AMP. Для его установки в панели администрирования перейдите в раздел «Плагины» — «Добавить новый» и найдите плагин AMP с помощью поиска.

Затем нажмите кнопку «Установить сейчас», а потом на кнопку «Активировать».

При настройке плагина Google AMP убедитесь, что вы используете режим Standard или Transitional. В любом из этих режимов плагин будет применять шаблоны и таблицы стилей из активной темы оформления вместо облегченного шаблона (используется в режиме Reader).

Шаг 1. Установите плагин WPForms

Для установки плагина WPForms перейдите в меню «Плагины» — «Добавить новый» и введите WPForms в строку поиска.

Установите и активируйте плагин.

Шаг 2. Создайте свою первую форму

Чтобы создать новую форму, перейдите в меню «WPForms» — «Add New».

Введите имя формы и выберите шаблон Simple Contact Form.

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

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

После настройки формы нажмите кнопку «Save», расположенную в правом верхнем углу экрана.

Общие настройки формы

Теперь настройте параметры формы. Для этого перейдите в раздел «Settings» — «General».

Здесь вы можете отредактировать имя формы, описание, кнопку отправки и многое другое.

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

Чтобы настроить уведомления, перейдите в раздел «Settings» — «Notifications».

Получение уведомлений при отправке данных формы активно по умолчанию. Но эту функцию можно отключить в настройках.

Шаг 3. Опубликуйте свою форму

Создайте новый пост или страницу в WordPress. После чего в редакторе нажмите на кнопку «Add Form». Затем выберите contact form во всплывающем окне и нажмите «Add Form».

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

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

Данная публикация представляет собой перевод статьи «How To Create Mobile-Friendly, Responsive Forms for Easier Engagement» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню