ru
 en

Чтобы показать, насколько прост и функционален сервис QForm, создадим тестовую форму заказа услуги или заявки и подробно опишем процесс. Допустим стоит цель сделать форму со следующими параметрами:

  • обязательные поля для ФИО, телефона и e-mail + интеграция с облачной АТС;
  • раскрывающийся список с выбором города (select);
  • меню с возможностью выбора одного варианта из предложенных (radiobutton);
  • согласие на обработку персональных данных;
  • кнопка «Отправить заявку» (submit).

Добавляем форму на сервис

Жмем кнопку ДОБАВИТЬ ФОРМУ, задаем ей имя и переходим в настройки, кликнув на РЕД.

Добавляем новую форму после добавления и потверждения сайта
Добавляем новую форму после добавления и подтверждения сайта

 

Открыть редактор формы
Открыть редактор формы

Справа, во вкладке ОСНОВНЫЕ ПАРАМЕТРЫ ФОРМЫ, генерируются 2 кода для установки на сайт (первый – в раздел Head, второй – в нужное место страницы). Ставим галочку рядом с ФОРМА АКТИВНА, Google Recaptcha не отмечаем — в данном случае нет нужды в дополнительной защите от спама.

Работаем с полями формы

Добавляем тип поля text, в имени поля прописываем Name, в плейсхолдере –  ФИО, ставим галочку рядом с ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ и сохраняем изменения.

Создание поля для имени
Создание поля для имени

 

Добавляем тип поля Phone, в имени поля прописываем то же самое, в плейсхолдере – ТЕЛЕФОН, ставим галочку рядом с ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ, выбираем интеграцию с облачной АТС Beeline, на звонок ответит менеджер и прописываем номер телефона менеджера. Настройки интеграции производятся в соответствующем разделе.  

Создаём поле для номера телефона (phone)
Создаём поле для номера телефона (phone)

 

Добавляем тип поля text, в имени прописываем email, в плейсхолдере – E-mail, ставим галочку рядом с ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ и сохраняем изменения.

Поле для email-адреса пользователя
Поле для email-адреса пользователя

 

Добавляем тип поля select, в имени прописываем city, в плейсхолдере – Выберите город, отмечаем галочкой ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ и добавляем нужное количество значений списка. Рядом с value прописываем код значения, напротив text  – название города. Сохраняем изменения.

Настраиваем выбор города через поля формы
Настраиваем выбор города через поля формы

 

Добавляем тип поля radiobutton, в имени прописываем sex, в плейсхолдере – Выберите пол. Так как поле необязательное, галочку не ставим. Добавляем 2 значения списка, прописываем value (man и women) и text (Мужчина/Женщина).  Изменения сохраняем.

«Радио» кнопка, выбор из нескольких вариантов
«Радио» кнопка, выбор из нескольких вариантов

 

Добавляем тип поля submit, в имени прописываем send, в плейсхолдере – Отправить заявку. Перед кнопкой встраивается ссылка на соглашение об обработке персональных данных, которое мы создаем в разделе «Соглашения». По умолчанию уже прописано типовое соглашение, которое можно отредактировать.

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

 

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

Изменения сохраняем и переходим во вкладку СОГЛАШЕНИЯ. Выбираем пункт «Типовое соглашение об обработке персональных данных», в окошко с шаблоном вставляем свой вариант. Затем прописываем текст, который будет показываться после отправки сообщения, и сохраняем изменения.

Пример формы обратной связи для формы
Пример формы обратной связи для формы

 

Дизайн

Главная фишка QForm заключается в возможности адаптировать форму под дизайн сайта: как угодно играть со стилями, менять внешний вид, структуру, компоновку полей и т.д. Для этого каждому полю нужно задать собственный class в разделе ПОЛЯ ФОРМЫ. Мы используем стиль field-form, который уже есть в CSS нашего сайта. Вы можете применить индивидуальный стиль для каждого поля.

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

Шаблоны форм обратной связи для форм
Шаблоны форм обратной связи для форм

 

Настраиваем JavaScript-события

В случае необходимости отслеживать статистику по обращениям можно настроить отправку целей в систему аналитики Яндекса или Google во вкладке JavaScript-события. Шаблоны кода для отправки указаны на этой же странице, останется только подставить в код номер счётчика и имя событий. Эту же вкладку можно использовать для выполнения любого другого Java-script кода, например JS-редирект на другую страницу вашего сайта.

Настройка отправки JS события чере QForm
Настройка отправки JS события через QForm

 

Не забываем сохранить все изменения и смотрим, что у нас получилось.

Готовая формы заявки через QFORM
5 минут настройки = готовая формы заявки
Назад на главную