Cum să construiești un constructor de formulare

Un constructor de formulare le permite oamenilor să-și proiecteze propriile formulare — aleg câmpuri, setează reguli, publică un link — și apoi colectează răspunsurile. În spate, are trei componente: o definiție a formularului stocată ca date, un generator care transformă definiția într-un formular funcțional și un depozit de răspunsuri cu notificări și export. Înainte să construiești unul, verifică dacă ai nevoie cu adevărat de el: dacă ai nevoie doar de un formular de contact sau de cerere, construiește direct acel formular și sari peste constructor.

Ai nevoie de un constructor?

Un constructor este un proiect mai mare decât un formular, pentru că fiecare tip de câmp trebuie să funcționeze în editor, în formularul public, la validare, la stocare, în notificări și la export.

Ce are nevoie un constructor de formulare

Definiții de formulare

Stochează fiecare formular ca o listă de câmpuri, salvată ca date structurate (JSON într-o coloană Postgres funcționează bine). Un câmp poate arăta astfel:

• id — un ID stabil, care nu se schimbă niciodată, chiar dacă eticheta se schimbă
• tip — text, e-mail, număr, text lung, selecție, bifă, dată, fișier
• etichetă și text de ajutor
• obligatoriu, minim / maxim, tipuri de fișiere permise
• opțiuni pentru câmpurile de selecție
• ordine și, opțional, o condiție („afișează doar dacă câmpul X este Y”)

Editorul modifică această listă; formularul public o citește. Acesta este tot trucul: fără cod nou pentru fiecare formular.

Răspunsuri

• Răspunsuri — formular, versiune a formularului, ora trimiterii, răspunsuri indexate după ID-ul câmpului, stare (nou, citit, arhivat).
• Fișiere — fișierele încărcate aparțin spațiului de stocare pentru fișiere, iar răspunsul conține doar o referință, niciodată fișierul în sine în rândul bazei de date.

Pagini

• Lista formularelor cu numărul de răspunsuri.
• Editor — adaugă, reordonează și configurează câmpuri, cu o previzualizare live alături.
• Setări — mesaj de confirmare sau redirecționare, e-mailuri de notificare, date de deschidere și închidere, limită de răspunsuri.
• Formular public la propriul link și o versiune care poate fi încorporată pe alte site-uri.
• Tabelul răspunsurilor cu căutare, stare, vedere detaliată și export CSV.

Decizii și compromisuri

Versionare. Cineva va redenumi „Telefon” în „Număr mobil” după 200 de răspunsuri. Dacă răspunsurile sunt stocate după ID-ul câmpului și fiecare răspuns înregistrează versiunea formularului, răspunsurile vechi se afișează în continuare corect. Fără asta, datele tale se amestecă discret.

Validarea rulează de două ori. Verifică câmpurile în browser pentru un feedback rapid și din nou pe server, pentru că oricine poate trimite date direct către endpoint-ul tău. Verificarea de pe server este cea care contează.

Încărcări de fișiere. Aduc costuri de stocare, limite de dimensiune, verificări ale tipului de fișier și întrebări de confidențialitate (CV-uri, acte de identitate, formulare medicale). Limitează tipurile și dimensiunile și fă fișierele încărcate private implicit, vizibile doar proprietarilor formularului. Vezi cum adaugi încărcări de fișiere în aplicația ta.

Notificări. „Trimite-mi un e-mail când cineva trimite un formular” este așteptat. Are nevoie de un furnizor de e-mail și de o cheie API; vezi cum trimiți e-mailuri din aplicația ta.

Spam. Un formular public va fi găsit de boți. Folosește un câmp honeypot (ascuns pentru oameni, completat de boți), limite de cereri pe IP, validare pe server și, dacă este nevoie, un serviciu CAPTCHA.

Încorporare. Încorporarea prin iframe este cea mai simplă și mai sigură cale de a pune un formular pe alt site. Încorporarea prin script pare mai nativă, dar este mai greu de construit și de securizat.

Logică condițională. „Afișează acest câmp doar dacă…” este populară și înmulțește testele. Adaug-o după ce elementele de bază sunt solide.

Un prim prompt care funcționează

