Создание кастомного конструктора форм: drag-and-drop с условной логикой

Пользователь видит форму из 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.

Как устроен конструктор форм?

Типы полей — создание кастомного конструктора

Как работает условная логика?

Условная логика — показывать/скрывать поля или страницы в зависимости от ответов. Типовое правило:

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.

Аналитика ответов

Уведомления

• Notification email: при каждом новом ответе — письмо владельцу формы (настраиваемый шаблон)
• Confirmation email: подтверждение для респондента (с копией ответов)
• Webhook: POST с данными ответа на указанный URL. Отправляем данные в формате JSON или form-data. Поддерживаем авторизацию через Bearer token или Basic Auth. Можно настроить повторные попытки при ошибках.

Embed и публикация

Три способа распространения формы:

1. Прямая ссылка: forms.platform.com/f/abc123
2. iFrame embed: код для вставки на любой сайт
3. 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 месяца.

Хотите разработать конструктор форм под свой стек? Получите консультацию по оценке проекта. Свяжитесь с нами, чтобы обсудить детали и начать проект.

Закажите разработку — мы подготовим коммерческое предложение с точными сроками и стоимостью.

Разработка SaaS-платформ

Мы знаем эту боль наизусть. Запускаешь MVP с авторизацией и подпиской, а через полгода упираешься в архитектурные решения, которые нельзя откатить без переписывания половины кода. Multi-tenancy, биллинг, аудит логов, feature flags — каждый блок требует предварительного проектирования, иначе цена ошибки при масштабировании уходит в десятки человеко-месяцев, а в деньгах — от 3–5 млн ₽ на рефакторинг.

За 8 лет работы над SaaS-продуктами мы проверили на практике, какие решения работают, а какие превращают поддержку в ад. Ниже — архитектурные подходы, которые используем сами и рекомендуем клиентам.

Как мы строим multi-tenancy: изоляция без оверхеда

Первое, что решаем — схема разделения данных. Shared schema (tenant_id на каждой таблице) — наш стандартный выбор для большинства проектов. Все арендаторы в одной базе, миграции применяются разом, операционная сложность минимальна. В Laravel реализуем через Global Scope:

protected static function booted(): void
{
    static::addGlobalScope('tenant', function (Builder $builder) {
        $builder->where('tenant_id', TenantContext::current()->id);
    });
}

Глобальный скоуп — только первый уровень защиты. Обязательно добавляем Row-Level Security в PostgreSQL — она сработает, если приложение пропустит WHERE tenant_id = ?:

ALTER TABLE orders ENABLE ROW LEVEL SECURITY;
CREATE POLICY tenant_isolation ON orders
    USING (tenant_id = current_setting('app.tenant_id')::uuid);

Для enterprise-клиентов, которым нужна физическая изоляция, выделяем отдельную базу. Такой гибридный подход (shared + dedicated) используется в 80% зрелых SaaS: базовый продукт на shared schema, премиум — на отдельной инстанции. Мы внедряем его с первого спринта, чтобы не переписывать логику позже.

Модель multi-tenancy описана в Wikipedia: Multitenancy — рекомендуем ознакомиться для понимания trade-off'ов.

Почему биллинг — самый недооценённый блок

Upgrade посреди расчётного периода, downgrade с отложенным вступлением, истёкший trial, failed payment с grace period — Stripe Billing закрывает 90% сценариев из коробки. Обязательно обрабатываем вебхуки (customer.subscription.updated, invoice.payment_failed) с идемпотентным ключом — без него retry на клиенте приведёт к двойному списанию.

Для рынка СНГ — ЮKassa или Tinkoff recurring. API менее удобны, но покрывают требования 54-ФЗ.

Сравнение: переход с самописного биллинга на Stripe сокращает время разработки подписочной логики на 60%, а количество багов — на 80% (данные наших проектов). Экономия в деньгах для проекта среднего размера — до 2–3 млн ₽ на этапе разработки.

Onboarding: как не потерять пользователя до aha-moment

Технически onboarding — это wizard с persistent состоянием, который нельзя случайно пропустить. Таблица onboarding_steps с чек-листом, middleware редиректит на незавершённый шаг. После завершения — флаг в user settings, middleware отключается.

Критический нюанс: показывайте прогресс реального продукта, не абстрактные шаги. «Создайте первый отчёт» вместо «Завершите шаг 3 из 5». Мы используем drip-кампании через Customer.io или собственную очередь с отложенными jobs — если пользователь выполнил ключевое действие, следующее письмо не отправляется.

Feature flags и управление доступом

SaaS с тарифами требует гранулярного контроля. Не делайте if ($user->plan === 'pro') по всему коду — через месяц он станет неподдерживаемым. Вместо этого:

• Backend: Gate + Policy с проверкой через таблицу features, связанную с планами.
• Frontend: контекст с флагами, загружаемый при инициализации приложения.
• Open-source инструменты: Unleash или Growthbook — UI для A/B-тестов и rollout.

Как защитить API от агрессивных клиентов

Rate limiting — must-have для публичного API. Один клиент может положить всех остальных. В Laravel используем Redis с sliding window counter:

Каждый ответ содержит X-RateLimit-Remaining и X-RateLimit-Reset — клиенты рассчитывают на эти заголовки.

Аудит-логи и мониторинг: что, кто и когда

Без аудит-лога невозможно узнать, кто удалил проект или когда изменились настройки биллинга. Таблица audit_logs с индексами по (tenant_id, created_at) и (subject_type, subject_id). В Laravel — Observer'ы на ключевых моделях.

class OrderObserver
{
    public function created(Order $order): void
    {
        AuditLog::create([
            'tenant_id' => $order->tenant_id,
            'user_id' => auth()->id(),
            'action' => 'created',
            'subject_type' => Order::class,
            'subject_id' => $order->id,
        ]);
    }
}

Мониторинг: Sentry для exception tracking, Grafana + Prometheus для метрик. Алерты на error rate > 5% и response time p95 > 2s.

Опыт нашей команды и гарантии

Над SaaS-платформами работают инженеры с 8+ летним опытом, за плечами — 50+ проектов, от стартапов до enterprise с миллионными нагрузками. Мы даём гарантию на архитектурные решения: если выбранный подход не масштабируется — перепроектируем за свой счёт.

Deliverables и гарантии

• Документация архитектуры: схемы, ERD, sequence diagrams.
• Настройка CI/CD (GitHub Actions / GitLab CI).
• Доступы к репозиторию, стейджингу и продакшену.
• Обучение команды: 2–3 сессии по код-ревью и runbook.
• Post-launch поддержка 1 месяц.
• Гарантия на архитектуру: бесплатный рефакторинг, если решение не проходит по нагрузке.

Процесс работы

1. Discovery (1–2 недели) — аудит текущей архитектуры, скоуп MVP, приоритеты фич.
2. Проектирование (1 неделя) — выбор стека, схема multi-tenancy, план биллинга.
3. Разработка (4–12 недель) — спринты по 2 недели, демо после каждого.
4. Тестирование (1 неделя) — нагрузочные тесты под target нагрузки, security audit.
5. Деплой и обучение (1 неделя) — rollout, настройка мониторинга, передача документации.

Ориентиры по срокам

Стоимость рассчитывается индивидуально — свяжитесь с нами, мы оценим проект за 2 дня. Закажите разработку под ключ: от проектирования до деплоя с гарантией архитектуры. Получите консультацию по архитектуре вашего продукта — первый час бесплатно.