Die Formularelemente stellen die Schnittstelle zwischen Formularnutzer/Formularnuterzin und Formularempfänger/Formularempfängerin dar. Sie dienen also dazu die Informationen der Personen an den/die Empfänger/Empfängerin zu übermitteln. Sie sind der Kern eines Formulars.

Übersicht der verfügbaren Typen von Formularelementen

Klickt man auf „Formular [Ablauf]“ im Strukturbaum des Formulareditors, erscheinen an dessen oberen Rand folgende auswählbare Formularelemente, die Ihnen weiter unten auf dieser Seite erklärt werden:

• Aktionen: Mailversand
• Eingabefeld
• Textarea
• Einfachauswahl
• Auswahlliste
• Mehrfachauswahl
• Datei
• Verstecktes Feld
• Paragraph
• Seitenumbruch
• Zusammenfassung
• Berechneter Wert
• Bedingung
• Layout

Formular-Eigenschaften

Hier können Sie auch einige allgemeine Eigenschaften für das Formular vornehmen.
Die Felder „Weiter Text“, „Abbrechen Text“ und „Absenden Text“ können Sie auch leer lassen, da es hierfür eine Standard-Belegung gibt.

• Beschriftung:
  Dieser Text wird als zweite Überschrift auf der Formularseite angezeigt.
• Weiter Text:
  Dieser Text wird auf dem Weiter-Button der ersten Formularseite eines mehrseitigen Formulars angezeigt. Bei Formularen mit nur einer Seite wird dieser Text nicht verwendet.
• Abbrechen Text:
  Dieser Text wird auf dem Zurück-Button angezeigt.
• Absenden Text:
  Dieser Text wird auf dem Absenden-Button angezeigt.
• CSS-Klasse:
  Diese Auswahlliste ist derzeit leer.
  Hier hätten Sie sonst die Möglichkeit, der Formularseite eine CSS-Klasse aus einer vorgegebenen Liste zuzuweisen.
• Validierungsskript:
  Diese Einstellung ist für Sie in der Regel irrelevant. Hierfür sind erweiterte JavaScript-Kenntnisse erforderlich.
  Mit dem Validierungsskript könnten Sie die im Formular eingegebenen Daten validieren. Anders als bei den Feldvalidatoren, die immer nur den Wert eines Feldes prüfen, haben Sie hier die Möglichkeit, die Werte mehrerer Felder gleichzeitig zu prüfen und miteinander in Bezug zu setzen. Hierfür sind fortgeschrittene JavaScript-Kenntnisse erforderlich. Das Validierungsskript wird ausgeführt, sobald der/die Benutzer/Benutzerin die Formularseite wechselt oder das Formular absendet.

Wiederkehrende Formularelement-Eigenschaften

Bei jedem einzelnen Formularelement können bzw. müssen Sie einige Eigenschaften festlegen. Manche dieser Eigenschaften gleichen sich in mehreren Formularelementen:

• Name:
  Geben Sie hier den technischen Namen des Formularelementes an. Jeder Name darf nur einmal pro Formular vergeben werden, muss klein geschrieben werden und darf keine Sonderzeichen enthalten.
• Beschriftung:
  Die Beschriftung, die für die/den Nutzerin/Nutzer angezeigt wird. Sie wird auch z. B. in der Zusammenfassung angezeigt.
• Hinweis:
  Hinweistext mit kleiner Schriftgröße unter dem Formularfeld, beispielsweise ein Hinweistext, wie das Formularfeld auszufüllen ist. Um den Hinweistext zu formatieren, können Sie die sogenannte Markdown-Syntax verwenden. Wie Sie diese verwenden können, finden Sie in dem Artikel Formatierung von Texten in Webforms. Sie können den Hinweistext fett oder kursiv gestalten, Überschriften einbauen oder Links einfügen.
• CSS-Klasse:
  Hier haben Sie die bei einigen Elementen die Möglichkeit, die Darstellung zu beeinflussen, z. B. die Anzeigebreite. Weitere Erklärungen zu den CSS-Klassen finden Sie im Artikel Layout von Formularen gestalten.
• Pflichtfeld:
  Setzt man hier den Haken, muss das Feld ausgefüllt werden. Geschieht dies nicht, erhält man beim Absenden eine Fehlermeldung.
