Створення кастомного конструктора форм: 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 — кожен блок вимагає попереднього проектування. Ціна помилки при масштабуванні сягає десятків людино-місяців, а вартість рефакторингу архітектури після запуску — 500 000–1 000 000 грн.

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

Як забезпечити масштабованість 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 описана у відкритих джерелах — рекомендуємо ознайомитися для розуміння компромісів.

Чому білінг — найнедооціненіший блок

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

Для локальних ринків — ЮKassa або Tinkoff recurring. API менш зручні, але покривають вимоги законодавства.

Порівняння: використання Stripe замість самописного білінгу скорочує час розробки підписної логіки у 2,5 рази, а кількість багів — на 80% (дані з наших проектів). Це економить від 200 000 грн на етапі MVP.

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?

Безпеку будуємо на трьох рівнях: транспорт (HTTPS + HSTS), доступ (OAuth 2.0 / OpenID Connect з обов'язковим JWT refresh), дані (шифрування чутливих полів на рівні додатку). Аудит логів доповнюємо retention політикою — логи зберігаються 90 днів для free-тарифу і 365 для enterprise. Контроль доступу реалізуємо через RBAC з таблицею roles та permissions, інтегровану з Gate.

Помилка в налаштуванні CORS або відсутність CSRF-токенів на публічному API — найчастіша вразливість у SaaS, яку ми виправляємо на аудиті.

Досвід нашої команди та гарантії

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

Що ви отримуєте

• Документація архітектури: схеми, 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, налаштування моніторингу, передача документації.

Орієнтири за термінами

Розробка SaaS-платформи — складний, але керований процес, якщо від самого початку закласти правильну архітектуру. Якщо ви плануєте запуск або масштабування продукту — замовте консультацію, щоб уникнути типових помилок. Вартість проекту розраховується індивідуально, зв'яжіться з нами — оцінимо за 2 дні. Замовте розробку під ключ: від проектування до деплою з гарантією архітектури. Перша година консультації — безкоштовно.