Come creare un form builder: definizioni dei moduli, campi, invii, upload di file e spam

Un form builder permette alle persone di progettare i propri moduli — scegliere i campi, impostare le regole, pubblicare un link — e poi raccoglie le risposte. Sotto il cofano sono tre cose: una definizione del modulo salvata come dati, un renderer che trasforma la definizione in un modulo funzionante e un archivio degli invii con notifiche ed esportazione. Prima di costruirne uno, verifica che ti serva davvero: se ti servono solo un modulo di contatto o di candidatura, costruisci quel modulo direttamente e salta del tutto il builder.

Ti serve davvero un builder?

La tua situazione	Costruisci questo
Uno o due moduli che cambiano raramente	I moduli stessi. Vedi come aggiungere un modulo di contatto.
Molti moduli, creati da non sviluppatori del tuo team	Un form builder interno
I moduli fanno parte del tuo prodotto (sono i clienti a crearli)	Un form builder con account, limiti ed embed
Ti servono soprattutto risultati di sondaggi e grafici	Un’app per sondaggi

Un builder è un progetto più grande di un modulo, perché ogni tipo di campo deve funzionare nell’editor, nel modulo pubblico, nella validazione, nel salvataggio, nelle notifiche e nell’esportazione.

Di cosa ha bisogno un form builder

Definizioni dei moduli

Salva ogni modulo come elenco di campi, in dati strutturati (JSON in una colonna Postgres funziona bene). Un campo potrebbe essere così:

id — un ID stabile che non cambia mai, anche se cambia l’etichetta
tipo — testo, email, numero, testo lungo, selezione, casella di controllo, data, file
etichetta e testo di aiuto
obbligatorio, minimo / massimo, tipi di file consentiti
opzioni per i campi di selezione
ordine e, se serve, una condizione (“mostra solo se il campo X è Y”)

L’editor modifica questo elenco; il modulo pubblico lo legge. Tutto il trucco è questo: nessun nuovo codice per ogni modulo.

Invii

Invii — modulo, versione del modulo, data di invio, risposte indicizzate per ID del campo, stato (nuovo, letto, archiviato).
File — i file caricati appartengono allo storage dei file, con l’invio che contiene solo un riferimento, mai dentro la riga del database.

Pagine

Elenco dei moduli con il numero di invii.
Editor — aggiungi, riordina e configura i campi, con un’anteprima in tempo reale accanto.
Impostazioni — messaggio o reindirizzamento di conferma, email di notifica, date di apertura e chiusura, limite di invii.
Modulo pubblico al proprio link, e una versione incorporabile per altri siti web.
Tabella degli invii con ricerca, stato, vista di dettaglio ed esportazione CSV.

Decisioni e compromessi

Versionamento. Qualcuno rinominerà “Telefono” in “Numero di cellulare” dopo 200 invii. Se le risposte sono salvate per ID del campo e ogni invio registra la versione del modulo, gli invii vecchi si mostrano ancora correttamente. Senza questo, i dati si scombinano in silenzio.

La validazione avviene due volte. Controlla i campi nel browser per un feedback rapido, e di nuovo sul server, perché chiunque può inviare dati direttamente al tuo endpoint. Conta solo il controllo lato server.

Upload di file. Portano costi di storage, limiti di dimensione, controlli sul tipo di file e questioni di privacy (CV, documenti d’identità, moduli medici). Limita tipi e dimensioni e rendi i file caricati privati di default, leggibili solo dai proprietari del modulo. Vedi come aggiungere upload di file alla tua app.

Notifiche. “Mandami una email quando qualcuno invia” è una funzione attesa. Richiede un provider di email e una chiave API; vedi come inviare email dalla tua app.

Spam. Un modulo pubblico verrà trovato dai bot. Usa un campo honeypot (nascosto alle persone, compilato dai bot), limiti di richieste per IP, validazione lato server e, se serve, un servizio CAPTCHA.

Embed. L’embed tramite iframe è il modo più semplice e sicuro per mettere un modulo sul sito di qualcun altro. L’embed tramite script sembra più integrato, ma è più difficile da costruire e da proteggere.

Logica condizionale. “Mostra questo campo solo se…” è molto richiesta e moltiplica i test. Aggiungila quando le basi sono solide.

Un primo prompt che funziona

