DEV Community

Cover image for How to Build Forms in Strapi v5 with strapi-plugin-form-builder-cms
Cristhian Luna
Cristhian Luna

Posted on

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

#strapi #plugin #forms #strapiv5

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Once done, enter the project directory:

cd my-project
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or with yarn:

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

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,
  },
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npm run develop
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.',
      }
    })
  }
);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)