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

FORMBUILDER

Dokumentation
Zurück

FORMBUILDER

Wofür ist das?

Mit dem FORMBUILDER-Plugin erstellen Sie eigene Formulare und betten diese auf externen Webseiten ein:

  • Formulare mit beliebigen Feldern anlegen (Text, E-Mail, Auswahl, Checkboxen, usw.)
  • Einbettung per IFrame auf beliebigen Domains
  • Stil-Anpassung (Primärfarbe, Hintergrund, Rahmenradius, Schriftart, eigenes CSS)
  • Einsendungen im Admin verwalten, einsehen und als CSV exportieren
  • Spam-Schutz durch ein unsichtbares Honeypot-Feld
  • Statistiken (gesamt/heute/diese Woche/diesen Monat) mit 30-Tage-Balkendiagramm
  • Öffentliche API zum Absenden der Formulare ohne Authentifizierung

Typische Aufgaben (Alltag)

  • Neues Formular anlegen
  • Felder hinzufügen (Text, E-Mail, Zahl, Auswahl, Checkbox, Radio, usw.)
  • Formular als IFrame auf einer externen Webseite einbetten
  • Eingegangene Einsendungen prüfen
  • Einsendungen als CSV exportieren
  • Darstellung anpassen (Farben, Schriftart, CSS)

Schritt-für-Schritt

1) Formular erstellen

1. Admin → Formular-Builder (/settings/admin/formbuilder).
2. „Neu“ (/settings/admin/formbuilder/create).
3. Titel eingeben – dieser wird später auch als Überschrift im öffentlichen Formular angezeigt.
4. „Speichern“ – das leere Formular wird angelegt.

2) Felder hinzufügen

1. Nach dem Anlegen landen Sie im Editor (/settings/admin/formbuilder/{id}/edit).
2. Pro Feld wählen Sie:

  • Feldname (z. B. vorname, e-mail – wird als Beschriftung angezeigt)
  • Feldtyp: Text, Textarea, E-Mail, Nummer, Telefon, URL, Datum, Auswahl (Select), Checkbox, Radio, Farbe, Bereich (Range), Versteckt (Hidden)
  • Bei Auswahl/Checkbox/Radio: Optionen (z. B. „Option 1; Option 2; Option 3“)

3. „Feld hinzufügen“ – es erscheint in der Vorschau.
4. Felder können nachträglich gelöscht werden.

3) Reihenfolge & Sichtbarkeit

  • Die Felder erscheinen in der Reihenfolge, in der Sie sie angelegt haben.
  • Nicht benötigte Felder löschen Sie über den „ד-Button im Editor.

4) Formular einbetten (IFrame)

1. Nach dem Speichern öffnen Sie „Einbetten“ (/settings/admin/formbuilder/{id}/embed).
2. Kopieren Sie den angezeigten IFrame-Code.
3. Fügen Sie ihn in die gewünschte externe Webseite ein (HTML).

Der IFrame lädt das Formular von GET /formbuilder/{id}/render und sendet Daten an POST /formbuilder/{id}/submit.

5) Stil anpassen

Im Embed-Dialog (/settings/admin/formbuilder/{id}/embed) können Sie:

  • Primärfarbe – Farbe des Absende-Buttons
  • Hintergrundfarbe – Hintergrund des Formular-Blocks
  • Rahmenradius – abgerundete Ecken (in Pixel)
  • Schriftart – z. B. Arial, 'Open Sans', serif
  • Eigenes CSS – beliebiges zusätzliches CSS für individuelle Anpassungen

Die Änderungen sehen Sie sofort in der Live-Vorschau.

6) Einsendungen verwalten

1. In der Formular-Liste (/settings/admin/formbuilder) auf „Einsendungen“ klicken.
2. Sie sehen alle Einsendungen mit Datum, optionalem Namen und Status.
3. Klick auf eine Einsendung zeigt alle Felder und Werte im Detail (/settings/admin/formbuilder/{formId}/submissions/{subId}).
4. CSV-Export – alle Einsendungen als kommagetrennte Datei herunterladen.

7) Statistiken

