Com crear un constructor de formularis

Un constructor de formularis permet a la gent dissenyar els seus propis formularis —triar camps, establir regles, publicar un enllaç— i després recull les respostes. Per dins són tres coses: una definició del formulari desada com a dades, un renderitzador que converteix la definició en un formulari que funciona, i un magatzem d'enviaments amb notificacions i exportació. Abans de construir-ne un, comprova que realment el necessites: si només vols un formulari de contacte o de sol·licitud, construeix aquest formulari directament i descarta el constructor.

Realment necessites un constructor?

Un constructor és un projecte més gran que un formulari, perquè cada tipus de camp ha de funcionar a l'editor, al formulari públic, a la validació, a l'emmagatzematge, a les notificacions i a l'exportació.

Què necessita un constructor de formularis

Definicions de formularis

Desa cada formulari com una llista de camps en dades estructurades (JSON en una columna de Postgres funciona bé). Un camp podria ser així:

• id: un ID estable que no canvia mai, encara que canviï l'etiqueta
• type: text, correu, número, text llarg, selecció, casella de verificació, data, fitxer
• label i text d'ajuda
• obligatori, mín. / màx., tipus de fitxer permesos
• opcions per als camps de selecció
• ordre i, opcionalment, una condició («mostra només si el camp X és Y»)

L'editor edita aquesta llista; el formulari públic la llegeix. Aquest és tot el truc: cap codi nou per a cada formulari.

Enviaments

• Enviaments: formulari, versió del formulari, hora d'enviament, respostes indexades per l'ID del camp, estat (nou, llegit, arxivat).
• Fitxers: els fitxers pujats pertanyen a l'emmagatzematge de fitxers, amb l'enviament guardant-ne una referència; mai dins de la fila de la base de dades.

Pàgines

• Llista de formularis amb el nombre d'enviaments.
• Editor: afegir, reordenar i configurar camps, amb una vista prèvia en directe al costat.
• Configuració: missatge de confirmació o redirecció, correus de notificació, dates d'obertura i tancament, límit d'enviaments.
• Formulari públic al seu propi enllaç i una versió incrustable per a altres llocs web.
• Taula d'enviaments amb cerca, estat, vista de detall i exportació a CSV.

Decisions i compromisos

Versionat. Algú canviarà «Telèfon» per «Número de mòbil» després de 200 enviaments. Si les respostes es guarden per ID de camp i cada enviament registra la versió del formulari, els enviaments antics es continuen mostrant bé. Sense això, les dades es desordenen silenciosament.

La validació es fa dues vegades. Comprova els camps al navegador per donar una resposta ràpida, i un cop més al servidor, perquè qualsevol pot enviar dades directament al teu punt final. La comprovació del servidor és la que compta.

Pujada de fitxers. Porten costos d'emmagatzematge, límits de mida, comprovacions del tipus de fitxer i preguntes de privadesa (currículums, documents d'identitat, formularis mèdics). Limita els tipus i les mides, i fes que els fitxers pujats siguin privats per defecte, només llegibles pels propietaris del formulari. Consulta com afegir pujada de fitxers a la teva aplicació.

Notificacions. «Envia'm un correu quan algú enviï el formulari» és una expectativa habitual. Necessita un proveïdor de correu i una clau d'API; consulta com enviar correus des de la teva aplicació.

Spam. Un formulari públic serà trobat per bots. Fes servir un camp de trampa (ocult per a les persones, omplert pels bots), límits de peticions per IP, validació al servidor i, si cal, un servei de CAPTCHA.

Incrustació. Una incrustació amb iframe és la manera més simple i segura de posar un formulari en un altre lloc web. Una incrustació amb script sembla més pròpia però és més difícil de construir i d'assegurar.

Lògica condicional. «Mostra aquest camp només si…» és molt popular i multiplica les proves. Afegeix-la quan les bases estiguin sòlides.

Un primer prompt que funciona

