Portada › 6. Formularios

6. Formularios

Introducción

Los formularios recogen datos del público: contacto, inscripciones, peticiones de información, sugerencias, etc. En este panel, los formularios se crean como componentes de tipo form (ver sección 4) y se gestionan desde la pantalla /cta.

Una vez creado el componente y añadido a una página, las respuestas enviadas por los visitantes se almacenan en el panel y se pueden consultar, filtrar y exportar.

Acceso rápido

• URL principal: /cta — listado de formularios tipo CTA y sus envíos.
• Menú lateral: módulos Comunicación o Sitio Web → entrada Formularios / CTA.
• Crear: /components/create con type = form (ver 6.1).

Pantalla principal (listado)

Cuando sí hay formularios definidos, esta misma pantalla muestra una tabla con, para cada componente form:

• Nombre del formulario: etiqueta del componente que actúa como formulario.
• Total de envíos: contador de respuestas recibidas.
• Último envío: fecha del envío más reciente.
• Acciones: ver envíos, exportar CSV, editar el componente.

Tareas habituales

6.1 Crear un componente tipo form desde /components/create

1. Ve a /components/create (ver sección 4.1).
2. Define el nombre interno, la etiqueta y, en el selector de tipo, elige form (recordatorio: el selector es un <select> HTML nativo, ver sección 4.2).
3. Añade los campos editables que tendrá el formulario: nombre, email, mensaje, teléfono, etc. (ver sección 4.3). Los field_type habituales para formularios son text, textarea, email, number y boolean (casilla de aceptación).
4. Escribe el template HTML con el marcado del formulario: <form>, <label>, <input> con marcadores [FIELD_NOMBRE] y un botón de enviar.
5. Guarda el componente.
6. Ve a la página donde quieras mostrarlo y, en el Builder, añade el nuevo componente (ver sección 3.2).

6.2 Consultar los envíos

Una vez creado el componente y recibida la primera respuesta, los envíos se consultan en:

• /cta — vista general: lista de todos los componentes form con su número de envíos y la fecha del último.
• /components/{id}/submissions — vista detallada: tabla con todas las respuestas recibidas por ese formulario concreto, una fila por envío, con sus campos en columnas.

1. Entra en /cta.
2. Pulsa sobre el formulario del que quieres ver los envíos.
3. Se abrirá la tabla de envíos. Usa los filtros superiores (rango de fechas, idioma) para acotar la búsqueda.

6.3 Exportar respuestas a CSV

Para trabajar con los datos fuera del panel (Excel, Google Sheets, CRM, etc.) puedes exportarlos a CSV:

1. Ve a /components/{id}/submissions (vista detallada del formulario).
2. Aplica los filtros que quieras mantener en la exportación (fechas, idioma).
3. Pulsa el botón Exportar CSV (esquina superior derecha de la tabla). El navegador descargará un archivo con extensión .csv que se puede abrir directamente en cualquier hoja de cálculo.

Referencia técnica (webmasters)

Dónde se guardan las respuestas

Los envíos se almacenan en la tabla form_submissions (o nombre equivalente según la versión del CMS). Cada fila contiene:

• id: identificador único del envío.
• component_id: FK al componente form que recibió el envío.
• page_id: FK a la página desde la que se envió (puede ser null si el formulario está en una zona global).
• language: idioma en el que se rellenó.
• payload: JSON con los valores campo a campo.
• created_at: fecha y hora del envío.
• ip / user_agent: metadatos técnicos (útiles para filtrar spam).

Endpoint público de envío

El formulario del frontend envía los datos a un endpoint dedicado. La forma típica es:

POST /api/forms/{component_slug}/submit
Content-Type: application/json

{
  "FIELD_NOMBRE": "valor",
  "FIELD_EMAIL": "user@example.com",
  "lang": "es"
}

El endpoint valida los campos según la definición del componente y, si todo es correcto, inserta la fila en form_submissions y (opcionalmente) envía un email de notificación a las direcciones configuradas en /variables.

Validación de campos

La validación se hace en dos capas:

1. Cliente (navegador): validación HTML5 nativa (type="email", required, minlength, pattern).
2. Servidor (endpoint): validación de tipos y obligatoriedad según el field_type del componente. Si un campo obligatorio llega vacío, el endpoint devuelve 400 con el detalle.

Si un envío falla con 400, el registro no se guarda en form_submissions.

Rutas internas relevantes

• GET /cta — listado general de formularios y contadores.
• GET /components/{id}/submissions — envíos detallados de un formulario.
• GET /components/{id}/submissions/export.csv — exportación CSV.
• POST /api/forms/{slug}/submit — endpoint público de envío.
• DELETE /components/{id}/submissions/{sid} — eliminar un envío individual (acción de admin, auditable).

Errores frecuentes

• La pantalla /cta aparece vacía: comportamiento esperado en este despliegue, ya que no hay componentes form creados. Para empezar a usar la funcionalidad, crea primero un componente de tipo form desde /components/create (ver 6.1).
• La URL /forms da 404: este panel no expone esa ruta. La URL correcta es /cta. Actualiza el bookmark o el enlace guardado.
• No llegan emails de notificación: revisa las direcciones configuradas en /variables (claves tipo notification_email o similar) y comprueba que el servidor puede enviar correo (SMTP configurado y operativo). Revisa también la carpeta de spam del destinatario.
• El formulario no se ve en el sitio web: asegúrate de que (1) el componente está creado, (2) está añadido a la página correspondiente desde el Builder, (3) la página está en estado publicada, y (4) la caché de la página está actualizada.
• Las respuestas llegan vacías: el template del componente no está usando los name="..." correctos en los inputs, o el JavaScript del frontend no serializa el formulario antes de enviarlo. Revisa la consola del navegador para detectar errores JS.
• No puedo exportar a CSV: el botón solo aparece en la vista detallada (/components/{id}/submissions), no en la general (/cta). Si aun así no aparece, asegúrate de que el componente tiene al menos un envío registrado.