Как сделать адаптивную веб-форму на WordPress

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

Одним словом, разобравшись с установкой CMS на хостинг https://s-host.com.ua, перейдем к добавлению полезных плагинов на наш сайт. Одним из первых мы установим Form Maker — сервис для создания и настройки форм любой сложности на WordPress.

Установка плагина

Один из лучших плагинов, отвечающих за создание веб-форм, — Form Maker. Расширение позволяет создавать абсолютно любые формы со множеством полей и запросто выводить их на сайт. Перейдите на страницу «Консоль»/"Плагины"/"Добавить новый", чтобы установить и активировать плагин. После этого в консоли появится новый пункт — Form Maker.

Создание веб-формы

Откройте страницу «Консоль»/Form Maker. На вкладке Manager представлены 9 готовых шаблонов, которые можно отредактировать в соответствии с вашими пожеланиями:

Как сделать адаптивную веб форму на Wordpress

Нажмите на кнопку Edit напротив нужного шаблона, чтобы перейти к редактированию. К примеру, форма Contact состоит из блоков Name, E-mail, Subject, Message. При нажатии на тот или иной блок появляется панель редактирования со следующими возможностями:

  • удалить поле;

  • передвинуть поле вверх/вниз/влево/вправо;

  • редактировать поле (название, размер поля, а также другие параметры);

  • копирование поля;

  • перенос поля вверх/вниз страницы:
    Как сделать адаптивную веб форму на Wordpress

Обратите внимание, что чуть выше вы можете выбрать тему, поменять заголовок, сохранить форму как копию (при этом “оригинал” не изменится и вы сможете использовать его в будущем):
Как сделать адаптивную веб форму на Wordpress

Чтобы создать веб-форму, кликните на кнопку Add New:

  • впишите заголовок;

  • выберите тему;

  • нажмите на кнопку Add Field:
    Как сделать адаптивную веб форму на Wordpress

  • создайте нужное количество полей:
    Как сделать адаптивную веб форму на Wordpress

Сохраните новую форму. Теперь она появится в списке шаблонов на странице «Консоль»/Form Maker/ Manager.

Вывод веб-формы на сайт

Веб-форму можно вывести на сайт при помощи виджета («Внешний вид»/"Виджеты"):

  • перетащите Form Maker в нужную часть сайта;

  • впишите заголовок;

  • выберите форму из выпадающего списка:
    Как сделать адаптивную веб форму на Wordpress

Если же вы хотите добавить форму на конкретную страницу, воспользуйтесь шорт-кодом (каждый шаблон имеет свой шорт-код, который вы также можете найти на странице «Консоль»/Form Maker/ Manager). Перейдите на нужную страницу и кликните на кнопку Insert Form Maker и выберите форму из предложенного списка:
Как сделать адаптивную веб форму на Wordpress

Сохраните изменения и проверьте, как форма отображается на сайте:
Как сделать адаптивную веб форму на Wordpress

Читайте также: