Конструктор форм з drag-and-drop: розробка під ключ

Типова біль: менеджер просить додати поле «Зручний час для дзвінка» у форму зворотного зв'язку. Розробник править шаблон, оновлює валідацію, тестує на staging — іде 4 години. Такі правки трапляються щотижня, відволікаючи від основної розробки. У результаті компанія втрачає до 16 годин на місяць лише на доопрацювання форм. При цьому в типовому проєкті з десятком форм подібні зміни перетворюються на нескінченний цикл узгоджень та деплоїв.

Готовий конструктор форм з drag-and-drop усуває цю проблему на рівні архітектури. Ми розробили рішення, яке дозволяє нетехнічним співробітникам створювати та змінювати форми через інтуїтивний інтерфейс. Конструктор складається з трьох незалежних компонентів: Builder (редактор на React), Renderer (компонент відображення) та Backend (API для зберігання схем і відповідей). Схема форми — JSON-схема, яка інтерпретується рендерером. Це дає повну гнучкість без зміни коду при додаванні нового типу поля. Нижче — приклад такої схеми.

{ "id": "uuid-v4", "title": "Заявка на зворотний дзвінок", "description": "Ми передзвонимо протягом 30 хвилин", "settings": { "submit_label": "Відправити заявку", "success_message": "Дякуємо! Ми зв'яжемося з вами.", "redirect_url": null, "notify_emails": ["[email protected]"], "allow_multiple_submissions": false }, "fields": [ { "id": "field_1", "type": "text", "label": "Ім'я", "placeholder": "Введіть ваше ім'я", "required": true, "validation": { "min_length": 2, "max_length": 100 } }, { "id": "field_2", "type": "phone", "label": "Телефон", "required": true, "validation": { "pattern": "^\\+?[\\d\\s\\-\\(\\)]{7,20}$" } }, { "id": "field_3", "type": "select", "label": "Зручний час дзвінка", "required": false, "options": [ { "value": "morning", "label": "9:00 – 12:00" }, { "value": "afternoon", "label": "12:00 – 17:00" }, { "value": "evening", "label": "17:00 – 20:00" } ] }, { "id": "field_4", "type": "conditional_group", "condition": { "field": "field_3", "operator": "equals", "value": "evening" }, "fields": [ { "id": "field_4_1", "type": "checkbox", "label": "Підтверджую, що дзвінок після 17:00 мені зручний", "required": true } ] } ] } 

Чому JSON-схема?

JSON-схема — це єдине джерело істини для всіх компонентів. Builder генерує її, Renderer читає та відмальовує, Backend валідує та зберігає відповіді. Така архітектура дозволяє додавати нові типи полів без зміни коду фронтенду чи бекенду — достатньо розширити схему. Це ключова відмінність від саморобних рішень, де кожне поле жорстко зашите в шаблон.

Проблеми, які вирішуємо

• Ручне кодування кожної форми — забирає до 4 годин на одну зміну. Наш конструктор скорочує це до 30 хвилин на редагування через інтерфейс.
• Складність підтримки кастомних полів — додавання нового типу вимагає зміни коду на всіх рівнях. JSON-схема дозволяє додавати поля без участі розробника.
• Відсутність аналітики — без конструктора складно відстежувати конверсію. Ми вбудовуємо дашборд з розподілом відповідей, конверсією та покинутими сесіями.

Підтримувані типи полів

Яку бібліотеку обрати для drag-and-drop?

Для реалізації drag-and-drop в редакторі ми використовуємо бібліотеку @dnd-kit. Вона сучасніша за react-beautiful-dnd: підтримує складніші сценарії — наприклад, перетягування між контейнерами, сортування з анімацією та роботу з сенсорними екранами. При цьому вона легша та швидша.

import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core'; import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable'; function FormBuilder({ schema, onChange }: BuilderProps) { const [fields, setFields] = useState(schema.fields); function handleDragEnd(event: DragEndEvent) { const { active, over } = event; if (active.id !== over?.id) { setFields((items) => { const oldIndex = items.findIndex((i) => i.id === active.id); const newIndex = items.findIndex((i) => i.id === over!.id); const reordered = arrayMove(items, oldIndex, newIndex); onChange({ ...schema, fields: reordered }); return reordered; }); } } return ( <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}> <SortableContext items={fields.map(f => f.id)} strategy={verticalListSortingStrategy}> {fields.map(field => ( <SortableFieldCard key={field.id} field={field} onEdit={(updated) => updateField(field.id, updated)} onDelete={() => removeField(field.id)} /> ))} </SortableContext> </DndContext> ); } 

Рендеринг та валідація

Рендерер працює з тією ж JSON-схемою. Для валідації використовуємо React Hook Form — бібліотеку, яка мінімізує ререндери та спрощує правила перевірки.