Im Submission-Bereich sehen Sie:

  • Kacheln: Gesamt, Heute, Diese Woche, Dieser Monat
  • Balkendiagramm: Einsendungen der letzten 30 Tage (per Chart.js)

Häufige Fragen / Probleme

„Das Formular wird auf meiner Webseite nicht angezeigt“

  • Prüfen Sie, ob die Domain im IFrame-Code korrekt ist.
  • Die Ziel-Webseite darf X-Frame-Options nicht blockieren (bei fremden Servern ggf. den Betreiber kontaktieren).
  • Prüfen Sie die Browser-Konsole auf Fehler.

„Die Checkbox-Werte kommen nicht an“

  • Bei Mehrfachauswahl (Checkboxen mit Optionen) werden alle ausgewählten Werte mit Komma getrennt gespeichert.
  • Der Honeypot (_tp) muss leer bleiben – wenn ausgefüllt, wird die Einsendung als Spam verworfen.

„Ich erhalte eine 403-Fehlermeldung beim Absenden“

  • Der POST /formbuilder/{id}/submit-Endpunkt ist öffentlich (CSRF ausgeschlossen). Falls ein 403 erscheint, prüfen Sie, ob die Domain im IFrame-Code korrekt ist und der Server das Formular korrekt ausliefert.
  • Bei externer Einbettung muss der IFrame die Domain des Servers verwenden, nicht localhost.

„Einsendungen werden nicht gespeichert“

  • Prüfen Sie die Datenbank des Mandanten (Plugin Schema formbuilder muss vorhanden sein).
  • Im Admin-Log nach Fehlern suchen.

Technische URLs (Kurzreferenz)

Admin (/settings/admin/formbuilder):

  • GET /settings/admin/formbuilder – Formular-Liste
  • GET /settings/admin/formbuilder/create – Neues Formular
  • GET /settings/admin/formbuilder/{id}/edit – Formular bearbeiten
  • POST /settings/admin/formbuilder/save – Formular speichern
  • POST /settings/admin/formbuilder/{id}/delete – Formular löschen
  • GET /settings/admin/formbuilder/{id}/embed – Einbett-Code + Stil

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

  • GET /settings/admin/formbuilder/{formId}/submissions – Liste
  • GET /settings/admin/formbuilder/{formId}/submissions/{subId} – Detail
  • POST /settings/admin/formbuilder/{formId}/submissions/{subId}/delete – Löschen
  • GET /settings/admin/formbuilder/{formId}/submissions/export/csv – CSV-Export
  • GET /settings/admin/formbuilder/{formId}/submissions/stats/timeline – Statistik-Daten (JSON)

Öffentlich (keine Authentifizierung):

  • GET /formbuilder/{id}/render – Formular anzeigen
  • POST /formbuilder/{id}/submit – Formular absenden

Berechtigungen (Kurzreferenz)

  • formbuilder.forms.view – Formular-Liste und Detail anzeigen
  • formbuilder.forms.create – Formulare anlegen
  • formbuilder.forms.edit – Formulare bearbeiten und löschen
  • formbuilder.submissions.view – Einsendungen anzeigen (Liste + Detail)
  • formbuilder.submissions.export – Einsendungen als CSV exportieren
  • formbuilder.submissions.delete – Einsendungen löschen

Hinweise

  • Der IFrame-Embed-Code enthält die vollständige URL (inkl. Protokoll und Domain). Beim Kopieren auf die Ziel-Webseite achten Sie darauf, dass die Domain erreichbar ist.
  • Der Honeypot (_tp) ist ein verstecktes Feld, das vom Browser ausgefüllt wird, wenn ein Bot das Formular absendet. Normale Benutzer sehen es nicht.
  • Die öffentlichen Endpunkte (/formbuilder//render, /formbuilder//submit) sind ohne Login erreichbar – achten Sie darauf, dass Sie keine sensiblen Daten über das Formular erfragen, die nicht öffentlich sein sollen.
  • Die Stil-Einstellungen (Farben, CSS) wirken sich nur auf das eingebettete Formular aus, nicht auf die Admin-Ansicht.