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

В данной статье мы расскажем, как создать адаптивные формы для 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *