Formular-Komponente (Form)

Die Formular-Komponente stellt ein eigenes Formular auf den Stand, zum Beispiel für Kontaktanfragen, Bewerbungen, Terminwünsche oder eine Verlosung. Besucher füllen es aus und schicken es ab, ohne den Stand zu verlassen. Die Einsendungen landen wahlweise in der Expo-IP, wo Sie sie im Backend lesen und ausgeben können, oder bei einem eigenen Dienst.

Im Auswahlfeld „Komponententyp" heißt die Komponente Form.

Anlegen, Platzieren, Größe ändern, Verzerren und Speichern funktionieren wie bei allen Komponenten. Die Schritte sind am Beispiel der Bild-Komponente (Image) beschrieben. Die Reiter „Layout", „Sichtbarkeit" und „Generiert" beschreibt die Seite Einstellung von Layout und Sichtbarkeit.

Die Formular-Komponente im Stand-Editor, Reiter „Inhalt"

Neu angelegte Formulare sind nicht leer: Die Expo-IP legt ein Beispielformular mit Name, E-Mail, einer Auswahl, einem Nachrichtenfeld, einem Dateifeld und zwei Ankreuzfeldern an. Sie ändern es ab, statt bei null anzufangen.

Die Felder der Komponente

Abschnitt	Feld	Bedeutung
Darstellung	Titel des Formulars (wird angezeigt)	Überschrift über dem Formular, im Beispiel „Bewirb dich jetzt!".
	Erfolgsnachricht	Der Text, den Besucher nach dem Absenden sehen.
Übertragung	Ziel	„Expo-Datenbank (Einsendungen speichern)" behält die Einsendungen in der Expo-IP. „Externe URL" schickt sie an einen eigenen Dienst.
	Action-URL (nur bei externem Ziel)	Die Adresse, die die Daten entgegennimmt. Nur nötig, wenn das Ziel „Externe URL" ist.
	Benachrichtigung an (E-Mail, optional)	Eine oder mehrere Adressen, die bei jeder Einsendung eine E-Mail bekommen. Mehrere Adressen durch Komma trennen.
	Methode	POST oder GET. Betrifft nur das externe Ziel.
	Übertragungsmodus	„Im Hintergrund laden" schickt das Formular ab, ohne die Seite zu wechseln, „Absenden (Seite neu laden)" lädt die Zielseite. Betrifft nur das externe Ziel.
	Beschriftung des Senden-Buttons	Der Text auf dem Knopf, im Beispiel „Jetzt bewerben". Ohne Eintrag steht dort „Absenden".
	Browservalidierung ausschalten (novalidate)	Der Browser prüft Pflichtfelder und E-Mail-Adressen nicht mehr vorab. Nur zum Testen sinnvoll; die Expo-IP prüft Pflichtfelder ohnehin noch einmal selbst.
Formularfelder	Felddefinitionen (JSON)	Die eigentlichen Formularfelder, siehe unten.

Wichtig beim Ziel „Expo-Datenbank": Action-URL, Methode und Übertragungsmodus sind dann festgelegt und werden ignoriert. Die Expo-IP trägt die Zieladresse selbst ein, sendet immer per POST und immer im Hintergrund. Die drei Felder bleiben im Formular sichtbar, wirken aber nur beim Ziel „Externe URL".

Das Beispielformular auf dem Stand, hier in der Vorschau

Die Felddefinitionen

Die Formularfelder werden nicht einzeln angeklickt, sondern als Liste in einem technischen Format namens JSON beschrieben. Eine Definition ist eine Liste in eckigen Klammern, in der jedes Feld als Block in geschweiften Klammern steht:

[
  {
    "name": "name",
    "label": "Name",
    "required": true,
    "placeholder": "Dein Name"
  },
  {
    "name": "mail",
    "type": "email",
    "label": "E-Mail",
    "required": true
  }
]

Jedes Feld braucht mindestens einen name, den technischen Namen, unter dem die Eingabe später in der Einsendung steht. Er sollte kurz sein, ohne Leerzeichen und Umlaute, und im Formular nur einmal vorkommen. Alles Weitere ist freiwillig.

Feldtypen

