VOOZH about

URL: https://dev.to/devcluna/how-to-build-forms-in-strapi-v5-with-strapi-plugin-form-builder-cms-393j

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


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:

  1. The admin sidebar shows Form Builder
  2. You can create a form with at least one field
  3. GET /api/form-builder-cms/forms returns your form (with permissions enabled)
  4. 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