Construeix una aplicació web de constructor de formularis per al meu equip. Els usuaris registrats creen formularis en un editor amb vista prèvia en directe. Tipus de camp: text curt, text llarg, correu, número, data, selecció única, caselles de verificació i pujada de fitxers. Cada camp té un ID estable, una etiqueta, un text d'ajuda, una marca d'obligatori i regles específiques del tipus (mín./màx., opcions, tipus de fitxer permesos i un límit de 10 MB). Desa la definició del formulari com a JSON amb un número de versió que augmenta a cada publicació. Cada formulari té un enllaç públic i un codi d'incrustació amb iframe. Valida els enviaments al servidor segons la versió publicada, desa les respostes indexades per ID de camp amb la versió del formulari, i posa els fitxers pujats en un emmagatzematge privat. Afegeix un camp de trampa ocult i un límit de peticions per IP. Els propietaris del formulari veuen una taula d'enviaments amb estat (nou, llegit, arxivat), una vista de detall i exportació a CSV. Desa-ho tot en una base de dades. Deixa la lògica condicional i les notificacions per correu per més endavant.

Passos de construcció

1. Editor i definició. Construeix un formulari amb tots els tipus de camp i mira el JSON desat amb l'agent. És net i estable?
2. Formulari públic. Omple'l en un telèfon. Comprova els missatges de validació i la pantalla de confirmació.
3. Validació al servidor. Demana a l'agent que enviï directament al servidor, saltant-se la pàgina, un enviament que incompleixi les regles. Hauria de ser rebutjat.
4. Versionat. Canvia el nom i l'ordre dels camps després d'uns quants enviaments. Els enviaments antics haurien de seguir mostrant les respostes correctes.
5. Pujades. Prova un fitxer massa gran i un de tipus incorrecte. Confirma que un desconegut no pot obrir un fitxer pujat endevinant-ne l'enllaç.
6. Taula d'enviaments i exportació. Comprova l'exportació a CSV amb comes, salts de línia i caràcters accentuats a les respostes.
7. Notificacions, incrustacions, lògica. Afegeix-les d'una en una.

Errors habituals

• Desar les respostes per etiqueta. Les etiquetes canvien. Fes servir IDs de camp estables.
• Validació només al navegador. És una comoditat, no una protecció.
• Fitxers pujats públics. Els formularis sovint recullen documents que la gent no voldria que es veiessin.
• Sense protecció contra spam. Un formulari públic pot omplir-se de brossa en pocs dies.
• Construir un constructor per a un sol formulari. Construeix el formulari.
• Enviaments il·limitats en un producte públic. Si els clients creen formularis, fixa límits per pla, o un formulari popular pot disparar la factura del hosting.

Quan és millor un producte fet

Les eines de formularis allotjades són excel·lents i barates per a la majoria de necessitats. Ja han resolt la incrustació, el spam, els pagaments, les integracions i l'accessibilitat en dotzenes de tipus de camp. Si el teu equip només necessita formularis, fes servir una d'aquestes eines; consulta alternatives a Typeform i alternatives a Google Forms.

Construeix-ne un teu quan els enviaments hagin de viure al costat de les teves pròpies dades (alimentar un CRM o un portal de clients que gestiones tu), quan necessitis fluxos de treball després de l'enviament que les eines no poden fer, quan la ubicació o la propietat de les dades siguin un requisit, o quan els formularis siguin una funcionalitat d'un producte que vens.

Construir-lo amb Mythex

A Mythex descrius el constructor al xat i proves l'editor i el formulari públic un al costat de l'altre a la vista prèvia en directe. Mythex afegeix una base de dades dedicada per a les definicions de formularis i els enviaments, i activa automàticament l'emmagatzematge de fitxers quan l'aplicació necessita pujades (limitat a 1 GB en el pla Free). Els correus de notificació passen per un proveïdor que connectes amb la teva pròpia clau. Publica l'aplicació en un enllaç de mythex.ai, o en el teu propi domini al pla Pro, i els enllaços dels formularis públics funcionaran des d'allà.

Preguntes