Как да създадете конструктор на формуляри

Конструкторът на формуляри позволява на хората да проектират собствени формуляри — да избират полета, да задават правила и да публикуват линк — и после събира изпратените отговори. Отвътре той се състои от три неща: дефиниция на формуляра, съхранена като данни, генератор, който превръща дефиницията в работещ формуляр, и хранилище за изпратените отговори с известия и експорт. Преди да създадете такъв, проверете дали наистина ви е нужен: ако ви трябва само формуляр за контакт или за кандидатстване, създайте директно този формуляр и пропуснете конструктора изцяло.

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

Конструкторът е по-голям проект от формуляра, защото всеки тип поле трябва да работи в редактора, в публичния формуляр, при валидиране, при съхранение, при известия и при експорт.

Какво трябва да има конструкторът на формуляри

Дефиниции на формуляри

Съхранявайте всеки формуляр като списък от полета, записан като структурирани данни (JSON в колона на Postgres работи добре). Едно поле може да изглежда така:

• id — стабилен идентификатор, който никога не се променя, дори етикетът да се промени
• type — текст, имейл, число, дълъг текст, избор, отметки, дата, файл
• label и помощен текст
• required, min / max, допустими типове файлове
• опции за полетата за избор
• ред и по желание условие („показвай само ако полето X е Y“)

Редакторът променя този списък; публичният формуляр го чете. Цялата идея е тази: без нов код за всеки формуляр.

Изпратени отговори

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

Страници

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

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

Версиониране. Някой ще преименува „Телефон“ на „Мобилен номер“ след 200 изпращания. Ако отговорите се съхраняват по ID на полето и всяко изпращане записва версията на формуляра, старите отговори се показват правилно. Без това данните ви тихо се объркват.

Валидирането се прави два пъти. Проверявайте полетата в браузъра за бърза обратна връзка, и отново на сървъра, защото всеки може да изпрати данни директно към вашия адрес. Важна е проверката на сървъра.

Качване на файлове. Те носят разходи за съхранение, ограничения на размера, проверка на типа и въпроси за поверителността (CV, документи за самоличност, медицински формуляри). Ограничете типовете и размерите и правете качените файлове частни по подразбиране, достъпни само за собствениците на формуляра. Вижте как да добавите качване на файлове към приложението си.

Известия. „Изпрати ми имейл, когато някой изпрати формуляр“ е очаквано. За това е нужен доставчик на имейли и API ключ; вижте как да изпращате имейли от приложението си.

Спам. Публичен формуляр ще бъде открит от ботове. Използвайте скрито поле „капан“ (скрито от хората, попълвано от ботовете), ограничения на заявките по IP, валидиране на сървъра и при нужда услуга CAPTCHA.

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

Условна логика. „Показвай това поле само ако…“ е популярна, но умножава тестването. Добавете я, след като основите са стабилни.

Първата подкана, която работи

Създай уеб приложение конструктор на формуляри за моя екип. Влезли потребители създават формуляри в редактор с жив преглед. Типове полета: кратък текст, дълъг текст, имейл, число, дата, единичен избор, отметки и качване на файл. Всяко поле има стабилен ID, етикет, помощен текст, флаг за задължителност и правила за съответния тип (мин./макс., опции, допустими типове файлове и ограничение от 10 MB). Съхранявай дефиницията на формуляра като JSON с номер на версия, който се увеличава при всяка публикация. Всеки формуляр получава публичен линк и код за iframe вграждане. Валидирай изпращанията на сървъра спрямо публикуваната версия, съхранявай отговорите по ID на полето с версията на формуляра и качените файлове в частно хранилище. Добави скрито поле „капан“ и ограничение на заявките по IP. Собствениците виждат таблица с отговори със статус (нов, прочетен, архивиран), детайлен изглед и експорт в CSV. Съхранявай всичко в база данни. Условната логика и имейл известията остави за по-късно.

Стъпки за изграждане

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

Често срещани грешки

• Съхранение на отговорите по етикет. Етикетите се променят. Използвайте стабилни ID на полетата.
• Валидиране само в браузъра. То е удобство, не защита.
• Публични качени файлове. Формулярите често събират документи, които хората не искат да се виждат.
• Без защита от спам. Публичен формуляр може да се запълни с боклук за няколко дни.
• Създаване на конструктор за един формуляр. Създайте формуляра.
• Неограничени изпращания в публичен продукт. Ако клиентите създават формуляри, задайте лимити според плана, иначе един популярен формуляр може да увеличи сметката ви за хостинг.

Кога готов продукт е по-добрият избор

Хостваните инструменти за формуляри са отлични и евтини за повечето нужди. Те вече са решили вграждането, спама, плащанията, интеграциите и достъпността за десетки типове полета. Ако екипът ви просто се нуждае от формуляри, използвайте такъв — вижте алтернативи на Typeform и алтернативи на Google Forms.

Създайте собствен, когато отговорите трябва да живеят до вашите собствени данни (захранване на CRM или клиентски портал, който управлявате), когато ви трябват работни процеси след изпращане, които инструментите не могат да направят, когато местоположението или собствеността на данните е изискване или когато формулярите са функция на продукт, който продавате.

Изграждане с Mythex

В Mythex описвате конструктора в чата и тествате редактора и публичния формуляр един до друг в живия преглед. Mythex добавя специална база данни за дефиниции на формуляри и изпращания и включва файлово хранилище автоматично, когато приложението ви има нужда от качвания (ограничено до 1 GB в безплатния план). Имейлите за известия минават през доставчик, който свързвате със собствения си ключ. Публикувайте приложението на линк към mythex.ai или на собствен домейн в Pro плана, и публичните линкове към формулярите работят оттам.

Въпроси