Як створити конструктор форм

Конструктор форм дає людям змогу самостійно створювати форми: додавати поля, задавати правила, публікувати посилання, а потім збирати відповіді. Усередині він складається з трьох частин: визначення форми, що зберігається як дані, відтворювача, який перетворює визначення на робочу форму, і сховища відповідей із сповіщеннями та експортом. Перш ніж його створювати, переконайтеся, що він вам справді потрібен. Якщо потрібна лише контактна чи анкетна форма, створіть її напряму і обійдіться без конструктора.

Чи потрібен конструктор взагалі

Конструктор — значно більший проєкт, ніж форма, адже кожен тип поля має працювати в редакторі, у публічній формі, у перевірці, зберіганні, сповіщеннях і експорті.

Що потрібно конструктору форм

Визначення форм

Зберігайте кожну форму як список полів у структурованих даних (JSON у колонці Postgres добре працює). Поле може виглядати так:

• id: стабільний ідентифікатор, який ніколи не змінюється, навіть коли змінюється підпис
• type: текст, email, число, довгий текст, вибір зі списку, прапорці, дата, файл
• label і help text: підпис і текст підказки
• required, min / max, allowed file types: обов’язковість, межі та дозволені типи файлів
• options для полів вибору
• order, а за бажанням і condition («показувати лише якщо поле X дорівнює Y»)

Редактор змінює цей список, а публічна форма його читає. У цьому весь трюк: для кожної форми не потрібен новий код.

Відповіді

• Відповіді: форма, версія форми, час надсилання, відповіді за ідентифікатором поля, статус (нова, прочитана, в архіві).
• Файли: завантажені файли належать сховищу файлів, а відповідь містить лише посилання на них, а не сам файл у рядку бази даних.

Сторінки

• Список форм з кількістю відповідей.
• Редактор: додавання, перестановка і налаштування полів із живим прев’ю поруч.
• Налаштування: повідомлення після відправки або перенаправлення, email-сповіщення, дати відкриття й закриття, ліміт відповідей.
• Публічна форма за власним посиланням і версія для вбудовування на інших сайтах.
• Таблиця відповідей з пошуком, статусами, переглядом деталей і експортом у CSV.

Рішення та компроміси

Версіонування. Хтось неодмінно перейменує «Телефон» на «Номер мобільного» після 200 відповідей. Якщо відповіді зберігаються за ідентифікатором поля, а кожна відповідь фіксує версію форми, старі відповіді й далі відображаються правильно. Без цього ваші дані тихо зсуваються.

Перевірка відбувається двічі. Перевіряйте поля в браузері для швидкого відгуку, а потім ще раз на сервері, бо будь-хто може надіслати дані прямо на ваш endpoint. Важлива саме серверна перевірка.

Завантаження файлів. Вони несуть витрати на сховище, обмеження розміру, перевірку типів і питання приватності (резюме, документи, медичні форми). Обмежуйте типи й розміри, а завантажені файли робіть приватними за замовчуванням, доступними лише власникам форми. Див. як додати завантаження файлів до застосунку.

Сповіщення. Очікується функція «напиши мені, коли хтось надішле відповідь». Для цього потрібен провайдер email та API-ключ; див. як надсилати email із застосунку.

Спам. Публічну форму знайдуть боти. Використовуйте приховане поле-пастку (людина його не бачить, а бот заповнює), обмеження кількості запитів з 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 ГБ). Сповіщення на email проходять через провайдера, якого ви підключаєте зі своїм ключем. Опублікуйте застосунок за посиланням mythex.ai або, на тарифі Pro, за власним доменом, і публічні посилання на форми працюватимуть звідти.

Запитання