Разработка конструктора форм (Drag-and-Drop Form Builder) на сайте

Разработка конструктора форм (Drag-and-Drop Form Builder) на сайте

Конструктор форм — инструмент, который позволяет пользователям без навыков программирования создавать произвольные формы: опросы, заявки, регистрации, квизы. Ключевые требования: гибкая схема полей, визуальный редактор с drag-and-drop, рендеринг форм на сайте и сбор ответов.

Архитектура

Система состоит из трёх независимых частей:

1. Builder — React-компонент редактора форм (drag-and-drop)
2. Renderer — React-компонент для отображения и заполнения формы
3. Backend — API для хранения схем, сбора ответов, аналитики

Схема формы — это JSON, который интерпретируется рендерером. Это даёт полную гибкость без изменений кода при добавлении нового типа поля.

Структура схемы формы (JSON Schema)

{
  "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
        }
      ]
    }
  ]
}

Поддерживаемые типы полей

Builder: компонент редактора

Используется @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>
  );
}

Панель инструментов слева — палитра типов полей. Перетаскивание из палитры на холст добавляет новое поле в нужную позицию.

Renderer: рендеринг и валидация

Рендерер работает с той же 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>
      );
    // ... другие типы
  }
}

База данных

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,        -- { "field_1": "Иван", "field_2": "+79991234567" }
    metadata    JSONB DEFAULT '{}',   -- IP, user agent, UTM
    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);

JSONB для ответов — правильный выбор: структура каждой формы уникальна, и фиксированная схема таблицы не подходит. GIN-индекс позволяет искать по значениям конкретных полей.

Обработка отправки формы

// 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,
  });
}

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

Для каждой формы — страница с агрегированной статистикой:

• Количество ответов по дням (график)
• Для select / radio / checkbox_group — распределение ответов (pie chart)
• Для числовых полей — среднее, медиана, диапазон
• Выгрузка всех ответов в CSV/Excel

-- Распределение ответов для поля select
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;

Сроки реализации

Конструктор с базовыми типами полей (text, email, select, checkbox), без условной логики — 10–12 рабочих дней. Полный набор типов, условная логика, файловые поля, аналитика ответов, экспорт в CSV, webhook, встраивание через iframe — 16–22 рабочих дня.