• Vorbelegung:
  Der Text, der standardmäßig in das Feld eingetragen sein soll. Dieser wird auch als Wert verwendet, d. h. wenn die/der Nutzerin/Nutzer das Feld nicht ausfüllt, wird dieser Wert beim Versenden des Formulars mit übertragen. Sie können an dieser Stelle auch Variablen verwenden, die z. B. das Datum automatisch an diese Stelle setzen. Weitere Informationen dazu finden Sie im Artikel Bedingungen und Variablen.
• Platzhalter:
  Blasser Text, der vor Eingabe des Nutzers im Eingabefeld steht, wird nicht als Wert verwendet. Sie können den Platzhalter als Ausfüllhilfe verwenden.
• Vorschläge:
  Diese Auswahlliste ist derzeit leer.
• Validierung:
  Bei dieser Auswahl legen Sie fest, in welchem Format ein Feld ausgefüllt werden soll, bzw. ob es eine Grenze für Datumswerte und Zahlen geben soll. Ausgewählt werden können „Datum“, „Email“, „Zahl“, „Regulärer Ausdruck“, „Postleitzahl“, „Anzahl der Zeichen“, „IBAN“, „BIC“ und „gleicher Wert“. Sie können eine alternative Fehlermeldung angeben, die anstelle der Standardfehlermeldung ausgegeben wird, falls die Eingabe nicht im richtigen Format angegeben wurde. Weitere Informationen zu den einzelnen Validatoren finden Sie im Artikel Validatoren.
• Maximale Länge:
  Begrenzt die Länge des möglichen Textes im Eingabefeld
• Vorauswahl: (bei allen Auswahlfeldern)
  Hiermit kann festgelegt werden, welche Option beim Laden des Formulars vorausgewählt ist. Dieser wird auch als Wert verwendet, wenn der Nutzer keine andere Option auswählt.
• Schreibgeschützt:
  Durch Aktivierung dieser Checkbox legen Sie fest, dass der Nutzer den Text im Feld nicht verändern kann. Diese Option ist nur sinnvoll, wenn Sie das Feld gleichzeitig vorbelegt haben.

Die Webforms-Menüleiste

Bei Klick auf „Formular“ im Formular-Strukturbaum wird die Webforms-Menüleiste angezeigt. Im Folgenden sind die einzelnen Bausteine von links nach rechts beschrieben:

Formular-Aktionen:

Jedes Formular muss mindestens eine Aktion enthalten!

Klicken Sie hier auf „Ablauf“ und erstellen entweder eine Mailversand-Aktion oder eine Formulardaten an eine URL senden-Aktion.

Sie können bei Bedarf weitere Mailversand-Aktionen hinzufügen.

Weitere Informationen und Erklärungen zum Mailversand finden Sie unter dem Link Formular-/ Mailversand und Mailtemplate.

Formular-Eingabefelder:

Eingabefeld:

Ein Eingabefeld ist ein einzeiliges Texteingabefeld, in das der/die Nutzer/Nutzerin eine Eingabe (Text) hineinschreiben kann.

Weiterhin kann man folgendes eintragen:

• CSS-Klasse: Hier können Sie durch die verschiedenen CSS-Klassen bestimmen, um welche Art von Eingabe es sich handeln soll z. B. „email“, „tel“ oder „date“, oder in welchem Format das Eingabefeld angezeigt werden soll, beispielsweise „schmal“ oder, „breit“.
  
  Verwenden Sie die CSS-Klasse „date“, dann nehmen Sie bitte nicht gleichzeitig eine Validierung mit „Datum“ vor, da es sonst zu Fehlern kommt.
  
  Weitere Erklärungen zu den CSS-Klassen finden Sie im Artikel Layout von Formularen gestalten.

Durch das Identity Management ist es möglich, die Eingabefelder, in die die TU-ID, der Vor- und Nachname und die Mailadresse des Nutzers eingetragen werden soll, automatisch füllen zu lassen. Weitere Informationen hierzu finden Sie in dem Artikel Webforms: Vorbelegung der Inputfelder mit IDM-Daten.

Textarea:

