Wie lege ich ein Formular an?

Formulare sind ein nützliches Werkzeug in verschiedenen Kontexten, um Informationen von Benutzern zu erfassen oder Rückmeldungen zu erhalten. Sie dienen dazu, Informationen zu organisieren, Daten standardisiert zu erfassen und Kommunikationseffizienz zu verbessern. Hier zeigen wir Ihnen, wie Sie ein Formular anlegen können.

1. Klicken Sie in der Navigationsleiste auf Application
2. Wählen Sie die Application aus, welche ein Formular bekommen soll
3. Nachdem Sie auf die Application geklickt haben, öffnet sich die Übersichtsseite der Application
4. Klicken Sie auf Widgets im Abschnitt Einstellungen auf der rechten Seite
5. Sie gelangen auf die Übersichtsseite der Widgets
6. Klicken Sie auf den Button + Neu, um ein neues Widget anzulegen
7. Es öffnet sich das Fenster Create Widget
8. Geben Sie den Namen des Widgets ein
9. Wählen Sie bei Widget Type den Form aus
10. Klicken Sie auf + Add um das Widget hinzuzufügen
11. Klicken Sie auf den Namen des erstellten Formular-Widget

Formular Settings

1. Überprüfen Sie, ob das Zahnrad-Symbol oben rechts rot markiert ist. Wenn nicht, klicken Sie einmal darauf, um zu den Area-Einstellungen des Formulars zu gelangen
2. Finden Sie das Feld Area Settings in den Area-Einstellungen
3. Den Namen des Formulars können Sie im Feld Name ändern
4. Hinterlegen Sie ein Datenobjekt im Feld Data Source, wenn Sie Radiobuttons oder Dropdown Komponenten nutzen wollen, welche Bundles benötigen
5. Finden Sie das Feld Area Style Mapping in den Area-Einstellungen
6. Klicken Sie darin auf den Bereich Area Style, um das Dropdown Menü zu öffnen und einen Style auszuwählen
7. Sie können bei Bedarf eine Hintergrundfarbe im Feld Background color hinterlegen

Formular Optionen

1. Im Feld Mail receiver können Sie die E-Mail hinterlegen, welche die Daten des Formulars empfangen soll nachdem der Nutzer erfolgreich den Submit Button getätigt hat
2. Zusätzliche Empfänger, die eine Kopie der E-Mail erhalten sollen, können im Feld CC für Carbon Copy eingetragen werden
3. Sollen Empfänger hinzugefügt werden die für andere Empfänger nicht sichtbar sind, können diese im Feld BCC für Blind Carbon Copy eintragen werden
4. Im Feld Titel, können Sie den Titel der E-Mail eintragen
5. Im Feld Subject, können Sie den Betreff der E-Mail eintragen
6. Im Feld Infotext, können Sie eine Beschreibung oder eine Info für den E-Mail-Empfänger hinterlegen

Komponente

Eingabefeld (Input)

Eingabefelder in Formularen werden verwendet, um Benutzern die Möglichkeit zu geben, Daten oder Informationen einzugeben. Sie ermöglichen es Benutzern, Text, Zahlen, Datum, E-Mail-Adressen und andere Arten von Daten in entsprechende Felder einzutragen.

1. Klicken Sie auf + Element 
2. Wählen Sie die Komponente Input aus 
3. Klicken Sie auf die neue Imput Komponente, um die Einstellungen zu öffnen
4. Im Feld formStyle des Bereichs Style mapping können, Sie einen Formular-Style hinterlegen
5. Hinterlegen Sie bei Bedarf folgende Labels im jeweiligen Dropdown-Menü
   1. label: Wählen Sie eine Variable aus, um als Label im Input-Feld angezeigt zu werden und dem Nutzer den entsprechenden Wert zu vermitteln, der in das Feld eingetragen werden muss, wie beispielsweise "Name" oder "E-Mail"
   2. placeholder: Wählen Sie eine Variable aus, die als Platzhalter im Input-Feld angezeigt wird, solange noch kein Wert eingetragen wurde. Dies kann beispielsweise bei einem Datum "tt:mm:jj" sein
   3. informationText: Wählen Sie eine Variable aus, die einen Informationstext zum Eingabefeld beinhaltet. Dieser Text wird als Informationsicon am Ende des Eingabefeldes angezeigt
   4. errorMessageRequired: Wählen Sie eine Variable aus, die einen Fehlercode beinhaltet, der angezeigt wird, wenn der Nutzer das Eingabefeld fehlerhaft ausfüllt
6. Aktivieren Sie den requiredField Slide-Toggle, um das Feld als Pflichtfeld anzugeben. Nutzer die dieses Feld nicht/fehlerhaft ausfüllen erhalten die Error-Message

Mehrzeiliges Eingabefeld (Multiline Input)

Mehrzeilige Eingabefelder, auch als Textareas bezeichnet, sind in Webformularen und Anwendungen nützlich, um Benutzern die Möglichkeit zu geben, längeren Text oder mehrere Zeilen von Inhalten einzugeben. 

1. Klicken Sie auf + Element 
2. Wählen Sie die Komponente Multiple Input aus 
3. Klicken Sie auf die neue Multiple Input Komponente, um die Einstellungen zu öffnen
4. Im Feld formStyle des Bereichs Style mapping können, Sie einen Formular-Style hinterlegen
5. Hinterlegen Sie bei Bedarf folgende Labels im jeweiligen Dropdown-Menü
   1. label: Wählen Sie eine Variable aus, die als Label im Multiple-Input-Feld angezeigt wird und dem Nutzer den entsprechenden Wert vermittelt, den er in das Feld eintragen soll, wie beispielsweise "Nachricht"
   2. placeholder: Wählen Sie eine Variable aus, die als Platzhalter im Input-Feld angezeigt wird, solange noch kein Wert eingetragen wurde. Dies kann beispielsweise bei einem Datum "tt:mm:jj" sein
   3. informationText: Wählen Sie eine Variable aus, die einen Informationstext zum Eingabefeld beinhaltet. Dieser Text wird als Informationsicon am Ende des Eingabefeldes angezeigt
   4. errorMessageRequired: Wählen Sie eine Variable aus, die einen Fehlercode beinhaltet, der angezeigt wird, wenn der Nutzer das Eingabefeld fehlerhaft ausfüllt
6. Im Eingabefeld defaultRows, können Sie festlegen wie viele Zeilen als default angezeigt werden. Dadurch verändert sich die Höhe des Multiple Input Feldes
7. Aktivieren Sie den requiredField Slide-Toggle, um das Feld als Pflichtfeld anzugeben. Nutzer die dieses Feld nicht ausfüllen erhalten die Error-Message

Auswahlkästchen (Checkbox)

Checkboxen in Formularen dienen dazu, Benutzern die Möglichkeit zu geben, Optionen auszuwählen oder abzuwählen. Checkboxen werden beispielsweise oft verwendet, um Benutzer um Zustimmung zu bestimmten Bedingungen oder Nutzungsvereinbarungen zu bitten. 

1. Klicken Sie auf + Element 
2. Wählen Sie die Komponente Checkbox aus 
3. Klicken Sie auf die neue Checkbox Komponente, um die Einstellungen zu öffnen
4. Im Feld formStyle des Bereichs Style mapping können, Sie einen Formular-Style hinterlegen
5. Im Feld linkStyle haben Sie die Möglichkeit, den Stil für einen Link in der Variable festzulegen, sofern Ihre Variable einen Link enthält
6. Hinterlegen Sie bei Bedarf folgende Labels im jeweiligen Dropdown-Menü
   1. label: Bitte wählen Sie eine Variable aus, die als Text hinter der Checkbox ausgegeben wird und die Bedingung darstellt, weshalb man die Checkbox aktivieren oder deaktivieren sollte
   2. errorMessageRequired: Bitte wählen Sie eine Variable aus, die einen Fehlercode beinhaltet, der angezeigt wird, wenn der Nutzer die Checkbox aktivieren soll, um fortzufahren
7. Aktivieren Sie den requiredField Slide-Toggle, um das Feld als Pflichtfeld anzugeben. Nutzer welche die Checkbox nicht aktivieren erhalten die Error-Message

Radiobutton

Radiobuttons sind Formularelemente, die dem Nutzer ermöglichen, eine einzige Auswahl aus einer Liste von Optionen zu treffen. Radiobuttons werden oft verwendet, wenn nur eine Option aus einer Liste ausgewählt werden darf, beispielsweise bei Fragen zur Anrede mit Herr, Frau oder Divers.

