strapi-plugin-form-builder-cms

strapi-plugin-form-builder-cms

A visual drag-and-drop form builder plugin for Strapi 5. Create, publish and embed forms on any website without writing a single line of backend code.

---

Features

• Drag-and-drop builder — reorder fields visually inside the Strapi admin.
• Starter templates — begin from Contact, Newsletter, Feedback, Job application, Event RSVP, or a blank form.
• Rich field types — text, email, number, phone, URL, password, date, time, textarea, select, radio, checkbox, checkbox-group, heading, paragraph, divider.
• Field validation — required, minLength, maxLength, min value, max value, email, URL, regex pattern — all configurable per field with custom error messages.
• Draft / Publish — draft edits stay private; the public page and embed always serve the last published version, so saving a draft never affects the live form.
• Public page — one toggle generates a hosted page at /api/strapi-plugin-form-builder-cms/page/:slug (available once the form is published).
• Embed script — a single <script> tag renders the form on any external site with zero dependencies.
• Spam & limits — honeypot field plus optional per-IP hourly rate limiting.
• Submission inbox — search, filter by status (new / read / archived), bulk mark-as-read / archive / delete, per-form column picker, a detail drawer with next/previous navigation, and CSV export.
• Form preview — preview the rendered form inside the admin before publishing.

---

Requirements

Dependency	Version
Strapi	^5.0.0
Node.js	>=18.0.0
React	^18.0.0

---

Installation

# npm
npm install strapi-plugin-form-builder-cms

# yarn
yarn add strapi-plugin-form-builder-cms

Enable the plugin

Add the plugin to your Strapi configuration:

// config/plugins.js  (or config/plugins.ts)
module.exports = {
  'strapi-plugin-form-builder-cms': {
    enabled: true,
  },
};

Rebuild and restart

npm run build
npm run develop

The Form Builder entry will appear in the Strapi admin sidebar.

---

Usage

1 — Create a form

1. Open Form Builder in the sidebar.
2. Click Create form and pick a starter template or a blank form.
3. Click field types in the left palette to add them to the canvas, then drag to reorder.
4. Click any field to open its settings panel — General (label, name, placeholder, required, width) and Validation tabs.
5. Click Save draft to persist without affecting the live form, or Publish to update what the public sees.

2 — Embed on your website

Open the form and click the Embed button to copy the snippet:

<div id="sfb-form-{id}"></div>
<script
  src="https://your-strapi-domain.com/api/strapi-plugin-form-builder-cms/embed.js"
  data-form-id="{id}"
  async
></script>

Paste both tags wherever you want the form to appear. The script is self-contained — no external dependencies, no build step required.

3 — Public page (optional)

Toggle Public page in the form settings drawer and publish the form. A shareable URL is generated:

https://your-strapi-domain.com/api/strapi-plugin-form-builder-cms/page/{slug}

Share or link directly to this page — it renders the form in a clean, responsive layout served by Strapi itself.

The public page, embed and submit endpoint only serve published forms. An unpublished (draft) form returns 404.

4 — View submissions

Click Submissions on any form from the list page. Search, filter by status, and pick which columns to show. Open a submission for a detail drawer with next/previous navigation; mark as read, archive or delete — individually or in bulk. Export everything to CSV.

---

Public API routes

These routes require no authentication and are safe to call from the browser.

Method	Path	Description
GET	/api/strapi-plugin-form-builder-cms/embed.js	Serve the embed script
GET	/api/strapi-plugin-form-builder-cms/forms/:id/embed-schema	Form schema by numeric ID
GET	/api/strapi-plugin-form-builder-cms/forms/:slug/schema	Form schema by slug
GET	/api/strapi-plugin-form-builder-cms/page/:slug	Hosted public page
POST	/api/strapi-plugin-form-builder-cms/forms/:slug/submit	Submit form data

Submit payload

{
  "data": {
    "fieldName": "value",
    "checkboxGroupField": ["option1", "option2"]
  }
}

Submit response — success

{ "success": true, "successMessage": "Thank you!" }

Submit response — validation error (400)

{
  "success": false,
  "errors": {
    "email": ["Enter a valid email address"],
    "name": ["Minimum 3 characters"]
  }
}

---

Field types

Type	Description
text	Single-line text input
email	Email input (auto-validates format)
number	Numeric input (auto-validates format)
phone	Tel input
url	URL input (auto-validates format)
password	Password input
date	Date picker
time	Time picker
textarea	Multi-line text
select	Dropdown — configure options in the settings panel
radio	Radio group — configure options in the settings panel
checkbox	Single checkbox (agree / consent)
checkbox-group	Multiple checkboxes — configure options in the settings panel
heading	Non-input heading label
paragraph	Non-input descriptive text
divider	Horizontal rule to separate sections

---

Validation rules

Rule	Applies to	Description
required	All input fields	Field must not be empty
minLength	Text fields	Minimum character count
maxLength	Text fields	Maximum character count
min	number	Minimum numeric value
max	number	Maximum numeric value
email	Text fields	Must be a valid email address
url	Text fields	Must be a valid URL
pattern	Text fields	Must match a regular expression

Each rule accepts an optional custom error message. The same rule type cannot be added twice to the same field.

---

Form settings

Setting	Description
Description	Optional intro text shown above the form
Submit button text	Label on the submit button
Success message	Message shown after a successful submission
Public page	Generates a hosted page URL for the form (served once published)
Honeypot protection	Adds a hidden field to silently discard bot submissions
Rate limiting	Caps submissions per IP each hour (configurable max)
Redirect URL	Where to send the visitor after a successful submit

---

Development

Clone the repo and link the plugin to a local Strapi project:

git clone https://github.com/devCluna/strapi-plugin-form-builder-cms.git
cd strapi-plugin-form-builder-cms
npm install

# watch mode — rebuilds on save
npm run watch:link

In your local Strapi project:

npm run develop

---

Contributing

Pull requests are welcome. For major changes please open an issue first to discuss what you would like to change.

1. Fork the repository.
2. Create a feature branch: git checkout -b feat/my-feature.
3. Commit your changes following Conventional Commits.
4. Open a pull request.

---

Roadmap

• Export submissions as CSV
• Email notifications on new submission
• File upload field type
• Multi-step / wizard forms
• Webhook on submit
• Version history / restore

Have a feature request? Open an issue.

---

License

MIT

---

Author

dev.cluna — dev.cluna@gmail.com