Как создать конструктор форм

Конструктор форм позволяет людям создавать свои формы: выбрать поля, задать правила, опубликовать ссылку, а затем собирать ответы. По сути он состоит из трёх частей: описание формы, которое хранится как данные, отрисовщик, который превращает описание в работающую форму, и хранилище ответов с уведомлениями и экспортом. Прежде чем его строить, проверьте, действительно ли он нужен: если вам нужна только контактная или анкетная форма, сделайте её напрямую и обойдитесь без конструктора.

Нужен ли вам конструктор вообще?

Конструктор — куда более крупный проект, чем форма, потому что каждый тип поля должен работать в редакторе, в публичной форме, при проверке, хранении, уведомлениях и экспорте.

Что нужно конструктору форм

Описания форм

Храните каждую форму как список полей в виде структурированных данных (хорошо подходит JSON в колонке Postgres). Поле может выглядеть так:

• id — стабильный идентификатор, который не меняется, даже если меняется подпись
• type — текст, email, число, длинный текст, выбор из списка, флажок, дата, файл
• label и текст подсказки
• обязательное поле, мин. / макс., допустимые типы файлов
• варианты для полей выбора
• порядок и, при необходимости, условие («показывать, только если поле X равно Y»)

Редактор изменяет этот список, а публичная форма его читает. В этом весь фокус: на каждую форму не нужен новый код.

Ответы

• Ответ — форма, версия формы, время отправки, ответы по ID поля, статус (новый, прочитан, в архиве).
• Файлы — загруженные файлы хранятся в файловом хранилище, а в строке ответа лежит только ссылка на них, а не сам файл.

Страницы

• Список форм с количеством ответов.
• Редактор — добавление, сортировка и настройка полей с живым предпросмотром рядом.
• Настройки — текст подтверждения или перенаправление, email-уведомления, даты открытия и закрытия, лимит ответов.
• Публичная форма по собственной ссылке и версия для встраивания на другие сайты.
• Таблица ответов с поиском, статусами, карточкой ответа и экспортом в CSV.

Решения и компромиссы

Версионирование. Через 200 ответов кто-нибудь переименует «Телефон» в «Мобильный номер». Если ответы хранятся по ID поля, а каждый ответ записывает версию формы, старые ответы по-прежнему отображаются правильно. Без этого данные незаметно перепутаются.

Проверка выполняется дважды. Поля проверяйте в браузере для быстрой обратной связи, а затем ещё раз на сервере, потому что любой может отправить данные прямо на ваш адрес. Значение имеет проверка на сервере.

Загрузка файлов. Она влечёт расходы на хранение, ограничения размера, проверку типа и вопросы конфиденциальности (резюме, паспорта, медицинские анкеты). Ограничивайте типы и размеры и делайте загруженные файлы приватными по умолчанию, чтобы их могли читать только владельцы форм. См. как добавить загрузку файлов в приложение.

Уведомления. Ожидается функция «пришлите мне письмо, когда кто-то отправит форму». Для неё нужен провайдер email и API-ключ; см. как отправлять письма из приложения.

Спам. Публичную форму найдут боты. Используйте поле-ловушку (honeypot), которое скрыто от людей, но заполняется ботами, ограничение частоты с одного IP, проверку на сервере и при необходимости CAPTCHA.

Встраивание. Вставка через iframe — самый простой и безопасный способ разместить форму на чужом сайте. Встраивание через скрипт выглядит более нативно, но сложнее в реализации и защите.

Условная логика. «Показывать это поле, только если…» очень популярна, но умножает количество тестов. Добавляйте её, когда базовые функции уже стабильны.

Первый промпт, который работает

Создай веб-приложение-конструктор форм для моей команды. Авторизованные пользователи создают формы в редакторе с живым предпросмотром. Типы полей: короткий текст, длинный текст, email, число, дата, выбор одного варианта, флажки и загрузка файла. У каждого поля есть стабильный ID, подпись, текст подсказки, флаг обязательности и правила для типа (мин./макс., варианты, допустимые типы файлов и лимит размера 10 МБ). Храни описание формы в JSON с номером версии, который увеличивается при каждой публикации. У каждой формы есть публичная ссылка и код встраивания через iframe. Проверяй ответы на сервере по опубликованной версии, сохраняй ответы по ID поля вместе с версией формы, а загруженные файлы клади в приватное файловое хранилище. Добавь скрытое поле-ловушку и ограничение по IP на частоту запросов. Владельцы форм видят таблицу ответов со статусами (новый, прочитан, в архиве), карточку ответа и экспорт в CSV. Всё храни в базе данных. Условную логику и email-уведомления оставь на потом.

Пошаговая сборка

1. Редактор и описание. Соберите форму со всеми типами полей и посмотрите сохранённый JSON вместе с агентом. Он чистый и стабильный?
2. Публичная форма. Заполните её на телефоне. Проверьте сообщения об ошибках и экран подтверждения.
3. Проверка на сервере. Попросите агента отправить ответ, который нарушает правила, напрямую на сервер, минуя страницу. Он должен быть отклонён.
4. Версии. После нескольких ответов переименуйте и переставьте поля. Старые ответы должны показывать правильные значения.
5. Загрузка файлов. Попробуйте файл слишком большого размера и файл неподходящего типа. Убедитесь, что посторонний не может открыть загруженный файл, угадав ссылку.
6. Таблица ответов и экспорт. Проверьте экспорт в CSV с запятыми, переносами строк и буквами с диакритикой в ответах.
7. Уведомления, встраивание, логика. Добавляйте их по одному.

Частые ошибки

• Хранение ответов по подписи. Подписи меняются. Используйте стабильные ID полей.
• Проверка только в браузере. Это удобство, а не защита.
• Публичные загруженные файлы. Формы часто собирают документы, которые людям не хочется показывать всем.
• Нет защиты от спама. Публичная форма может за несколько дней заполниться мусором.
• Конструктор ради одной формы. Сделайте саму форму.
• Безлимитные ответы в публичном продукте. Если клиенты создают формы, задайте лимиты по тарифам, иначе одна популярная форма может увеличить счёт за хостинг.

Когда лучше готовый продукт

Готовые онлайн-сервисы для форм отличные и недорогие для большинства задач. Они уже решили вопросы встраивания, спама, оплаты, интеграций и доступности для десятков типов полей. Если вашей команде нужны просто формы, используйте готовый сервис: см. альтернативы Typeform и альтернативы Google Forms.

Строить своё решение стоит, когда ответы должны храниться рядом с вашими собственными данными (питать CRM или клиентский портал, который вы ведёте), когда после отправки нужны процессы, которых сервисы не умеют, когда место и владение данными — требование, или когда формы — часть продукта, который вы продаёте.

Как это сделать в Mythex

В Mythex вы описываете конструктор в чате и тестируете редактор и публичную форму рядом в живом превью. Mythex добавляет отдельную базу данных для описаний форм и ответов, а файловое хранилище включается автоматически, когда приложению нужны загрузки (на тарифе Free лимит 1 ГБ). Письма с уведомлениями идут через провайдера, которого вы подключаете со своим ключом. Опубликуйте приложение по ссылке mythex.ai или на собственном домене на тарифе Pro, и ссылки на публичные формы будут работать оттуда.

Вопросы