`type`	Was der Besucher sieht
`text`	Ein einzeiliges Textfeld. Gilt auch, wenn Sie gar keinen Typ angeben.
`email`	Textfeld, das der Browser auf eine gültige E-Mail-Adresse prüft.
`tel`	Textfeld für Telefonnummern.
`url`	Textfeld für Internetadressen.
`number`	Zahlenfeld, mit `min` und `max` eingrenzbar.
`date`	Datumsfeld mit Kalender des Browsers.
`textarea`	Mehrzeiliges Textfeld, Höhe über `rows`.
`select`	Auswahlliste, die Einträge stehen unter `options`.
`radio`	Auswahl aus mehreren Knöpfen, die Einträge stehen unter `options`.
`checkbox`	Ein einzelnes Ankreuzfeld, zum Beispiel für die Einwilligung.
`file`	Feld zum Hochladen einer Datei.
`hidden`	Ein unsichtbares Feld mit festem Wert, etwa eine Kennung der Kampagne.

Eigenschaften eines Feldes

Eigenschaft	Wirkung
`name`	Technischer Name, Pflicht.
`label`	Beschriftung. Ohne Angabe erscheint der technische Name.
`type`	Feldtyp aus der Tabelle oben, Vorgabe `text`.
`required`	`true` macht das Feld zum Pflichtfeld, erkennbar an einem Stern hinter der Beschriftung.
`placeholder`	Grauer Beispieltext im leeren Feld.
`helpText`	Erklärender Text unter dem Feld.
`errorMessage`	Eigene Fehlermeldung, wenn das Pflichtfeld leer bleibt.
`defaultValue`	Vorbelegter Wert; bei `checkbox` bedeutet ein Wert „vorangekreuzt".
`autocomplete`	Hinweis für den Browser, was er vorschlagen darf, etwa `name` oder `email`.
`min`, `max`	Kleinster und größter Wert bei `number` und `date`.
`minLength`, `maxLength`	Kürzeste und längste erlaubte Eingabe.
`pattern`	Muster, dem die Eingabe entsprechen muss (regulärer Ausdruck).
`rows`	Zeilenhöhe bei `textarea`, Vorgabe 3.
`options`	Die Einträge bei `select` und `radio`, je mit `value` und `label`.
`cssClass`	Eigene CSS-Klasse für dieses Feld.

Ein vollständiges Formular zum Kopieren

Das folgende Formular ist ein vollständiges Kontaktformular für einen Messestand und enthält jeden der zwölf Feldtypen mindestens einmal. Kopieren Sie es in das Feld „Felddefinitionen (JSON)", klicken Sie auf „Übernehmen", und werfen Sie dann alles heraus, was Sie nicht brauchen. Das ist der schnellste Weg zu einem eigenen Formular, und Sie sehen nach jedem Schritt sofort, ob es noch funktioniert.

