Feldtypen-Referenz

Vollständige Referenz aller verfügbaren Feldtypen, Optionen und bedingter Logik.

Jedes Feld im schema.fields-Array hat folgende Grundstruktur:

{
  "id": "f1",
  "type": "text",
  "key": "vorname",
  "label": "Vorname"
}

Eigenschaft	Typ	Pflicht	Beschreibung
`id`	`string`	Ja	Eindeutige Feld-ID (frei wählbar)
`type`	`string`	Ja	Feldtyp (siehe unten)
`key`	`string`	Ja	Schlüssel unter dem der Wert gespeichert wird
`label`	`string`	Ja	Anzeigename im Formular

Eingabefelder

Eingabefelder liefern Werte vom Nutzer.

Typ	Beschreibung
`text`	Einzeiliges Textfeld
`email`	E-Mail-Adresse (mit Validierung)
`tel`	Telefonnummer
`url`	URL / Webadresse (mit Validierung)
`textarea`	Mehrzeiliges Textfeld
`number`	Zahleneingabe
`date`	Datumswähler
`time`	Zeitwähler
`checkbox`	Einzelne Checkbox (Ja/Nein)
`select`	Dropdown-Auswahl (benötigt `options`)
`radio`	Radio-Buttons (benötigt `options`)
`file`	Datei-Upload / Foto mit Kamera

Darstellungselemente

Darstellungselemente liefern keine Werte – sie dienen nur der visuellen Struktur.

Typ	Beschreibung
`heading`	Überschrift / Abschnittstitel
`divider`	Horizontale Trennlinie
`static_text`	Statischer Text / Hinweis (nutzt `content`-Eigenschaft)

Gemeinsame Optionen

Diese Optionen stehen für alle Eingabefelder zur Verfügung:

Eigenschaft	Typ	Pflicht	Beschreibung
`id`	`string`	Ja	Eindeutige Feld-ID
`type`	`string`	Ja	Feldtyp
`key`	`string`	Ja	Schlüssel für den Wert
`label`	`string`	Ja	Anzeigename
`required`	`boolean`	Nein	Pflichtfeld? (Standard: `false`)
`placeholder`	`string \| null`	Nein	Platzhaltertext im leeren Feld
`description`	`string \| null`	Nein	Hilfetext unter dem Feld
`rules`	`Rule[]`	Nein	Bedingte Logik (siehe unten)

Spezielle Optionen je Typ

select / radio

Benötigen ein options-Array:

"options": [
  { "label": "Option A", "value": "a" },
  { "label": "Option B", "value": "b" },
  { "label": "Option C", "value": "c" }
]

static_text

Nutzt die content-Eigenschaft:

"content": "Bitte füllen Sie das Formular vollständig aus."

file

Datei-Upload mit eigenen Optionen:

Eigenschaft	Typ	Standard	Beschreibung
`accept`	`string`	alle	Erlaubte Dateitypen, z.B. `"image/*,.pdf,.doc,.docx"`
`maxSizeMb`	`number`	`10`	Max. Größe pro Datei in MB (Max 50)
`maxFiles`	`number`	`5`	Max. Anzahl Dateien (Max 20)

Bedingte Logik (Rules)

Felder können abhängig von anderen Feldern ein-/ausgeblendet oder pflicht-/optional gemacht werden.

"rules": [
  {
    "id": "r1",
    "effect": "show",
    "when": {
      "fieldKey": "kontaktart",
      "op": "equals",
      "value": "telefon"
    }
  }
]

Verfügbare Effects

Effect	Beschreibung
`show`	Feld anzeigen wenn Bedingung zutrifft
`hide`	Feld ausblenden wenn Bedingung zutrifft
`require`	Feld wird Pflicht wenn Bedingung zutrifft
`optional`	Feld wird optional wenn Bedingung zutrifft

Verfügbare Operatoren

Operator	Beschreibung
`equals`	Wert ist gleich `value`
`not_equals`	Wert ist ungleich `value`
`is_empty`	Feld ist leer (`value` wird ignoriert)
`is_not_empty`	Feld ist nicht leer

Vollständiges Beispiel

Ein komplettes Schema mit verschiedenen Feldtypen, Optionen und bedingter Logik:

{
  "version": 1,
  "fields": [
    {
      "id": "h1",
      "type": "heading",
      "key": "ueberschrift",
      "label": "Kontaktformular"
    },
    {
      "id": "s1",
      "type": "static_text",
      "key": "hinweis",
      "label": "Hinweis",
      "content": "Bitte füllen Sie alle Pflichtfelder aus."
    },
    {
      "id": "f1",
      "type": "text",
      "key": "vorname",
      "label": "Vorname",
      "required": true,
      "placeholder": "Max"
    },
    {
      "id": "f2",
      "type": "text",
      "key": "nachname",
      "label": "Nachname",
      "required": true
    },
    {
      "id": "f3",
      "type": "email",
      "key": "email",
      "label": "E-Mail-Adresse",
      "required": true,
      "placeholder": "max@beispiel.de"
    },
    {
      "id": "f4",
      "type": "tel",
      "key": "telefon",
      "label": "Telefonnummer",
      "placeholder": "+49 170 1234567"
    },
    {
      "id": "d1",
      "type": "divider",
      "key": "trennlinie",
      "label": ""
    },
    {
      "id": "f5",
      "type": "select",
      "key": "anliegen",
      "label": "Ihr Anliegen",
      "required": true,
      "options": [
        { "label": "Allgemeine Anfrage", "value": "allgemein" },
        { "label": "Beschwerde", "value": "beschwerde" },
        { "label": "Lob", "value": "lob" }
      ]
    },
    {
      "id": "f6",
      "type": "textarea",
      "key": "nachricht",
      "label": "Ihre Nachricht",
      "required": true,
      "placeholder": "Beschreiben Sie Ihr Anliegen...",
      "description": "Mindestens 10 Zeichen"
    },
    {
      "id": "f7",
      "type": "radio",
      "key": "kontaktweg",
      "label": "Bevorzugter Kontaktweg",
      "options": [
        { "label": "E-Mail", "value": "email" },
        { "label": "Telefon", "value": "telefon" }
      ]
    },
    {
      "id": "f8",
      "type": "date",
      "key": "wunschtermin",
      "label": "Wunschtermin",
      "rules": [
        {
          "id": "r1",
          "effect": "show",
          "when": {
            "fieldKey": "kontaktweg",
            "op": "equals",
            "value": "telefon"
          }
        }
      ]
    },
    {
      "id": "f9",
      "type": "file",
      "key": "anhang",
      "label": "Anhänge",
      "description": "Bilder oder PDFs hochladen",
      "accept": "image/*,.pdf",
      "maxSizeMb": 10,
      "maxFiles": 5
    },
    {
      "id": "f10",
      "type": "checkbox",
      "key": "datenschutz",
      "label": "Ich stimme der Datenschutzerklärung zu",
      "required": true
    }
  ]
}

Vorlagen verwalten Session erstellen