Користувач бачить форму з 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 місяці.
Хочете розробити конструктор форм під свій стек? Отримайте консультацію щодо оцінки проєкту. Зв'яжіться з нами, щоб обговорити деталі та почати проєкт.
Замовте розробку — ми підготуємо комерційну пропозицію з точними строками та вартістю.