ru
 en

Используя сервис QForm, можно в несколько кликов сделать форму заказа любой сложности. Выберите готовый шаблон из 3 вариантов, представленных на сервисе, или самостоятельно напишите/(используйте готовые) стили, подходящие под дизайн вашего сайта. Для наглядности опишем весь процесс на конкретном примере.

Пример типовой формы заказа
Пример типовой формы заказа

Этапы создания формы

Добавляем форму в один клик, даем ей название для идентификации на сервисе, и приступаем к редактированию полей в горизонтальном меню. Для перехода (рядом с названием формы) нажимаем кнопку «Редактировать».

Создаём форму и открываем её редактор
Создаём форму и открываем её редактор

Настройка основных параметров

Здесь работы на 10 секунд — ставите галочку активности и, если необходимо, добавляете  защиту от спама. В этом случае придется настраивать Google ReCAPTCHA на странице «Общие настройки» сайта (в разделе Google ReCAPTCHA), то есть задать необходимые для взаимодействия параметры — ключ сайта и секретный ключ.

Справа вы увидите скрипт для установки на сайте в разделе Head, и div – для размещения формы на странице. Затем переходим к редактированию следующих разделов меню.

Установка кода конструктора форм на сайт
Установка кода конструктора форм на сайт

Задаем поля формы

Наша форма содержит 5 полей: имя, адрес, телефон, количество товара и кнопку заказа. Каждому задано имя на латинице, тип, плейсхолдер и class. Если планируете использовать готовый шаблон сервиса, то class оставляете пустым. Мы применили стили сайта, на котором размещается форма - input--form.

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

Правильно настроенные поля формы
Правильно настроенные поля формы

Работаем с оформлением

Здесь можно использовать один из шаблонов, предлагаемых QForm. Для этого ставим галочку рядом с «Использовать оформление сервиса QForm» и определяемся с типом формы. Примеры дизайна демонстрируются при выборе. В нашем случае галочка не нужна, так как в полях прописан class.

Варианты стандартного оформления формы
Варианты стандартного оформления формы

Согласие на обработку персональных данных

Мы выбрали типовое соглашение, но сервис предлагает возможность отредактировать текст и использовать свой вариант. Также можно написать текст, который будет виден пользователю после отправки формы. Изменения сохраняем и переходим к последнему разделу меню.

Настраиваем соглашение об обработке ПД
Настраиваем соглашение об обработке ПД

Javascript-события

Здесь настраивается отправка целей в систему аналитики Яндекса и Гугла или JS-редирект. Коды уже имеются, остается только добавить номер счетчика и идентификатор цели.

Настройка выполнения JavaScript кода после отправки формы
Настройка выполнения JavaScript кода после отправки формы
Назад на главную