Cómo crear un generador de formularios
Un generador de formularios permite a las personas diseñar sus propios formularios —elegir campos, definir reglas, publicar un enlace— y luego recoge las respuestas. Por dentro son tres cosas: una definición del formulario guardada como datos, un renderizador que convierte esa definición en un formulario funcional, y un almacén de envíos con notificaciones y exportación. Antes de construir uno, comprueba que realmente lo necesitas: si solo necesitas un formulario de contacto o de solicitud, crea ese formulario directamente y olvídate del generador.
¿Necesitas realmente un generador?
| Tu situación | Crea esto |
|---|---|
| Uno o dos formularios que casi nunca cambian | Los formularios en sí. Consulta cómo añadir un formulario de contacto. |
| Muchos formularios creados por personas no desarrolladoras de tu equipo | Un generador de formularios interno |
| Los formularios son parte de tu producto (los clientes los crean) | Un generador con cuentas, límites e incrustación |
| Lo que quieres son resultados de encuestas y gráficos | Una app de encuestas |
Un generador es un proyecto mucho más grande que un formulario, porque cada tipo de campo tiene que funcionar en el editor, en el formulario público, en la validación, en el almacenamiento, en las notificaciones y en la exportación.
Lo que necesita un generador de formularios
Definiciones de formularios
Guarda cada formulario como una lista de campos, en datos estructurados (una columna JSON en Postgres funciona bien). Un campo podría tener esta forma:
- id: un identificador estable que nunca cambia, aunque cambie la etiqueta
- type: texto, email, número, texto largo, selección, casilla, fecha, archivo
- label y texto de ayuda
- required, mín / máx, tipos de archivo permitidos
- options para los campos de selección
- order y, opcionalmente, una condición («mostrar solo si el campo X es Y»)
El editor edita esta lista; el formulario público la lee. Ese es todo el truco: no hace falta código nuevo para cada formulario.
Envíos
- Envíos: formulario, versión del formulario, fecha de envío, respuestas indexadas por ID de campo, estado (nuevo, leído, archivado).
- Archivos: los archivos subidos van en el almacenamiento de archivos, y el envío guarda solo una referencia, nunca dentro de la fila de la base de datos.
Páginas
- Lista de formularios con el número de envíos.
- Editor: añadir, reordenar y configurar campos, con una vista previa en directo al lado.
- Ajustes: mensaje de confirmación o redirección, correos de notificación, fechas de apertura y cierre, límite de envíos.
- Formulario público en su propio enlace, y una versión incrustable para otras webs.
- Tabla de envíos con búsqueda, estado, vista de detalle y exportación a CSV.
Decisiones y compromisos
Versionado. Alguien acabará cambiando «Teléfono» por «Número de móvil» después de 200 envíos. Si las respuestas se guardan por ID de campo y cada envío registra la versión del formulario, los envíos antiguos siguen mostrándose bien. Sin eso, tus datos se desordenan en silencio.
La validación se hace dos veces. Comprueba los campos en el navegador para dar una respuesta rápida, y otra vez en el servidor, porque cualquiera puede enviar datos directamente a tu endpoint. La comprobación del servidor es la que cuenta.
Subida de archivos. Trae costes de almacenamiento, límites de tamaño, comprobaciones de tipo y cuestiones de privacidad (CV, documentos de identidad, formularios médicos). Limita los tipos y tamaños, y haz que los archivos subidos sean privados por defecto, legibles solo por los propietarios del formulario. Consulta cómo añadir subida de archivos a tu app.
Notificaciones. «Envíame un correo cuando alguien envíe el formulario» es lo esperado. Necesita un proveedor de correo y una clave de API; consulta cómo enviar correos desde tu app.
Spam. Un formulario público será encontrado por bots. Usa un campo trampa (honeypot, oculto para las personas y rellenado por los bots), límites de peticiones por IP, validación en el servidor y, si hace falta, un servicio de CAPTCHA.
Incrustación. Un embed con iframe es la forma más sencilla y segura de poner un formulario en la web de otra persona. Un embed con script se ve más nativo, pero es más difícil de construir y de asegurar.
Lógica condicional. «Mostrar este campo solo si…» es muy popular y multiplica las pruebas. Añádela cuando lo básico esté sólido.
Un primer prompt que funciona
Crea una app web generadora de formularios para mi equipo. Los usuarios con sesión iniciada crean formularios en un editor con vista previa en directo. Tipos de campo: texto corto, texto largo, email, número, fecha, selección única, casillas y subida de archivos. Cada campo tiene un ID estable, una etiqueta, un texto de ayuda, un indicador de obligatorio y reglas específicas del tipo (mín/máx, opciones, tipos de archivo permitidos y un límite de 10 MB). Guarda la definición del formulario como JSON con un número de versión que aumenta en cada publicación. Cada formulario tiene un enlace público y un código de embed con iframe. Valida los envíos en el servidor según la versión publicada, guarda las respuestas indexadas por ID de campo junto con la versión del formulario y pon los archivos subidos en un almacenamiento privado. Añade un campo oculto trampa y un límite de peticiones por IP. Los propietarios ven una tabla de envíos con estado (nuevo, leído, archivado), una vista de detalle y exportación a CSV. Guárdalo todo en una base de datos. Deja la lógica condicional y las notificaciones por correo para más adelante.
Pasos de construcción
- Editor y definición. Crea un formulario con todos los tipos de campo y revisa con el agente el JSON guardado. ¿Es limpio y estable?
- Formulario público. Rellénalo desde un móvil. Revisa los mensajes de validación y la pantalla de confirmación.
- Validación en el servidor. Pide al agente que envíe directamente al servidor un envío que incumpla las reglas, saltándose la página. Debería rechazarse.
- Versionado. Renombra y reordena campos después de algunos envíos. Los envíos antiguos deberían mostrar las respuestas correctas.
- Subidas. Prueba un archivo demasiado grande y otro de un tipo incorrecto. Confirma que un desconocido no puede abrir un archivo subido adivinando su enlace.
- Tabla de envíos y exportación. Comprueba la exportación a CSV con comas, saltos de línea y caracteres acentuados en las respuestas.
- Notificaciones, embeds, lógica. Añádelos uno a uno.
Errores comunes
- Guardar las respuestas por etiqueta. Las etiquetas cambian. Usa IDs de campo estables.
- Validación solo en el navegador. Es una comodidad, no una protección.
- Archivos subidos públicos. Los formularios suelen recoger documentos que la gente no querría que se vieran.
- Sin protección contra spam. Un formulario público puede llenarse de basura en cuestión de días.
- Construir un generador para un solo formulario. Construye el formulario.
- Envíos ilimitados en un producto público. Si los clientes crean formularios, establece límites por plan, o un formulario popular puede disparar la factura de tu hosting.
Cuándo es mejor un producto ya hecho
Las herramientas de formularios alojadas son excelentes y baratas para la mayoría de necesidades. Ya han resuelto la incrustación, el spam, los pagos, las integraciones y la accesibilidad en decenas de tipos de campo. Si tu equipo solo necesita formularios, usa una: consulta alternativas a Typeform y alternativas a Google Forms.
Crea el tuyo cuando los envíos deban vivir junto a tus propios datos (alimentar un CRM o un portal de clientes que gestionas tú), cuando necesites flujos de trabajo después del envío que las herramientas no hacen, cuando la ubicación o la propiedad de los datos sea un requisito, o cuando los formularios sean una función de un producto que vendes.
Crearlo con Mythex
En Mythex describes el generador en el chat y pruebas el editor y el formulario público uno al lado del otro en la vista previa en directo. Mythex añade una base de datos dedicada para las definiciones de formularios y los envíos, y activa el almacenamiento de archivos automáticamente cuando tu app necesita subidas (limitado a 1 GB en el plan Free). Los correos de notificación pasan por un proveedor que conectas con tu propia clave. Publica la app en un enlace de mythex.ai, o en tu propio dominio con el plan Pro, y los enlaces de los formularios públicos funcionarán desde ahí.
Preguntas
¿Cómo guarda un generador de formularios los formularios?
Normalmente como una definición del formulario: una lista de campos, cada uno con un tipo, una etiqueta, reglas de validación y un orden, guardada como datos estructurados, por ejemplo en JSON. La misma definición alimenta tanto el editor como el formulario público, así que añadir un campo no requiere código nuevo.
¿Cómo deben guardarse los envíos de un formulario?
Guarda cada envío con una referencia a la versión del formulario con la que se hizo y las respuestas indexadas por el ID de cada campo. Así, renombrar o reordenar un campo más adelante no rompe los envíos antiguos.
¿Cómo evito el spam en un formulario público?
Combina un campo oculto trampa (honeypot), la limitación de peticiones por dirección IP, la validación en el servidor y, si el spam persiste, un servicio de CAPTCHA. Nunca confíes solo en comprobaciones que se ejecutan en el navegador.
¿Necesito un generador completo o solo un formulario?
Si necesitas uno o dos formularios fijos, crea esos formularios directamente: es mucho más sencillo. Un generador compensa cuando personas no técnicas necesitan crear y cambiar muchos formularios sin pedírselo a un desarrollador.