Die Textarea ist ein mehrzeiliges Texteingabefeld, das Zeilenumbrüche enthalten kann.

Es lässt sich hierbei zusätzlich zu den oben genannten allgemeinen Einstellungen Folgendes einstellen:

• Zeilen: Die Textarea lässt sich hiermit in mehrere Zeilen unterteilen
• Spalten: Die Textarea lässt sich hiermit in mehrere Spalten unterteilen
• CSS-Klasse: Hier können Sie auswählen, ob die Textarea „breit“ dargestellt werden soll. Wählen Sie nichts aus, wird sie in der Standardgröße angezeigt. Weitere Erklärungen zu den CSS-Klassen finden Sie im Artikel Layout von Formularen gestalten.

Einfachauswahl (Radio-Buttons):

Bei der Einfachauswahl handelt es sich um eine Auswahlmethode mit Radio-Buttons. Es kann immer nur ein Radio-Button angeklickt werden, nicht mehrere gleichzeitig. Es kann dabei folgendes eingestellt werden:

• CSS-Klasse: Hier können Sie durch die Auswahl der CSS-Klasse „nebeneinander“ bestimmen, dass die Radio-Buttons nebeneinander angezeigt werden sollen. Weitere Erklärungen zu den CSS-Klassen finden Sie im Artikel Layout von Formularen gestalten.

Optionen zuweisen:

Damit die Einfachauswahl vollständig ist, muss man ihr die auswählbaren Optionen zuweisen. Dies geschieht per Klick auf die Einfachauswahl, woraufhin oben in der Symbolleiste ein Punkt auftaucht. Klickt man auf diesen Punkt, bekommt die Einfachauswahl eine neue leere Option. Diese können Sie dann mit einer Beschriftung und einem Wert versehen.
Eine zweite Möglichkeit, eine Option zu erzeugen ist der rechte Mausklick auf die Einfachauswahl im Strukturbaum des Formulareditors. Dort muss dann „Neues Element darunter einfügen“ und „Option“ ausgewählt werden.

Wert:
Der Wert, der übertragen wird, wenn diese Option gewählt wurde. Dieser Wert kann von der Beschriftung abweichen. Sie können an dieser Stelle auch Variablen verwenden. Die Erklärung hierzu finden Sie im Artikel Bedingungen und Variablen.

Auswahlliste (Combobox):

Eine Auswahlliste ist eine Auswahl, bei der der/die Nutzer/Nutzerin eine Option aus einer vorgegebenen Menge auswählen kann. Die einzelnen Optionen werden in einer Drop-Down-Liste dargestellt.

Mehrfachauswahl (nicht empfohlen):
Wenn mehrere Möglichkeiten gleichzeitig ausgewählt werden können sollen. Wir empfehlen hierfür stattdessen das Eingabefeld „Mehrfachauswahl“ zu verwenden, da dies benutzerfreundlicher ist.

CSS-Klasse:
Hier können Sie durch die CSS-Klassen „schmal“, „breit“ und „viertel_spalte“ bestimmen, welches Format die Auswahlliste haben soll. Weitere Erklärungen zu den CSS-Klassen finden Sie im Artikel Layout von Formularen gestalten.

Mehrfachauswahl (Checkboxen):

Die Mehrfachauswahl ähnelt der Einfachauswahl. Der große Unterschied liegt darin, dass nun mehrere Optionen ausgewählt werden können.

CSS-Klasse:
Hier können Sie durch die Auswahl der CSS-Klasse „nebeneinander“ bestimmen, dass die Checkboxen nebeneinander angezeigt werden sollen. Weitere Erklärungen zu den CSS-Klassen finden Sie im Artikel Layout von Formularen gestalten.

Wert:
Der Wert, der übertragen wird, wenn diese Option gewählt wurde. Dieser Wert kann von der Beschriftung abweichen. Sie können an dieser Stelle auch Variablen verwenden. Die Erklärung hierzu finden Sie im Artikel Bedingungen und Variablen.

Datei:

Durch dieses Formularelement ist es dem Nutzenden möglich, Dateien mitzuschicken. Folgende Einstellungen können für diesen Dateiupload vorgenommen werden:

• Validierung:
  Die Validierung weicht etwas von der oben beschriebenen Validierung ab. Wird hier „Datei“ ausgewählt (voreingestellt), kann man folgendes bestimmen:
  • Fehlermeldung (optional): von der Standard-Fehlermeldung abweichende Meldung, die ausgegeben wird, wenn der Dateityp oder die Dateigröße nicht mit den geforderten übereinstimmt.
  • Erlaubte Dateitypen: hier kann ausgewählt werden, um was für einen Dateityp es sich bei der hochzuladenen Datei handeln darf. Gängige Bildtypen sind z. B. „*.jpg“ oder „*.png“
  • Maximale Dateigröße: Die maximale Dateigröße, welche die hochzuladende Datei nicht überschreiten darf, liegt bei 3000 KB (3 MB). Ein manuell gesetztes höheres Limit sorgt bei entsprechendem Datei-Upload für eine Fehlermeldung.

Verstecktes Feld:

Indem Sie versteckte Felder verwenden, fügen Sie Informationen in das Formular ein, die dem/der Benutzer/Benutzerin nicht angezeigt werden. Beim Absenden des Formulars werden diese Informationen zusammen mit denen der anderen Felder übertragen. Wird ein verstecktes Feld beispielsweise mit der Variable ${date} vorbelegt, so können Sie daran anschließend ablesen, wann das Formular aufgerufen wurde.

Wert:
In dieses Feld geben Sie den Inhalt des versteckten Felds ein. Dabei kann es sich auch um eine oder mehrere Variablen handeln oder um einen einfachen Text, wie zum Beispiel den Namen des Formulares. Nähere Informationen und Erklärungen zu Variablen finden Sie im Artikel Bedingungen und Variablen.

Paragraph:

Bei diesem Element handelt es sich um einen Textabsatz, der dem/der Besucher/Besucherin zwischen den Formularfeldern angezeigt wird. Dies können beispielsweise Hinweise oder Erläuterungen sein.

• Text:
  Hier wird der Text des Absatzes festgelegt.
• Format:
  Hier kann bestimmt werden, ob der gesamte Text fett und/oder kursiv dargestellt werden soll.
• CSS-Klasse
  Mit der Klasse „box highlighted“ erscheint der Absatz in einem farbigen Kasten, der ihn hervorhebt.

Zusätzlich kann der Text eines Paragraphen formatiert werden. Dazu müssen Sie die sogenannte Markdown-Syntax benutzen. Wie Sie diese nutzen können finden Sie in dem ArtikelFormatierung von Texten in Webforms.Sie können den Text des Paragraphen fett oder kursiv gestalten, Links oder Aufzählungen einfügen, Überschriften einbauen oder den Text als Codeblock formatieren.

Seitenumbruch:

Mithilfe des Seitenumbruchs haben sie die Möglichkeit, mehrseitige Formulare anzulegen. Dieses Formularelement kann an eine beliebige Position im Formular gesetzt werden. Alle Elemente die darauf folgen, werden auf der nächsten Seite angezeigt und sind über einen Weiter- bzw. Zurück-Button erreichbar. Soll ein/eine Nutzer/Nutzerin erst auf die nächste Seite gelangen, wenn er bestimmte Eingaben gemacht hat, können Sie dies mit dem Formularelement „Bedingung“ lösen.

Der „Weiter Text“ und der „Zurück Text“ haben die Standardardbelegung „Weiter“ bzw. „Zurück“. Sie müssen in diesen Felder also nur etwas eintragen, wenn Sie die Buttons davon abweichend beschriften möchten.

• Weiter Text:
  Text, den der Weiter-Button enthalten soll
• Zurück Text:
  Text, der auf dem Zurück-Button angezeigt wird.
• Validierungsskript:
  Hiermit können Sie die im Formular eingegebenen Daten validieren. Mehrere Felder lassen sich damit gleichzeitig prüfen und miteinander in Bezug setzen. Das Skript wird ausgeführt, sobald die/der Nutzerin/Nutzer die Formularseite wechselt oder das Formular absendet.