Construiește o aplicație web de constructor de formulare pentru echipa mea. Utilizatorii autentificați creează formulare într-un editor cu previzualizare live. Tipuri de câmpuri: text scurt, text lung, e-mail, număr, dată, selecție unică, bife și încărcare de fișier. Fiecare câmp are un ID stabil, o etichetă, un text de ajutor, un indicator de obligativitate și reguli specifice tipului (minim/maxim, opțiuni, tipuri de fișiere permise și o limită de 10 MB). Stochează definiția formularului ca JSON cu un număr de versiune care crește la fiecare publicare. Fiecare formular primește un link public și un cod de încorporare iframe. Validează răspunsurile pe server în raport cu versiunea publicată, stochează răspunsurile indexate după ID-ul câmpului împreună cu versiunea formularului și pune fișierele încărcate în stocare privată. Adaugă un câmp ascuns de tip honeypot și o limită de cereri pe IP. Proprietarii formularelor văd un tabel al răspunsurilor cu stare (nou, citit, arhivat), o vedere detaliată și export CSV. Salvează totul într-o bază de date. Lasă logica condițională și notificările prin e-mail pentru mai târziu.

Pași de construcție

1. Editor și definiție. Construiește un formular cu fiecare tip de câmp și uită-te la JSON-ul salvat împreună cu agentul. Este curat și stabil?
2. Formularul public. Completează-l pe telefon. Verifică mesajele de validare și ecranul de confirmare.
3. Validare pe server. Cere agentului să trimită direct către server un răspuns care încalcă regulile, ocolind pagina. Trebuie respins.
4. Versionare. Redenumește și reordonează câmpurile după câteva răspunsuri. Răspunsurile vechi ar trebui să afișeze în continuare valorile corecte.
5. Încărcări. Încearcă un fișier prea mare și unul de tip greșit. Confirmă că un străin nu poate deschide un fișier încărcat ghicind linkul.
6. Tabelul răspunsurilor și exportul. Verifică exportul CSV cu virgule, linii noi și caractere cu diacritice în răspunsuri.
7. Notificări, încorporări, logică. Adaugă-le pe rând, nu pe toate deodată.

Greșeli frecvente

• Stocarea răspunsurilor după etichetă. Etichetele se schimbă. Folosește ID-uri stabile ale câmpurilor.
• Validare doar în browser. Este o comoditate, nu o protecție.
• Fișiere încărcate publice. Formularele colectează adesea documente pe care oamenii nu le-ar vrea expuse.
• Lipsa protecției antispam. Un formular public se poate umple cu gunoi în câteva zile.
• Construirea unui constructor pentru un singur formular. Construiește formularul.
• Răspunsuri nelimitate pe un produs public. Dacă clienții creează formulare, stabilește limite pe plan, altfel un formular popular îți poate umfla factura de găzduire.

Când un produs gata făcut este alegerea mai bună

Instrumentele de formulare găzduite sunt excelente și ieftine pentru majoritatea nevoilor. Au rezolvat deja încorporarea, spamul, plățile, integrările și accesibilitatea pentru zeci de tipuri de câmpuri. Dacă echipa ta are nevoie doar de formulare, folosește unul — vezi alternativele Typeform și alternativele Google Forms.

Construiește-l pe al tău atunci când răspunsurile trebuie să trăiască lângă propriile tale date (alimentezi un CRM sau un portal de clienți pe care îl administrezi), când ai nevoie de fluxuri de lucru după trimitere pe care instrumentele nu le pot face, când locația sau proprietatea datelor este o cerință sau când formularele sunt o funcționalitate a unui produs pe care îl vinzi.

Construit cu Mythex

În Mythex descrii constructorul în chat și testezi editorul și formularul public unul lângă altul, în previzualizarea live. Mythex adaugă o bază de date dedicată pentru definițiile formularelor și pentru răspunsuri și activează automat stocarea de fișiere când aplicația ta are nevoie de încărcări (limitată la 1 GB în planul Free). E-mailurile de notificare trec printr-un furnizor pe care îl conectezi cu propria cheie. Publică aplicația la un link mythex.ai sau, pe Pro, la propriul domeniu, iar linkurile publice ale formularelor funcționează de acolo.

Întrebări