import { useForm } from 'react-hook-form'; function FormRenderer({ schema, onSubmit }: RendererProps) { const { register, handleSubmit, watch, formState: { errors } } = useForm(); return ( <form onSubmit={handleSubmit(onSubmit)}> {schema.fields.map(field => ( <FormField key={field.id} field={field} register={register} errors={errors} watch={watch} /> ))} <button type="submit">{schema.settings.submit_label}</button> </form> ); } function FormField({ field, register, errors, watch }) { // Умовна логіка: показувати поле лише якщо умова виконана if (field.condition) { const watchValue = watch(field.condition.field); const conditionMet = evaluateCondition(watchValue, field.condition); if (!conditionMet) return null; } const rules = buildValidationRules(field); switch (field.type) { case 'text': case 'email': case 'phone': return ( <div> <label>{field.label}{field.required && ' *'}</label> <input {...register(field.id, rules)} placeholder={field.placeholder} /> {errors[field.id] && <span>{errors[field.id].message}</span>} </div> ); case 'select': return ( <div> <label>{field.label}</label> <select {...register(field.id, rules)}> <option value="">Оберіть...</option> {field.options.map(opt => ( <option key={opt.value} value={opt.value}>{opt.label}</option> ))} </select> </div> ); // ... інші типи } } 

Як зберігати дані та аналізувати відповіді?

Зберігання схем та відповідей організовано на PostgreSQL. Схема форми — JSONB, відповіді — теж JSONB з GIN-індексом для швидкого пошуку.

CREATE TABLE forms ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title VARCHAR(255) NOT NULL, slug VARCHAR(100) UNIQUE, schema JSONB NOT NULL, is_active BOOLEAN DEFAULT TRUE, created_by INTEGER, created_at TIMESTAMP DEFAULT NOW(), updated_at TIMESTAMP DEFAULT NOW() ); CREATE TABLE form_submissions ( id BIGSERIAL PRIMARY KEY, form_id UUID REFERENCES forms(id), data JSONB NOT NULL, metadata JSONB DEFAULT '{}', submitted_at TIMESTAMP DEFAULT NOW() ); CREATE INDEX idx_submissions_form ON form_submissions (form_id, submitted_at DESC); CREATE INDEX idx_submissions_data ON form_submissions USING gin(data); -- Аналітика: розподіл відповідей для поля SELECT data->>'field_3' AS answer, COUNT(*) AS count, ROUND(COUNT(*) * 100.0 / SUM(COUNT(*)) OVER (), 1) AS percent FROM form_submissions WHERE form_id = $1 AND data ? 'field_3' GROUP BY data->>'field_3' ORDER BY count DESC; 

Обробка відправки виконується через єдиний API-ендпоінт:

// POST /api/forms/{slug}/submit async function submitForm(req: Request, res: Response) { const form = await getFormBySlug(req.params.slug); if (!form || !form.is_active) return res.status(404).json({ error: 'Form not found' }); const schema = form.schema; const errors = validateSubmission(schema.fields, req.body); if (Object.keys(errors).length) { return res.status(422).json({ errors }); } const submission = await saveSubmission(form.id, req.body, { ip: req.ip, user_agent: req.headers['user-agent'], referer: req.headers.referer, }); // Сповіщення if (schema.settings.notify_emails?.length) { await sendNotificationEmail(form, submission); } if (schema.settings.webhook_url) { await triggerWebhook(schema.settings.webhook_url, submission); } return res.json({ success: true, message: schema.settings.success_message, redirect: schema.settings.redirect_url, }); } 

Типові помилки при реалізації

• N+1 запити при завантаженні списку форм — вирішуємо через eager loading або кешування.
• Проблеми гідратації на сервері — форми з умовами можуть рендеритися некоректно при SSR. Використовуємо Suspense та поступове завантаження.
• Складність валідації кастомних полів — JSON-схема з правилами спрощує підтримку.
• Відсутність захисту від повторної відправки — впроваджуємо CSRF-токени та унікальні ключі.

Процес роботи

1. Аналітика — вивчаємо вимоги, типи форм, інтеграції.
2. Проектування — розробляємо JSON-схему та прототип інтерфейсу.
3. Реалізація — пишемо Builder, Renderer, Backend, підключаємо аналітику.
4. Тестування — перевіряємо коректність рендерингу, валідації, відправок.
5. Деплой — розгортаємо на сервері, налаштовуємо моніторинг.

Строки реалізації

Що входить в роботу

• Готовий React-компонент редактора з палітрою полів
• API для зберігання схем та відповідей
• Сторінка аналітики з графіками та вивантаженням
• Інтеграція з поштою (сповіщення) та вебхуками
• Документація по API та налаштуванні
• Навчання адміністраторів (1–2 години)
• Гарантія 12 місяців на розроблене рішення

На відміну від саморобного рішення, де кожна зміна вимагає 4 годин роботи розробника, наш конструктор дозволяє змінити форму за 30 хвилин через інтерфейс. Це дає суттєву економію бюджету — до 95% часу на створення та зміну форм. Оцінимо ваш проєкт за 1 годину: зв'яжіться з нами, щоб обговорити деталі та отримати комерційну пропозицію. Замовте розробку конструктора форм під ключ вже сьогодні.