ru
 en

При установке формы обратной связи вебмастеру мало настроить нужные поля и привязку к почте. Необходимо гармонично встроить ее в дизайн сайта, настроить фильтрацию спама, часто — наладить интеграцию с CRM и много всего другого. Способов решения задач много: некоторые используют бесплатные сервисы, вроде Google Forms и Яндекс.Формы, другие — платные/условно-бесплатные инструменты, третьи — различные плагины для CMS или же делают формы под все свои цели с нуля с помощью программистов.

Мы предлагаем решение проще — гибкий и многофункциональный конструктор QForm, который генерирует формы любой сложности, синхронизируемые с CRM-системами, SMS-сервисами и облачными АТС.

За счет простоты настроек и понятного интерфейса его освоит любой пользователь без навыков программирования. Формы подстраиваются под любые CMS-системы, в том числе самописные. Встроенная система аналитики мониторит источник заявок.

 

Инструкция по созданию формы на QForm

Чтобы продемонстрировать удобство сервиса, поэтапно разберем процесс создания формы обратной связи. Допустим, нужен простой вариант с 4 полями, согласием на обработку персональных данных и кнопкой «Отправить».

 

Создаём форму

Добавляем новую форму и даем название для собственного удобства. Щёлкаем Редактировать и переходим к настройкам.

 

Настраиваем параметры формы

Работаем с вкладкой Основные параметры формы. Ставим галочку активности, и если требуется дополнительная защита от спама, добавляем галочку в пункте ИСПОЛЬЗОВАТЬ Google ReCAPTCHA. В этом случае на странице «Общие настройки» сайта (в разделе Google ReCAPTCHA) задаем необходимые для взаимодействия параметры — ключ сайта и секретный ключ, получаемые на сайте сервиса ReCaptcha.

Возвращаемся в ОСНОВНЫЕ ПАРАМЕТРЫ ФОРМЫ. Справа система выдаст 2 кода: 1-й размещается в разделе сайта Head, 2-й в месте, где форма должна показываться (в контенте, в конце или начале страницы, в футере и т.д.). Но продолжим работу с настройками.

 

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

Переходим в раздел Поля формы. Добавляем новое поле и задаем имя — Name, выбираем тип поля text, в placeholder прописываем подсказку для пользователя внутри поля. В нашем случает это — «Ваше имя». Ставим галочку «Обязательно для заполнения».

Затем добавляем поле для телефона. В placeholder прописываем «Ваш телефон», в имени поля – Phone и выбираем тип поля Phone. Если требуется настройка интеграции с телефонией, то переходим в соответствующий раздел и настраиваем.

Теперь создаем поле с возможностью загрузки файлов: в имени прописываем file и выбираем одноименный тип поля, в плейсхолдере пишем Выберите файл, ставим галочку «Обязательно для заполнения», и указываем размер загружаемых файлов.

Чтобы пользователь мог сопровождать свои заявки комментариями, нужно создать текстовое поле с типом textarea, в имени прописать message, а в плейсхолдере — Сообщение.

Последнее поле (обязательное для любой формы) — кнопка ОТПРАВИТЬ: прописываем имя поля, например send, выбираем тип submit, в placeholder добавляем название кнопки. Перед кнопкой встраивается ссылка на соглашение об обработке персональных данных, которое мы создаем в разделе Соглашения. По умолчанию уже прописано типовое соглашение, которое можно отредактировать. Сохраняем изменения и переходим в следующую вкладку.

 

Определяемся с дизайном

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

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

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

Если же на сайте не определены стили к полям форм, можно задать любой класс (возможно указание одинакового класс для полей), и прописать стили для заданного класса на своем сайте, как это сделали мы:

 

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

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

 

Java-Script события

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

Завершив настройку формы, устанавливаем коды из первой вкладки в раздел Head и на нужной странице сайта. Вот что в итоге у нас получилось! Создание формы обратной связи заняло примерно 5 минут, а в первый раз займёт не более 10. 

Вид полученной формы 2

Назад на главную