Seitenvergleich

Titel:
Im Portal und in der App angezeigter Name des neuen Formulars

Beschreibung:
Optionales Feld. Der hier angegebene Text wird in der App unterhalb des Titels angezeigt und kann zum Beispiel Hinweise und Informationen für den ausfüllenden Benutzer enthalten.

E-Mail Versand nach Übertragung:
Optionales Feld. In diesem Feld kann eine Mailadresse hinterlegt werden, an die das Formular bei der Übermittlung automatisiert versendet werden soll. Ein Abruf des ausgefüllten Formulars über das Datenportal ist weiterhin möglich.

Feldwerte:
Über die Feldwerte werden die verschiedenen Formular-Bausteine festgelegt und in welcher Reihenfolge diese in der App angezeigt werden sollen.

Die Feldwerte werden im JSON Format angegeben und lassen sich über einige Parameter steuern.
Beispiel: {"id":"vorname","type":"text","label":"Vorname","required":true},

ID = interner Zuordnungsname (idealerweise identisch mit “label”. Darf nur einmalig im Formular vergeben sein.
type = Art des Bausteins. Eine Auflistung aller möglichen Formular-Bausteine finden Sie weiter unten auf dieser Seite.
label = Beschriftung des Feldes im Formular (Wird in einem leeren Feld im Baustein angezeigt und nach erfolgter Eingabe darüber.
help = Optionaler Hilfstext, der unter einem Baustein angezeigt werden kann
required = Angabe, ob das Feld ein Pflichtfeld sein soll. :true = ja / :false = nein

Die Feldwerte-Eingabe beginnt mit einer eckigen Klammer [ vor dem ersten Feld-Baustein und wird mit einer weiteren eckigen Klammer ] nach dem letzten Feld-Baustein geschlossen. Die einzelnen Bausteine werden mit einem Komma , voneinander getrennt.

Textfeld

Eingabe von kurzen Texten wie einzelnen Worten oder kurzen Sätzen. Es wird nur eine einzige Zeile angezeigt.

Type: text

Quellcode des Beispiels links:
{"id":"nachname","type":"text","label":"Nachname","required":true,"help":"Optionaler Hilfetext, der unter dem Feld angezeigt wird."},

Datumsfeld

Eingabe eines bestimmten Datums. Auf Mobilgeräten öffnet sich automatisch ein Kalenderfenster, um die Auswahl zu vereinfachen.

Type: date

Quellcode des Beispiels links:
{"id":"geburtsdatum","type":"date","label":"Geburtsdatum","required":false},

E-Mail

Eingabe einer Mailadresse. Auf Mobilgeräten wird eine angepasste Tastatur mit den wichtigsten Sonderzeichen und vorgeschlagene Domainendungen (.de, .com etc.) eingeblendet.

Type: email

Quellcode des Beispiels links:
{"id":"email","type":"email","label":"E-Mail-Adresse","required":false},

Uhrzeit

Eingabe einer bestimmten Uhrzeit. Auf Mobilgeräten öffnet sich automatisch ein gesondertes Fenster zur vereinfachten Eingabe der Uhrzeit. Voreingestellt ist die Zeit der Eingabe.

Type: time

Quellcode des Beispiels links:
{"id":"uhrzeit","type":"time","label":"Uhrzeit"},

Zahlenformat

Image Added

Eingabe einer Zahl. Auf Mobilgeräten wird eine abgespeckte Tastatur eingeblendet, die die Toucheingabe numerischer Zeichen erleichtert.

Type: number

Quellcode des Beispiels links:
{"id":"alter","type":"number","label":"Alter in Jahren"},

Einfachauswahl bis drei Elemente

Auswahloption, bei der nur eine Auswahl zulässig ist. (3 oder weniger Elemente werden als Radio-Group dargestellt)

Die verschiedenen Optionen werden mit dem JSON-Paramter “value” innerhalb von zwei eckigen Klammern [ ] übergeben.

Type: select

Quellcodes des Beispiels links:
{"id":"geschlecht","type":"select","label":"Geschlecht","options":
[
{"value":"m","label":"männlich"},
{"value":"w","label":"weiblich"},
{"value":"d","label":"divers"}
],

Einfachauswahl mehr als drei Elemente

Auswahloption, bei der nur eine Auswahl zulässig ist. (Mehr als 3 Optionen werden in einem Dropdown Menü dargestellt)
In diesem Falle ist keine Angabe über das “label” Feld notwendig.

Die verschiedenen Optionen werden mit dem JSON-Paramter “value” innerhalb von zwei eckigen Klammern [ ] übergeben.

Type: select

Quellcodes des Beispiels links:
{"id":"kleidergroesse","type":"select","label":"Kleidergröße","options":
[
{"value":"XS"},{"value":"S"},{"value":"M"},{"value":"L"},{"value":"XL"},{"value":"XXL"}
]
,"help":"Bei mehr als drei Optionen wird ein <select> verwendet."},

Mehrfachauswahl (Checkbox)

Über die Nutzung von Checkboxen lässt sich einfach eine Mehrfachauswahl erstellen.

Type: checkbox

Quellcode des Beispiels links:
{"id":"agb","type":"checkbox","label":"Ich habe die AGB gelesen und zur Kenntnis genommen"},

Textfeld mehrzeilig

Eingabe von längeren Texten. Das Textfeld passt sich der Größe des Textes an.

Type: textarea

Quellcode des Beispiels links:
{"id":"sonstiges","type":"textarea","label":"Haben Sie noch Anmerkungen oder Fragen?"},

Bild einfügen (einfach und mehrfach)

Öffnet die Mediathek des genutzten Gerätes bzw. ermöglicht den direkten Zugriff auf eine ggf. vorhandene Kamera am Gerät um ein Bild hinzuzufügen.

type: image

Quellcode des Beispiels links:
{"id":"img","type":"image","label":"Mehrere Bilder"},

durch das Hinzufügen des Parameters “max”, lässt sich die Anzahl der hinzuzufügenden Bilder beschränken.
Beispiel: {"id":"img-single","type":"image","label":"Ein einzelnes Bild","max":1},

Digitale Unterschrift

Über das Unterschriftfeld ist die Eingabe einer digitalen Unterschrift möglich. Wir empfehlen in diesem Fall die Nutzung eines Touchpens, um die Eingabe zu vereinfachen.

type: signature

Quellcodes des Beispiels links:

{"id":"signature","type":"signature","label":"Unterschrift"},

Mit dem Button “Nochmal” lässt sich die vorherige Eingabe löschen.