Crea un’app form builder per il mio team. Gli utenti loggati creano moduli in un editor con anteprima in tempo reale. Tipi di campo: testo breve, testo lungo, email, numero, data, selezione singola, caselle di controllo e upload di file. Ogni campo ha un ID stabile, un’etichetta, un testo di aiuto, un flag di obbligatorietà e regole specifiche per tipo (minimo/massimo, opzioni, tipi di file consentiti e un limite di 10 MB). Salva la definizione del modulo come JSON con un numero di versione che aumenta a ogni pubblicazione. Ogni modulo ha un link pubblico e un codice di embed con iframe. Valida gli invii sul server rispetto alla versione pubblicata, salva le risposte indicizzate per ID del campo con la versione del modulo e metti i file caricati in uno storage privato. Aggiungi un campo honeypot nascosto e un limite di richieste per IP. I proprietari dei moduli vedono una tabella degli invii con stato (nuovo, letto, archiviato), una vista di dettaglio ed esportazione CSV. Salva tutto in un database. Per ora lascia la logica condizionale e le notifiche email.

Passaggi di costruzione

Editor e definizione. Costruisci un modulo con tutti i tipi di campo e controlla con l’agente il JSON salvato. È pulito e stabile?
Modulo pubblico. Compilalo da telefono. Controlla i messaggi di validazione e la schermata di conferma.
Validazione lato server. Chiedi all’agente di inviare direttamente al server un invio che viola le regole, saltando la pagina. Deve essere rifiutato.
Versionamento. Rinomina e riordina i campi dopo qualche invio. I vecchi invii devono mostrare ancora le risposte giuste.
Upload. Prova un file troppo grande e uno del tipo sbagliato. Verifica che un estraneo non possa aprire un file caricato indovinandone il link.
Tabella degli invii ed esportazione. Controlla l’esportazione CSV con virgole, a capo e caratteri accentati nelle risposte.
Notifiche, embed, logica. Aggiungili uno alla volta.

Errori comuni

Salvare le risposte per etichetta. Le etichette cambiano. Usa ID dei campi stabili.
Validazione solo nel browser. È una comodità, non una protezione.
File caricati pubblici. I moduli spesso raccolgono documenti che le persone non vorrebbero vedere esposti.
Nessuna protezione dallo spam. Un modulo pubblico può riempirsi di spazzatura in pochi giorni.
Costruire un builder per un solo modulo. Costruisci il modulo.
Invii illimitati su un prodotto pubblico. Se i clienti creano moduli, imposta limiti per piano, altrimenti un modulo popolare può far salire la bolletta dell’hosting.

Quando un prodotto già pronto è la scelta migliore

Gli strumenti per moduli ospitati sono ottimi ed economici per la maggior parte delle esigenze. Hanno già risolto embed, spam, pagamenti, integrazioni e accessibilità per decine di tipi di campo. Se il tuo team ha bisogno solo di moduli, usane uno — vedi alternative a Typeform e alternative a Google Forms.

Costruisci il tuo quando gli invii devono stare accanto ai tuoi dati (alimentare un CRM o un portale clienti che gestisci tu), quando dopo l’invio servono flussi di lavoro che gli strumenti non sanno fare, quando la posizione o la proprietà dei dati sono un requisito o quando i moduli sono una funzione di un prodotto che vendi.

Costruirlo con Mythex

Su Mythex descrivi il builder in chat e provi l’editor e il modulo pubblico affiancati nell’anteprima dal vivo. Mythex aggiunge un database dedicato alle definizioni dei moduli e agli invii, e attiva automaticamente lo storage dei file quando la tua app ha bisogno di upload (limitato a 1 GB nel piano Free). Le email di notifica passano da un provider che colleghi con la tua chiave. Pubblica l’app su un link mythex.ai, oppure sul tuo dominio con il piano Pro, e i link dei moduli pubblici funzionano da lì.

Domande

Come memorizza i moduli un form builder?

Di solito come definizione del modulo: un elenco di campi, ognuno con tipo, etichetta, regole di validazione e ordine, salvato come dati strutturati, ad esempio JSON. La stessa definizione guida sia l’editor sia il modulo pubblico, quindi aggiungere un campo non richiede nuovo codice.

Come devo salvare gli invii dei moduli?

Salva ogni invio con un riferimento alla versione del modulo a cui si riferisce e con le risposte indicizzate per ID del campo. Così rinominare o riordinare un campo in seguito non rompe gli invii precedenti.

Come blocco lo spam su un modulo pubblico?

Combina un campo honeypot nascosto, un limite di richieste per indirizzo IP, la validazione lato server e, se lo spam persiste, un servizio CAPTCHA. Non affidarti mai a controlli che girano solo nel browser.

Mi serve un form builder completo o basta un modulo?

Se ti servono uno o due moduli fissi, costruisci direttamente quei moduli: è molto più semplice. Un form builder vale la pena quando persone non tecniche devono creare e modificare molti moduli senza chiedere a uno sviluppatore.