1. Klicken Sie auf + Element 
2. Wählen Sie die Komponente Radiobutton aus 
3. Klicken Sie auf die neue Radiobutton Komponente, um die Einstellungen zu öffnen
4. Im Bereich Content Mapping können Sie aus einem verknüpften Datenobjekt bspw. ein Text-Bundle im Feld options hinterlegen
5. Im Feld formStyle des Bereichs Style mapping können, Sie einen Formular-Style hinterlegen
6. Hinterlegen Sie bei Bedarf folgende Labels im jeweiligen Dropdown-Menü
   1. label: Mit einer Variable können Sie eine Überschrift oder einen Zweck für den Radiobutton angeben, der über dem Radiobutton angezeigt wird
   2. customOptionLabel: Mit Hilfe einer Variable, kann dem Nutzer vermittelt werden, das er einen beliebigen Wert eintragen kann. Diese Variable kann gemeinsam mit dem customOption Feld angezeigt werden
   3. errorMessageRequired: Bitte wählen Sie eine Variable aus, die einen Fehlercode beinhaltet, der angezeigt wird, wenn der Nutzer keinen Radiobutton aktiviert hat
7. Geben Sie die Richtung im Feld alignment an in der die Optionen angezeigt werden
   1. Horizontal: Die Optionen werden nebeneinander ausgegeben
   2. Vertical: Die Optionen werden untereinander ausgegeben
8. Aktivieren Sie den cutomOption Slide-Toggle, um ein Feld für Eingaben des Nutzers bereitzustellen z. B. für Sonstiges
9. Aktivieren Sie den preSelected Slide-Toggle, um das erste Feld vorab auszuwählen 
10. Aktivieren Sie den requiredField Slide-Toggle, um die Auswahl einer Option als Pflicht anzugeben. Nutzer die keine Option auswählen erhalten die Error-Message

Dropdown

Ein Dropdown-Menü im Formular ist ein Feld, das dem Benutzer eine Liste von Optionen präsentiert, aus der er eine auswählen kann. Ein Dropdown-Menü ist besonders nützlich, wenn es viele Optionen gibt und der Benutzer nur eine auswählen soll. Es kann verwendet werden, um verschiedene Arten von Informationen einzugeben, wie beispielsweise die Länderauswahl.

1. Klicken Sie auf + Element 
2. Wählen Sie die Komponente Dropdown aus 
3. Klicken Sie auf die neue Dropdown Komponente, um die Einstellungen zu öffnen
4. Im Bereich Content Mapping können Sie aus einem verknüpften Datenobjekt bspw. ein Text-Bundle im Feld options hinterlegen
5. Im Feld formStyle des Bereichs Style mapping können, Sie einen Formular-Style hinterlegen
6. Hinterlegen Sie bei Bedarf folgende Labels im jeweiligen Dropdown-Menü
   1. label: Mit einer Variable können Sie angeben, um welche Abfrage es bei dem Dropdown Feld geht z. B. Sprache
   2. placeholder: Wählen Sie eine Variable aus, die als Platzhalter im Dropdown-Feld angezeigt wird, solange noch kein Wert eingetragen wurde. Dies kann beispielsweise bei einem Datum "tt:mm:jj" sein
   3. errorMessageRequired: Bitte wählen Sie eine Variable aus, die einen Fehlercode beinhaltet, der angezeigt wird, wenn der Nutzer keine Option im Dropdown ausgewählt hat
   4. removeSelection: Geben Sie hier eine Variable an, die dem Nutzer dazu dient deren Auswahl rückgängig zu machen z. B. Entfernen
7. Aktivieren Sie den preSelected Slide-Toggle, um das erste Feld vorab auszuwählen 
8. Aktivieren Sie den requiredField Slide-Toggle, um die Auswahl einer Option als Pflicht anzugeben. Nutzer die keine Option auswählen erhalten die Error-Message

Submit Button

Mit dem klick auf den Submit-Button werden die eingegebenen Daten, wenn diese fehlerfrei ausgefüllt wurden, aus dem Formular an den E-Mai-Empfänger übermittelt. 

1. Klicken Sie auf + Element 
2. Wählen Sie die Komponente Submit Button aus 
3. Klicken Sie auf die neue Submit Button Komponente, um die Einstellungen zu öffnen
4. Im Feld buttonStyle des Bereichs Style mapping können, Sie einen Buttonstyle hinterlegen
5. Hinterlegen Sie das Label, welches den Button-Text beinhaltet im Dropdown-Menü buttonText

Das könnte Sie auch Interessieren