Docs
Docs
Allesda
DE | EN
Plugins
Allesda
DE | EN
Plugins

FORMBUILDER

Documentation
Back

FORMBUILDER

What is this for?

With the FORMBUILDER plugin you can create custom forms and embed them on external websites:

  • Forms with any fields (text, email, select, checkboxes, etc.)
  • Embedding via IFrame on any domain
  • Style customization (primary color, background, border radius, font, custom CSS)
  • Submissions can be viewed, managed, and exported as CSV in the admin panel
  • Spam protection through an invisible honeypot field
  • Statistics (total/today/this week/this month) with a 30-day bar chart
  • Public API for form submission without authentication

Common tasks (day-to-day)

  • Create a new form
  • Add fields (text, email, number, select, checkbox, radio, etc.)
  • Embed the form as an IFrame on an external website
  • Review incoming submissions
  • Export submissions as CSV
  • Customize appearance (colors, font, CSS)

Step by step

1) Create a new form

1. Admin → Form Builder (/settings/admin/formbuilder).
2. Click "New" (/settings/admin/formbuilder/create).
3. Enter a title – it will also be displayed as heading in the public form.
4. Click "Save" – the empty form is created.

2) Add fields

1. After creating the form, you are taken to the editor (/settings/admin/formbuilder/{id}/edit).
2. For each field, choose:

  • Field name (e.g., first-name, email – used as the label)
  • Field type: Text, Textarea, Email, Number, Phone, URL, Date, Select, Checkbox, Radio, Color, Range, Hidden
  • For Select/Checkbox/Radio: Options (e.g., "Option 1; Option 2; Option 3")

3. Click "Add Field" – it appears in the preview.
4. Fields can be deleted later.

3) Order & visibility

  • Fields appear in the order they were created.
  • Delete unwanted fields using the "×" button in the editor.

4) Embed the form (IFrame)

1. After saving, open "Embed" (/settings/admin/formbuilder/{id}/embed).
2. Copy the displayed IFrame code.
3. Paste it into the desired external website (HTML).

The IFrame loads the form from GET /formbuilder/{id}/render and submits data to POST /formbuilder/{id}/submit.

5) Customize the style

In the embed dialog (/settings/admin/formbuilder/{id}/embed) you can:

  • Primary color – color of the submit button
  • Background color – background of the form block
  • Border radius – rounded corners (in pixels)
  • Font family – e.g., Arial, 'Open Sans', serif
  • Custom CSS – any additional CSS for individual adjustments

Changes are visible instantly in the live preview.

6) Manage submissions

1. In the form list (/settings/admin/formbuilder) click "Submissions".
2. You will see all submissions with date, optional name, and status.
3. Click on a submission to view all fields and values in detail (/settings/admin/formbuilder/{formId}/submissions/{subId}).
4. CSV Export – download all submissions as a comma-separated file.

7) Statistics

In the submissions section you will see:

  • Cards: Total, Today, This Week, This Month
  • Bar chart: Submissions over the last 30 days (using Chart.js)

Common questions / problems

"The form does not display on my website"

  • Check whether the domain in the IFrame code is correct.
  • The target website must not block X-Frame-Options (for third-party servers, contact the site operator).
  • Check the browser console for errors.

"Checkbox values are not received"

  • For multi-select (checkboxes with options), all selected values are stored comma-separated.
  • The honeypot (_tp) must remain empty – if filled, the submission is discarded as spam.

"I get a 403 error when submitting"

  • The POST /formbuilder/{id}/submit endpoint is public (CSRF excluded). If a 403 appears, check that the domain in the IFrame code is correct and the server serves the form correctly.
  • When embedding externally, the IFrame must use the server's domain, not localhost.

"Submissions are not being saved"

  • Check the tenant's database (the formbuilder plugin schema must exist).
  • Look for errors in the admin log.

Technical URLs (quick reference)

Admin (/settings/admin/formbuilder):

  • GET /settings/admin/formbuilder – form list
  • GET /settings/admin/formbuilder/create – new form
  • GET /settings/admin/formbuilder/{id}/edit – edit form
  • POST /settings/admin/formbuilder/save – save form
  • POST /settings/admin/formbuilder/{id}/delete – delete form
  • GET /settings/admin/formbuilder/{id}/embed – embed code + style

Submissions (/settings/admin/formbuilder/{formId}/submissions):

  • GET /settings/admin/formbuilder/{formId}/submissions – list
  • GET /settings/admin/formbuilder/{formId}/submissions/{subId} – detail
  • POST /settings/admin/formbuilder/{formId}/submissions/{subId}/delete – delete
  • GET /settings/admin/formbuilder/{formId}/submissions/export/csv – CSV export
  • GET /settings/admin/formbuilder/{formId}/submissions/stats/timeline – statistics data (JSON)

Public (no authentication):

  • GET /formbuilder/{id}/render – display the form
  • POST /formbuilder/{id}/submit – submit the form

Permissions (quick reference)

  • formbuilder.forms.view – view form list and details
  • formbuilder.forms.create – create forms
  • formbuilder.forms.edit – edit and delete forms
  • formbuilder.submissions.view – view submissions (list + detail)
  • formbuilder.submissions.export – export submissions as CSV
  • formbuilder.submissions.delete – delete submissions

Notes

  • The IFrame embed code contains the full URL (including protocol and domain). When copying to the target website, make sure the domain is reachable.
  • The honeypot (_tp) is a hidden field filled by bots. Normal users will not see it.
  • The public endpoints (/formbuilder//render, /formbuilder//submit) are accessible without login – make sure you do not request sensitive data through the form that should not be public.
  • Style settings (colors, CSS) only affect the embedded form, not the admin view.