[
  {
    "name": "quelle",
    "type": "hidden",
    "defaultValue": "messestand-2026"
  },
  {
    "name": "firma",
    "label": "Firma",
    "placeholder": "Muster Technik GmbH",
    "autocomplete": "organization"
  },
  {
    "name": "name",
    "label": "Ansprechpartner",
    "required": true,
    "placeholder": "Vor- und Nachname",
    "autocomplete": "name",
    "errorMessage": "Bitte geben Sie einen Ansprechpartner an."
  },
  {
    "name": "mail",
    "type": "email",
    "label": "E-Mail",
    "required": true,
    "placeholder": "name@firma.de",
    "autocomplete": "email"
  },
  {
    "name": "telefon",
    "type": "tel",
    "label": "Telefon",
    "placeholder": "+49 6151 123456",
    "autocomplete": "tel",
    "helpText": "Nur nötig, wenn Sie einen Rückruf wünschen."
  },
  {
    "name": "webseite",
    "type": "url",
    "label": "Webseite Ihres Unternehmens",
    "placeholder": "https://"
  },
  {
    "name": "interesse",
    "type": "select",
    "label": "Wofür interessieren Sie sich?",
    "required": true,
    "options": [
      { "value": "", "label": "Bitte wählen" },
      { "value": "3d-druck", "label": "3D-Druck" },
      { "value": "cnc", "label": "CNC-Fertigung" },
      { "value": "beratung", "label": "Allgemeine Beratung" }
    ]
  },
  {
    "name": "kontaktweg",
    "type": "radio",
    "label": "Wie sollen wir Sie erreichen?",
    "defaultValue": "mail",
    "options": [
      { "value": "mail", "label": "Per E-Mail" },
      { "value": "telefon", "label": "Per Telefon" }
    ]
  },
  {
    "name": "stueckzahl",
    "type": "number",
    "label": "Geplante Stückzahl",
    "min": 1,
    "max": 100000,
    "helpText": "Eine grobe Schätzung genügt."
  },
  {
    "name": "wunschtermin",
    "type": "date",
    "label": "Wunschtermin für ein Gespräch",
    "min": "2026-10-01",
    "max": "2026-12-31"
  },
  {
    "name": "nachricht",
    "type": "textarea",
    "label": "Ihre Nachricht",
    "rows": 5,
    "maxLength": 2000,
    "placeholder": "Beschreiben Sie kurz Ihr Vorhaben."
  },
  {
    "name": "unterlagen",
    "type": "file",
    "label": "Unterlagen",
    "helpText": "PDF, Bild oder Office-Datei, höchstens 50 MB."
  },
  {
    "name": "rueckruf",
    "type": "checkbox",
    "label": "Bitte rufen Sie mich zurück"
  },
  {
    "name": "datenschutz",
    "type": "checkbox",
    "label": "Ich bin mit der Verarbeitung meiner Daten einverstanden",
    "required": true,
    "errorMessage": "Ohne Ihre Einwilligung können wir die Anfrage nicht annehmen."
  }
]

Drei Dinge lassen sich an diesem Beispiel ablesen, die immer gelten:

Die äußeren eckigen Klammern umschließen die ganze Liste. Sie bleiben stehen, auch wenn nur ein einziges Feld übrig ist.
Zwischen zwei Feldern steht ein Komma, nach dem letzten Feld keines. Das ist die häufigste Fehlerquelle.
Die Reihenfolge im JSON ist die Reihenfolge im Formular. Wollen Sie ein Feld verschieben, verschieben Sie seinen Block.

Die Feldtypen einzeln

Wenn ein Formular schon steht und ein Feld dazukommen soll, nehmen Sie den passenden Block von hier und fügen ihn an der gewünschten Stelle in die Liste ein, mit Komma davor oder dahinter. Die Blöcke stammen aus dem vollständigen Formular oben.

Textfeld (text, gilt auch ohne Typangabe):

{
  "name": "firma",
  "label": "Firma",
  "placeholder": "Muster Technik GmbH",
  "autocomplete": "organization"
}

E-Mail-Feld (email): Der Browser prüft die Eingabe auf eine gültige Adresse.

{
  "name": "mail",
  "type": "email",
  "label": "E-Mail",
  "required": true,
  "placeholder": "name@firma.de",
  "autocomplete": "email"
}

Telefonfeld (tel): Der Browser prüft hier nichts, weil Telefonnummern zu unterschiedlich geschrieben werden. helpText erscheint als Erklärung unter dem Feld.

{
  "name": "telefon",
  "type": "tel",
  "label": "Telefon",
  "placeholder": "+49 6151 123456",
  "autocomplete": "tel",
  "helpText": "Nur nötig, wenn Sie einen Rückruf wünschen."
}

Adressfeld (url): Der Browser erwartet eine vollständige Adresse mit https://, deshalb steht das hier als Beispieltext.

{
  "name": "webseite",
  "type": "url",
  "label": "Webseite Ihres Unternehmens",
  "placeholder": "https://"
}

Zahlenfeld (number): min und max grenzen den erlaubten Bereich ein.

{
  "name": "stueckzahl",
  "type": "number",
  "label": "Geplante Stückzahl",
  "min": 1,
  "max": 100000,
  "helpText": "Eine grobe Schätzung genügt."
}

Datumsfeld (date): min und max begrenzen den Kalender. Das Datum wird in der Form Jahr-Monat-Tag geschrieben.

