Пользователь видит форму из 20 полей — с вероятностью 70% он её бросит. Особенно на мобильных, где скролл убивает конверсию. Конструктор форм с условной логикой решает это: показывает только релевантные вопросы, сохраняет прогресс и даёт аналитику. Мы создаём такие инструменты с нуля под React 18 / Next.js 14. Наш опыт — 5+ лет, 30+ проектов — гарантирует надёжное решение, а не сырой прототип.
Уже на этапе MVP вы получаете drag-and-drop редактор с поддержкой 10 типов полей, условной логикой и email-уведомлениями. Это сокращает время вывода продукта на рынок на 40% по сравнению с покупкой Enterprise-решений, а затраты на лидогенерацию — до 50 000 ₽ в месяц.
Типовые конструкторы (Typeform, JotForm) имеют ограничения по кастомизации и интеграции с вашей CRM. Наш drag-and-drop редактор строится на React 18 с кастомной моделью правил — вы не привязаны к чужому API и можете расширять функционал под бизнес-логику. Например, форма для страхования: показать полис только клиентам с определённым стажем, или форма опроса — динамически менять вопросы в зависимости от предыдущих ответов. Мы уже реализовали такие сценарии для 30+ клиентов в сферах fintech, edtech и e-commerce.
Как устроен конструктор форм?
Типы полей — создание кастомного конструктора
| Тип поля | Описание | Валидация |
|---|---|---|
| Short text | Однострочный ввод | Длина, regex |
| Long text | Многострочный текст | Макс. символов |
| Number | Числовое значение | Min, max, шаг |
| Адрес эл. почты | Формат email | |
| Phone | Номер телефона | Маска, код страны |
| URL | Ссылка | Формат URL |
| Date / DateTime | Выбор даты | Минимум, максимум |
| Single choice | Один вариант | — |
| Multiple choice | Несколько вариантов | Мин/макс выбор |
| Dropdown | Выпадающий список | — |
| Rating | Звёзды или шкала NPS | 0–10 |
| File Upload | Загрузка файла | Тип, размер |
| Signature | Рисование подписи | — |
| Payment | Встроенная оплата (Stripe) | Сумма, валюта |
Как работает условная логика?
Условная логика — показывать/скрывать поля или страницы в зависимости от ответов. Типовое правило:
IF вопрос_3 = "Да" THEN показать вопросы 4,5,6 IF вопрос_3 = "Нет" THEN перейти к вопросу 7 Модель правил:
{ "field_id": "q3", "conditions": [ { "field": "q3", "operator": "equals", "value": "yes", "actions": [{ "type": "show", "fields": ["q4", "q5", "q6"] }] } ] } Это основа юзабилити: форма становится персонализированной, а не универсальной. Без неё пользователь видит все поля сразу — 20 вопросов вместо 5-6, bounce rate растёт. Наше решение сокращает время заполнения в среднем на 40%, что формирует экономию бюджета до 40% — это в 2 раза быстрее, чем типовые конструкторы. Для complex forms используем server-side validation и batch API, что ускоряет обработку ещё на 50%.
Многостраничные формы и сохранение прогресса
Форма разбивается на шаги (pages). Прогресс-бар показывает шаг N из M. Навигация: «Назад» / «Далее» / «Отправить» на последнем шаге. Сохранение прогресса: частично заполненная форма сохраняется в sessionStorage или на сервере по токену. При возврате данные восстанавливаются.
Пошаговая инструкция создания формы
- Выберите тип поля из панели слева.
- Перетащите его в редактор.
- Настройте параметры поля (название, валидация).
- Добавьте условную логику через визуальный конструктор правил.
- Сохраните и опубликуйте форму.
Как мы обеспечиваем надёжное хранение?
CREATE TABLE form_submissions ( id UUID PRIMARY KEY, form_id UUID, respondent_id UUID NULL, submitted_at TIMESTAMPTZ, ip_address INET, user_agent TEXT, utm_source TEXT, utm_medium TEXT, utm_campaign TEXT ); CREATE TABLE submission_answers ( submission_id UUID, field_id TEXT, value_text TEXT, value_number NUMERIC, value_json JSONB, value_files TEXT[] ); Мы гарантируем uptime 99.9% на уровне инфраструктуры. Для быстрого доступа используем индексы по form_id и submitted_at. Данные дублируются в cold storage на S3.
Аналитика ответов
| Вид аналитики | Описание |
|---|---|
| Summary view | Pie chart для single choice, bar chart для rating |
| Individual responses | Каждый заполненный экземпляр |
| Drop-off analysis | На каком шаге пользователи уходят (completion funnel) |
| Экспорт | CSV / XLSX всех ответов |
Уведомления
- Notification email: при каждом новом ответе — письмо владельцу формы (настраиваемый шаблон)
- Confirmation email: подтверждение для респондента (с копией ответов)
- Webhook: POST с данными ответа на указанный URL. Отправляем данные в формате JSON или form-data. Поддерживаем авторизацию через Bearer token или Basic Auth. Можно настроить повторные попытки при ошибках.
Embed и публикация
Три способа распространения формы:
- Прямая ссылка:
forms.platform.com/f/abc123 - iFrame embed: код для вставки на любой сайт
- Popup/Slide-in: JS-сниппет, открывающий форму как overlay
Что входит в работу?
- Аналитика требований и проектирование схемы БД
- Разработка drag-and-drop редактора на React 18 / TypeScript
- Реализация условной логики и многостраничности
- Интеграция с системами уведомлений (email, webhook)
- Экспорт ответов в CSV/XLSX
- Подготовка embed-кода
- Документация API для интеграций
- Передача доступов и обучение команды
- Техническая поддержка в течение месяца после релиза
Сроки
MVP (10 типов полей, условная логика, email-уведомления, экспорт CSV): 6–8 недель. Полноценный конструктор с оплатой, брендингом, многостраничными формами, аналитикой и интеграциями: 3–4 месяца.
Хотите разработать конструктор форм под свой стек? Получите консультацию по оценке проекта. Свяжитесь с нами, чтобы обсудить детали и начать проект.
Закажите разработку — мы подготовим коммерческое предложение с точными сроками и стоимостью.