• Bedingung:
  Das Bedingungselement unterhalb eines Seitenumbruchs ermöglicht es, die Formularseite abhängig von der Benutzereingabe ein- oder auszublenden. Sie können diese anlegen, indem Sie einen Linksklick auf den Seitenumbruch im Formular-Strukturbaum machen. Daraufhin erscheint oben in der Leiste das Symbol für Bedingungen. Klicken Sie nun auf dieses Sybol, erscheint eine Bedingung im Formular-Strukturbaum unterhalb des Seitenumbruchs. Eine weitere Möglichkeit eine Bedingung hinzuzufügen ist, mit der rechten Maustaste auf den Seitenumbruch im Formular-Strukturbaum zu klicken. In dem dadurch erscheinenden Kontextmenü wählen Sie dann „Element darunter “einfügen, und dann „Bedingung“.

Gibt es mehrere Bedingungen pro Formularseite, werden diese in der Reihenfolge abgearbeitet, in der sie unter dem Seitenumbruch angeordnet sind. Trifft eine der Bedingungen zu, wird die Auswertung abgebrochen und die weiteren Bedingungen werden nicht mehr überprüft.

Weitere Informationen und Erklärungen zu dem Seitenumbruch finden Sie im Artikel Zusammenfassung und Seitenumbruch.

Weitere Informationen und Erklärungen zu den Bedingungen finden Sie im Artikel Bedingungen und Variablen.

Zusammenfassung:

Das Formularelement Zusammenfassung zeigt alle Eingaben, die die Person im Formular getätigt hat, zusammengefasst in einem Text zusammen.

Hier können neben den oben genannten Einstellungen folgende Einstellungen getätigt werden:

• Elemente:
  Hier können die Elemente des Formulars eingetragen werden, welche in die Zusammenfassung mit aufgenommen werden sollen.

Weitere Informationen und Erklärungen finden Sie im Artikel Zusammenfassung und Seitenumbruch.

Akkordeon

Um die Akkordeonfunktion eines Absatzes einzurichten, gehen Sie bitte wie folgt vor:

Gehen Sie im rechten Bereich des Webforms Absatzes auf den Tab „Optionen“. Hier aktivieren Sie mittels Anhaken entsprechender Option die Akkordeonfunktion.

Hinweis: Bitte beachten Sie, dass das Akkordeon nicht für mehrere Formularabsätze gedacht ist. Verwenden Sie höchstens ein Formular pro Seite!

Berechneter Wert:

Bei diesem Element handelt es sich um einen Wert, der nicht direkt von der Person eingegeben werden kann, sondern mittels eines JavaScripts aus den anderen Formularwerten berechnet wird.

CSS-Klasse:
Hier können Sie durch die CSS-Klassen „schmal“, „breit“ und „viertel_spalte“ bestimmen, welches Format die Auswahlliste haben soll. Weitere Erklärungen zu den CSS-Klassen finden Sie im Artikel Layout von Formularen gestalten.

JavaScript:
Hier können Sie mit Hilfe von JavaScript die gewünschte Funktion erstellen. Lesen Sie dazu den Artikel Berechneter Wert, Bedingungen und Variablen für nähere Informationen

Wert im Formular anzeigen:
Durch Aktivierung dieser Checkbox legen Sie fest, dass das Ergebnis der Berechnung im Formular angezeigt wird.

Sofortige Neuberechnung des Wertes im Browser:
Durch Aktivierung dieser Checkbox legen Sie fest, dass der Wert sofort neu berechnet wird, sobald der Anwender seine Eingaben ändert, die bei der Berechnung des Wertes verwendet werden. Die Berechnung erfolgt in diesem Fall browserseitig, das heißt ohne dass der Anwender das Formular absenden muss. Diese Checkbox müssen Sie auch aktivieren, wenn Sie den Wert einer Bedingung verwenden.

Bedingung:

Dieses Bedingungselement ermöglicht es Ihnen, den Zustand einzelner Formularelemente in Abhängigkeit zur Benutzereingabe zu verändern. Wie Sie Bedingungen einstellen können, finden Sie im Artikel Bedingungen und Variablen.

Layout:

Das Layout-Element fasst Formularelemente zu Layout-Gruppen zusammen. Fügen Sie das Layout-Element an einer sinnvollen Stelle zwischen zwei Formularelementen ein.

Dadurch werden jeweils die Formularelemente über und unter dem Layout-Element gruppiert und optisch durch Trennlinien voneinander getrennt.