DEV Community

Cover image for Cómo crear formularios en Strapi v5 con strapi-plugin-form-builder-cms
Cristhian Luna
Cristhian Luna

Posted on

Cómo crear formularios en Strapi v5 con strapi-plugin-form-builder-cms

#strapi #headlesscms #plugin #forms

Un tutorial paso a paso para instalar y configurar este plugin open-source que te permite gestionar formularios dinámicos directamente desde el panel de administración.

Si alguna vez necesitaste manejar formularios de contacto, registros o cualquier tipo de captura de datos dentro de tu proyecto Strapi, sabes lo tedioso que puede ser configurarlo desde cero. strapi-plugin-form-builder-cms resuelve exactamente eso: un plugin para Strapi v5 que te da un constructor de formularios completo directo en el admin panel.

En este tutorial vamos a instalar Strapi v5 desde cero, agregar el plugin, y levantar tu primer formulario en menos de 15 minutos.

Requisitos previos: Node.js 18 o 20 LTS, npm 6+, y conocimientos básicos de terminal. El plugin funciona exclusivamente con Strapi v5.

Repositorio: github.com/devCluna/strapi-plugin-form-builder-cms

Paso 1 — Crea tu proyecto Strapi v5

Si ya tienes un proyecto Strapi v5, puedes saltar al paso 2. Si no, usa el CLI oficial:

npx create-strapi-app@latest my-project
Enter fullscreen mode Exit fullscreen mode

El asistente te hará algunas preguntas. Estas son las opciones recomendadas:

¿Usar base de datos por defecto (SQLite)?  → Yes
¿Comenzar con estructura de ejemplo?       → No
¿Usar TypeScript?                          → Yes
¿Instalar dependencias con npm?            → Yes
Enter fullscreen mode Exit fullscreen mode

Una vez completado, entra al directorio:

cd my-project
Enter fullscreen mode Exit fullscreen mode

Paso 2 — Instala el plugin desde GitHub

Ejecuta este comando en la raíz de tu proyecto Strapi:

npm install github:devCluna/strapi-plugin-form-builder-cms#production
Enter fullscreen mode Exit fullscreen mode

O con yarn:

yarn add github:devCluna/strapi-plugin-form-builder-cms#production
Enter fullscreen mode Exit fullscreen mode

Nota: Al instalar desde GitHub apuntando al branch production, siempre obtienes la versión más reciente. Para fijar una versión específica, reemplaza #production por un commit hash.

Paso 3 — Registra el plugin en la configuración

Abre o crea el archivo config/plugins.ts y agrega lo siguiente:

// config/plugins.ts

export default {
  'form-builder-cms': {
    enabled: true,
  },
};
Enter fullscreen mode Exit fullscreen mode

Si el archivo ya existe con otros plugins, simplemente añade la entrada form-builder-cms al objeto existente.

Paso 4 — Reconstruye el admin panel

Cada vez que agregas un plugin con interfaz de administración, Strapi necesita reconstruir el panel:

npm run build
Enter fullscreen mode Exit fullscreen mode

Este proceso puede tardar un par de minutos. Una vez completado, levanta el servidor:

npm run develop
Enter fullscreen mode Exit fullscreen mode

Abre tu navegador en http://localhost:1337/admin. Si es la primera vez, te pedirá crear un usuario administrador.

Paso 5 — Crea tu primer formulario

Una vez dentro del admin panel, verás una nueva entrada en el menú lateral llamada Form Builder. Desde ahí puedes:

  • Crear formularios con nombre y descripción
  • Agregar campos dinámicos (texto, email, número, fecha, select, checkbox, teléfono, etc.)
  • Configurar validaciones por campo
  • Ver las respuestas enviadas desde el frontend

Para crear un formulario nuevo, haz clic en Create new form, dale un nombre (por ejemplo: Formulario de contacto) y empieza a agregar campos con el botón Add field.

Paso 6 — Consume la API desde tu frontend

El plugin expone endpoints REST para obtener la estructura de los formularios y recibir envíos:

GET  /api/form-builder-cms/forms
GET  /api/form-builder-cms/forms/:id
POST /api/form-builder-cms/forms/:id/submit
Enter fullscreen mode Exit fullscreen mode

Un ejemplo práctico en JavaScript:

// Obtener la estructura del formulario
const res = await fetch(
  'http://localhost:1337/api/form-builder-cms/forms/1'
);
const { data } = await res.json();

// Enviar una respuesta
await fetch(
  'http://localhost:1337/api/form-builder-cms/forms/1/submit',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      data: {
        nombre: 'María García',
        email: 'maria@ejemplo.com',
        mensaje: 'Hola, me interesa su servicio.',
      }
    })
  }
);
Enter fullscreen mode Exit fullscreen mode

Permisos públicos: Por defecto Strapi protege todos los endpoints. Ve a Settings → Users & Permissions → Roles → Public y habilita los permisos de form-builder-cms que necesites exponer.

Verificación rápida

Antes de continuar, confirma que todo funciona:

  1. El menú lateral del admin muestra Form Builder
  2. Puedes crear un formulario con al menos un campo
  3. GET /api/form-builder-cms/forms retorna tu formulario (con permisos habilitados)
  4. Un POST de prueba aparece en la sección de respuestas del admin

Resolución de problemas comunes

El plugin no aparece en el menú lateral
Asegúrate de haber ejecutado npm run build después de instalar el plugin, y que la entrada en config/plugins.ts tenga exactamente el nombre form-builder-cms.

Error al instalar desde GitHub
Verifica que tienes acceso a GitHub desde tu red y que git está instalado. Si el repositorio es privado, necesitarás configurar autenticación SSH o un token personal.

El servidor no arranca tras instalar el plugin
Revisa la terminal en busca de errores de dependencias. Intenta eliminar node_modules y package-lock.json, luego ejecuta npm install nuevamente.

Y eso es todo. En pocos pasos tienes un sistema de formularios completamente funcional dentro de Strapi v5, sin tener que configurar Content Types manualmente ni construir la UI del admin desde cero.

Si el plugin te resultó útil, dale una ⭐ en GitHub al repositorio de devCluna. Las contribuciones siempre son bienvenidas.

Tags: Strapi, Strapi v5, Headless CMS, Plugin, Formularios, Node.js, Tutorial

Top comments (0)