{
  "name": "wunschtermin",
  "type": "date",
  "label": "Wunschtermin für ein Gespräch",
  "min": "2026-10-01",
  "max": "2026-12-31"
}

Mehrzeiliges Textfeld (textarea): rows bestimmt die Höhe in Zeilen, maxLength die größte erlaubte Zeichenzahl.

{
  "name": "nachricht",
  "type": "textarea",
  "label": "Ihre Nachricht",
  "rows": 5,
  "maxLength": 2000,
  "placeholder": "Beschreiben Sie kurz Ihr Vorhaben."
}

Auswahlliste (select): Die Einträge stehen unter options, jeder mit value (was gespeichert wird) und label (was der Besucher liest). Der erste Eintrag mit leerem value sorgt dafür, dass zunächst nichts ausgewählt ist; bei einem Pflichtfeld muss der Besucher dann eine echte Auswahl treffen.

{
  "name": "interesse",
  "type": "select",
  "label": "Wofür interessieren Sie sich?",
  "required": true,
  "options": [
    { "value": "", "label": "Bitte wählen" },
    { "value": "3d-druck", "label": "3D-Druck" },
    { "value": "cnc", "label": "CNC-Fertigung" },
    { "value": "beratung", "label": "Allgemeine Beratung" }
  ]
}

Auswahlknöpfe (radio): Wie die Auswahlliste, aber alle Möglichkeiten sind gleichzeitig sichtbar. Das lohnt sich bei zwei oder drei Möglichkeiten. defaultValue wählt einen davon vor.

{
  "name": "kontaktweg",
  "type": "radio",
  "label": "Wie sollen wir Sie erreichen?",
  "defaultValue": "mail",
  "options": [
    { "value": "mail", "label": "Per E-Mail" },
    { "value": "telefon", "label": "Per Telefon" }
  ]
}

Ankreuzfeld (checkbox), einfache Form:

{
  "name": "rueckruf",
  "type": "checkbox",
  "label": "Bitte rufen Sie mich zurück"
}

Ankreuzfeld als Pflichtfeld, der übliche Weg für die Einwilligung. errorMessage ist hier besonders sinnvoll, weil „Dieses Feld ist erforderlich." bei einem Haken wenig erklärt:

{
  "name": "datenschutz",
  "type": "checkbox",
  "label": "Ich bin mit der Verarbeitung meiner Daten einverstanden",
  "required": true,
  "errorMessage": "Ohne Ihre Einwilligung können wir die Anfrage nicht annehmen."
}

Dateifeld (file): Schreiben Sie die erlaubten Formate in helpText, das Feld selbst zeigt sie nicht an.

{
  "name": "unterlagen",
  "type": "file",
  "label": "Unterlagen",
  "helpText": "PDF, Bild oder Office-Datei, höchstens 50 MB."
}

Verstecktes Feld (hidden): Es ist für Besucher unsichtbar und schickt einen festen Wert mit. Damit erkennen Sie später, von welchem Stand oder welcher Aktion eine Einsendung kam. Ein label braucht es nicht.

{
  "name": "quelle",
  "type": "hidden",
  "defaultValue": "messestand-2026"
}

Wenn das JSON nicht stimmt: Fehlt eine Klammer oder ein Komma, zeigt die Komponente statt des Formulars eine Fehlermeldung, die mit „Field Definitions: invalid JSON" beginnt. Prüfen Sie dann die Klammern und Kommas. Die Meldung erscheint sofort im Editor, Sie sehen den Fehler also beim Bearbeiten und nicht erst auf dem fertigen Stand.

Dateien hochladen

Ein Feld vom Typ file erlaubt Besuchern, eine Datei mitzuschicken, etwa Bewerbungsunterlagen. Dabei gelten feste Grenzen der Plattform:

Höchstens 50 MB je Datei.
Erlaubte Dateitypen: pdf, jpg, jpeg, png, gif, webp, doc, docx, xls, xlsx, ppt, pptx, txt, csv, odt, ods und zip. Alles andere weist die Expo-IP mit „Dieser Dateityp ist nicht erlaubt." ab.
Die Dateien liegen außerhalb des öffentlichen Bereichs des Servers. Sie sind nicht über eine Adresse abrufbar, sondern nur über das Backend herunterzuladen.

