DEV Community: Cristhian Luna

How to Build Forms in Strapi v5 with strapi-plugin-form-builder-cms

Cristhian Luna — Sat, 04 Apr 2026 14:30:12 +0000

A step-by-step tutorial to install and configure this open-source plugin that lets you manage dynamic forms directly from the Strapi admin panel.

If you've ever needed to handle contact forms, registrations, or any kind of data capture inside your Strapi project, you know how tedious it can be to set up from scratch. strapi-plugin-form-builder-cms solves exactly that: a plugin for Strapi v5 that gives you a full form builder right inside the admin panel.

In this tutorial we'll install Strapi v5 from scratch, add the plugin, and have your first form running in under 15 minutes.

Prerequisites: Node.js 18 or 20 LTS, npm 6+, and basic knowledge of the terminal. This plugin works exclusively with Strapi v5.

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

Step 1 — Create your Strapi v5 project

If you already have a Strapi v5 project, skip to step 2. Otherwise, use the official CLI:

npx create-strapi-app@latest my-project

The wizard will ask you a few questions. These are the recommended options for development:

Use the default database (SQLite)?     → Yes
Start with an example structure?       → No
Use TypeScript?                        → Yes
Install dependencies with npm?         → Yes

Once done, enter the project directory:

cd my-project

Step 2 — Install the plugin from GitHub

Run this command from the root of your Strapi project:

npm install github:devCluna/strapi-plugin-form-builder-cms#production

Or with yarn:

yarn add github:devCluna/strapi-plugin-form-builder-cms#production

Note: Installing directly from the production branch always gives you the latest version. To pin a specific version, replace #production with a commit hash.

Step 3 — Register the plugin in your config

Open or create the file config/plugins.ts and add the following:

// config/plugins.ts

export default {
  'form-builder-cms': {
    enabled: true,
  },
};

If the file already exists with other plugins, just add the form-builder-cms entry to the existing object.

Step 4 — Rebuild the admin panel

Every time you add a plugin with an admin interface, Strapi needs to rebuild the panel:

npm run build

This may take a couple of minutes. Once complete, start the dev server:

npm run develop

Open your browser at http://localhost:1337/admin. If this is your first run, it will prompt you to create an admin user.

Step 5 — Create your first form

Once inside the admin panel, you'll see a new entry in the left sidebar called Form Builder. From there you can:

Create forms with a name and description
Add dynamic fields (text, email, number, date, select, checkbox, phone, etc.)
Configure per-field validations
View submissions sent from the frontend

To create a new form, click Create new form, give it a name (e.g. Contact Form), and start adding fields using the Add field button.

Step 6 — Consume the API from your frontend

The plugin exposes REST endpoints to fetch form structures and receive submissions:

GET  /api/form-builder-cms/forms
GET  /api/form-builder-cms/forms/:id
POST /api/form-builder-cms/forms/:id/submit

A practical JavaScript example:

// Fetch the form structure
const res = await fetch(
  'http://localhost:1337/api/form-builder-cms/forms/1'
);
const { data } = await res.json();

// Submit a response
await fetch(
  'http://localhost:1337/api/form-builder-cms/forms/1/submit',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      data: {
        name: 'Jane Doe',
        email: 'jane@example.com',
        message: 'Hi, I am interested in your service.',
      }
    })
  }
);

Public permissions: By default Strapi protects all endpoints. Go to Settings → Users & Permissions → Roles → Public and enable the form-builder-cms permissions you need to expose.

Quick sanity check

Before moving on, confirm everything is working:

The admin sidebar shows Form Builder
You can create a form with at least one field
GET /api/form-builder-cms/forms returns your form (with permissions enabled)
A test POST appears in the submissions section of the admin

Troubleshooting common issues

The plugin doesn't appear in the sidebar
Make sure you ran npm run build after installing the plugin, and that the entry in config/plugins.ts is exactly form-builder-cms.

Error when installing from GitHub
Verify you have network access to GitHub and that git is installed on your system. If the repository is private, you'll need to configure SSH authentication or a personal access token.

Server won't start after installing the plugin
Check the terminal for dependency errors. Try deleting node_modules and package-lock.json, then run npm install again.

That's it. In just a few steps you have a fully functional form system inside Strapi v5 — no manual Content Type setup, no custom admin UI to build from scratch.

If the plugin saved you time, drop a ⭐ on GitHub at devCluna's repository. Contributions are always welcome.

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

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

Cristhian Luna — Sat, 04 Apr 2026 14:22:59 +0000

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

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

Una vez completado, entra al directorio:

cd my-project

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

O con yarn:

yarn add github:devCluna/strapi-plugin-form-builder-cms#production

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,
  },
};

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

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

npm run develop

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

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.',
      }
    })
  }
);

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:

El menú lateral del admin muestra Form Builder
Puedes crear un formulario con al menos un campo
GET /api/form-builder-cms/forms retorna tu formulario (con permisos habilitados)
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