Schreiben Sie die gewünschten Formate am besten in die Beschriftung oder in helpText, im Beispiel „Dokumente (PDF)".

Was mit den Einsendungen passiert

Beim Ziel Expo-Datenbank speichert die Expo-IP jede Einsendung mit den ausgefüllten Werten, dem Zeitpunkt, der IP-Adresse und der Browserkennung des Absenders. Einsendungen werden nicht mehr verändert.

Sie finden sie im Backend beim Stand im Reiter Formulareinsendungen. Dieser Reiter erscheint erst, wenn der Stand gespeichert ist und Einsendungen vorliegen. Dort stehen die Einsendungen in einer Liste, lassen sich einzeln öffnen, und mitgeschickte Dateien lassen sich herunterladen. Für die Weiterverarbeitung gibt es drei Ausgabeformate:

Format	Wofür
JSON	Vollständige Daten zur maschinellen Weiterverarbeitung.
CSV	Tabelle für Excel oder LibreOffice Calc.
ZIP	Die Daten zusammen mit allen hochgeladenen Dateien.

Ist unter Benachrichtigung an eine Adresse eingetragen, geht zusätzlich bei jeder Einsendung eine E-Mail mit den ausgefüllten Werten hinaus. Mehrere Adressen trennen Sie durch Komma; ungültige Adressen werden übergangen. Hochgeladene Dateien hängt die Expo-IP an diese E-Mail an, solange die Anhänge zusammen 10 MB nicht überschreiten. Größere Dateien bleiben im Backend und fehlen in der E-Mail, die Einsendung selbst ist davon nicht betroffen.

Datenschutz: Zu jeder Einsendung wird die IP-Adresse des Absenders gespeichert. Nennen Sie das in Ihrer Datenschutzerklärung, und holen Sie für die Verarbeitung der Daten eine Einwilligung ein, zum Beispiel über ein Ankreuzfeld mit "required": true.

Spamschutz

Formulare mit dem Ziel „Expo-Datenbank" sind auf drei Wegen gegen automatische Einsendungen geschützt, ohne dass Besucher etwas davon merken oder ein Rätsel lösen müssen:

Das Formular enthält ein unsichtbares Feld. Menschen sehen es nicht und lassen es leer, automatische Programme füllen es aus. Ist es ausgefüllt, wird die Einsendung verworfen.
Jedes Formular bekommt beim Ausliefern ein signiertes Kennzeichen mit. Einsendungen ohne gültiges Kennzeichen nimmt die Expo-IP nicht an. Das verhindert Einsendungen, die an einem Stand vorbei geschickt werden.
Einsendungen, die weniger als zwei Sekunden nach dem Aufbau des Formulars eintreffen, gelten als maschinell und werden abgewiesen. Menschen brauchen zum Ausfüllen länger.

Prüfung der Eingaben

Pflichtfelder prüft zuerst der Browser und danach noch einmal der Server. Fehlt eine Angabe, erscheint unter dem Formular „Bitte prüfen Sie Ihre Eingaben.", und die betroffenen Felder werden markiert. Haben Sie bei einem Feld errorMessage gesetzt, steht dort Ihr eigener Text, sonst „Dieses Feld ist erforderlich."

Nach einer erfolgreichen Einsendung erscheint Ihre Erfolgsnachricht, und der Senden-Knopf bleibt gesperrt, damit dieselbe Einsendung nicht mehrfach abgeschickt wird.

Ausprobieren

Im Editor-Modus ist das Formular sichtbar, aber nicht bedienbar. Zum Ausfüllen und Abschicken wechseln Sie in die Vorschau, wie auf der Seite Video-Komponente (Video) im Abschnitt „Editor-Modus und Vorschau" beschrieben. Eine dort abgeschickte Einsendung wird echt gespeichert und löst auch die Benachrichtigungs-E-Mail aus. Räumen Sie Testeinsendungen vor der Messe wieder auf.

In der Liste unter dem Stand erscheint ein Formular automatisch, unter der Überschrift „Formulare". Wenn Sie das nicht möchten, nehmen Sie im Reiter „Sichtbarkeit" den Haken „In Liste anzeigen" heraus.