Formbuilder - Formularbaukasten

Digitalisieren Sie Ihre Prozesse!

Mit dem Formbuilder können Benutzer mithilfe einer intuitiven Drag- und Drop-Schnittstelle Formulare erstellen. Der Formbuilder unterstützt eine Reihe von Formularfeldern und einige HTML-Tags.

Allgemeiner Aufbau des Formbuilder

• Dashboard >> Dieses Element befindet sich in der technischen Entwicklung <<

• Formbuilder

• Website-Module

• E-Mail Templates

• Einstellungen >> Dieses Element befindet sich in der technischen Entwicklung <<

Liste der nutzbaren Felder / Feldtypen

• Autovervollständigung

• Button

• Kontrollkästchengruppe

• Datumsfeld

• Datei hochladen

• Überschrift

• verstecktes Feld

• Zahlen-Feld

• Absatz

• Radio-Button-Gruppe

• Auswahl / Selectbox

• Textfeld

• Textbereich

• US Unterseite strait Programmierung

• E-Mail strait Programmierung

• ReCaptcha strait Programmierung

Allgemeiner Aufbau des Formbuilder

Formbuilder → Dashboard

In der Entwicklung: Auf dem Dashboard können Sie erkennen, wie oft die Formulare genutzt werden und wann es die letzten Änderungen daran gab. Auch die Anzahl der Prozess-Schritte ist in der Tabelle zu erkennen.

Formbuilder → Übersicht Formulare & Prozesse

In dieser Tabelle sehen Sie alle bereits konfigurierten Formulare. Sie sehen den Namen, das Erstellungs-Datum, das letzte Änderungsdatum und den Benutzer, der zulezt das Formular bearbeitet hat.

Über das Stift-Icon können Sie das Formular bearbeiten und über das Mülleimer-Icon können Sie das Formular löschen.

Es wird empfohlen, die Formulare nicht zu schnell zu löschen, denn sie können auch als Ausgangs-Vorlage für neue Formulare genutzt werden. Ob und wie Sie in die Website integriert werden, ist ein separates Thema. Hier in diesem Menüpunkt liegen alle Formulare, zunächst ohne eine Veröffentlichung.

Open

Über den Button NEU können Sie ein neues Formular anlegen. Im Folgenden wird das Beispiel ‘Antrag zur Eröffnung eines Kundenkontos’ näher betrachtet.

Im hellgrau hinterlegten Bereich ist der Ablaufplan der die einzelnen Eingabe-Schritte visualisiert.

Open

Ablaufplan

Die einzelnen Schritte, die die Person über das Formular ausfüllt, werden in einem chronologischen Ablaufplan hintereinander platziert. Sie können auch verschoben werden, und sind nach einer kurzen Aktualisierung der Seite wieder in der neuen Reihenfolge sichtbar. Die Schritte/ Seiten sind jeweils hell-violett gekennzeichnet.

Export/Import

Wenn Sie oben auf den Button Export/Import klicken, dann bekommen Sie einen Zugriff auf den gesamten JSON-Code (Code der Formularstruktur und der Default-Daten) Ihres Formulares.

Im Folgenden sehen Sie ein Beispiel:

Mit Hilfe dieses Codes können Sie vorhandenen Formular in neue Formulare kopieren. Dies ist ggf. eine gute Arbeitszeit-Ersparnis, die Sie nutzen können.

Die Grund-Konfiguration einer Seite wird im oberen Bereich durchgeführt. Erst danach kommt die Formular-Konfiguration.

Die einzelnen Elemente haben die folgende Funktionen:

Auf dem folgenen Bild sehen Sie die erste Seite des Formular-Beispiels im Frontend, also auf einer Website. Die Seiten des jeweiligen Formulares erscheinen in der Breadcrumb. Sie können einzelne Schritte in der Breadcrumb ein- und ausblenden.

Mit dem Button ‘weiter’, gelangt der Anwender zum nächsten Schritt. Die einzelnen Schritte sind (optional) bereits vorab in der Breadcrumb zu sehen.
Sie können das Beispiel in unserem Muster-Mandanten sichten: https://www1.internet-fachhandel.de/56/publish/ba409b3b_90bd_3967_f835d70192363cb9.cfm

Falls Sie spezielle Fragen dazu haben, so schreiben Sie uns gern eine E-Mail Anfrage an: redaktion@strait.de

Details zu den Feldtypen

1. Autovervollständigung

Bei diesem Feldtyp können Sie für häufig wiederkehrende Eingaben bereits vorher eine Eingabe tätigen. Die Werte werden dann vorgschlagen, sobald man mit dem Eintippen von Text beginnt.
Beispiel: Bereits bei der Eingabe des Buchstaben H wird das Wort Herr vorgeschlagen.

Konfiguration
Im Folgenden ist erklärt, wie der Feld-Typ Autovervollständigung im Backend konfiguriert werden kann.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel das Wort Name.

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt.

4. Platzhalter → Der Text, der hier eingetragen wird erscheint als hellgraue Eingabe im Formular. Er gibt meistens ein Beispiel an für das Wort, was abgefragt wird. Beispiel Max Mustermann

5. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

6. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann im Nachhinein verändert werden. Wichtig ist, dass dieser Name eindeutig ist.

7. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Optionen → Hier können Optionen für die Autovervollständigung eingetragen werden. Im Beispiel wurde das Wort Herr und Frau eingetragen. Sobald jemand im Formular den Anfangsbuchstaben H oder F eingibt, erscheint das Wort Herr bzw. Frau als Vorschlag.

9. Only accept a pre-defined Option → Falls Sie diese Checkbox wählen, so erlauben Sie nur wenige Optionen in der Eingabe.

2. Button

Hier ist ein Beispiel für einen individuellen Button im Frontend - also auf der Website. Dieser Button wurde mit dem Namen ‘Daten abschicken’ versehen.

Konfiguration

Im Folgenden ist erklärt, wie Buttons im Backend konfiguriert werden können.

1. Beschriftung → Hier tragen Sie die Beschriftung des Button ein

2. Typ → In diesem Fall wird der Typ Button zugeordnet

3. Style → Hier können Sie die farbige Optik des Button beeinflussen, die möglichen Styles beruhen auf Bootstrap.

4. Klasse → Hier geben Sie die optische Klasse an für den Button

5. Name → Dieser Name wird vom System vorgegeben. Er muss eindeutig sein, kann aber auf Wunsch überschrieben werden.

6. Wert → Hier können Sie einen Wert vorgeben, der beim Klick auf den Button übergeben wird.

7. Zugang → Hier können Sie Rollen definieren, die diesen Button ausführen können >> Diese Funktion befindet sich in der technischen Entwicklung <<

3. Kontrollkästchen-Gruppe

Hier ist ein Beispiel für eine Kontrollkästchen-Gruppe.

Da es sich um eine Gruppe von Checkboxen handelt, ist auch eine Mehrfach-Auswahl möglich. Im Beispiel gibt es auch noch die Besonderheit, dass unter Sonstiges selbst eine Eingabe mögich ist, wie z.B. Denkmal modernisieren als freie Eingabe.

Konfiguration

Im Folgenden ist erklärt, wie eine Kontrollkästchen-Gruppe im Backend konfiguriert werden kann.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel das Wort Name.

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt.

4. Platzhalter → Der Text, der hier eingetragen wird erscheint als hellgraue Eingabe im Formular. Er gibt meistens ein Beispiel an für das Wort, was abgefragt wird. Beispiel Max Mustermann

5. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

6. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann im Nachhinein verändert werden. Wichtig ist, dass dieser Name eindeutig ist.

7. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Sonstiges → Mit dem Anhaken dieser Checkbox wird dem Benutzer erlaubt, in das Formular mit einem Textfeld einen Freitext mit einer neuen Option ‘Sonstiges’ einzutragen.

9. Optionen → Hier können Optionen für die Checkboxen eingetragen werden. Im Beispiel wurden die Wörter Neubau, Renovierung und Modernisierung eingetragen.
   Vom Benutzer kann eine oder mehrere Optionen ausgewählt werden.
   Falls Sie den Benutzer zu einer Entscheidung ‘zwingen’ möchten, d.h. nur eine Einfach-Auswahl erlauben möchten, so wählen Sie bitte den Feldtyp Radio-Button-Gruppe aus. Dann ist eine Mehrfach-Auswahl nicht möglich.

10. Option hinzufügen → Mit diesem Button können Sie weitere Optionen für Checkboxen einfügen.

4. Datumsfeld

Mit diesem Feld können Sie ein Kalenderdatum optimal abfragen. Hier ist ein Beispiel auf einer Website.

Konfiguration

Im Folgenden ist erklärt, wie Datumsfelder im Backend konfiguriert werden können.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel das Wort Geburtsdatum.

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt.

4. Platzhalter → Der Text, der hier eingetragen wird erscheint als hellgraue Eingabe im Formular. Er gibt meistens ein Beispiel an für das Datum, welches abgefragt wird. Beispiel 09.03.1995

5. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

6. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann im Nachhinein verändert werden. Wichtig ist, dass dieser Name eindeutig ist, also nur 1x in dem Formular verwendet wird.

7. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Wert → Hier kann ein Wert für ein Datum eingetragen werden, dies wird übernommen, es sei denn, die Person, die das Formular ausfüllt überschreibt diesen Wert.

9. Typ → Hier ist das Datumsfeld vorausgewählt. Es gibt noch 2 weitere Optionen: time und datetime-local.

10. Min → Mindestwert z.B. bei Personen über 18 Jahre

11. Max → Maximalwert z.B. bei Höchstgrenzen vom Alter

12. Step → Schritte, die vorher konfiguriert werden können

5. Datei hochladen

>> Diese Funktion befindet sich in der technischen Entwicklung <<

6. Überschrift

Beispiel für eine Überschrift

Konfiguration

Im Folgenden ist erklärt, wie Datumsfelder im Backend konfiguriert werden können.

1. Beschriftung → Hier tragen Sie den Text der Überschrift ein

2. Typ → Hier geben Sie den Rang der Überschrift ein (

3. Klasse → Hier ist der Wert vorgegeben

4. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

7. Verstecktes Feld

>> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Zahlenfeld

Ein Zahlenfeld kann z.B. für eine Hausnummer genutzt werden oder für eine Kundennummer. Der Formbuilder prüft dann automatisch, ob eine Zahl eingegeben wird. Buchstaben sind beispielsweise nicht erlaubt und auch der Minimalwert und der Maximalwert kann angegeben werden.

Konfiguration

Im Folgenden ist erklärt, wie Zahlenfelder im Backend konfiguriert werden können.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel das Wort Hausnummer.

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt.

4. Platzhalter → Der Text, der hier eingetragen wird erscheint als hellgraue Eingabe im Formular. Er gibt meistens ein Beispiel an für die Hausnummer, die abgefragt wird. Beispiel 33

5. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

6. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann im Nachhinein verändert werden. Wichtig ist, dass dieser Name eindeutig ist, also nur 1x in dem Formular verwendet wird.

7. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Wert → Hier kann ein Wert für ein Datum eingetragen werden, dies wird übernommen, es sei denn, die Person, die das Formular ausfüllt überschreibt diesen Wert.

9. Typ → Hier ist das Datumsfeld vorausgewählt. Es gibt noch 2 weitere Optionen: time und datetime-local.

10. Min → Mindestwert z.B. bei Personen über 18 Jahre

11. Max → Maximalwert z.B. bei Höchstgrenzen vom Alter

12. Step → Schritte, die vorher konfiguriert werden können

9. Absatz

Ein Absatz kann dazu genutzt werden dem Benutzer eine kleine Anleitung zu zeigen. Beispiel: kurzer Einleitungstext für ein längeres Formular.

Konfiguration

Im Folgenden ist erklärt, wie der Feldtyp Absatz im Backend konfiguriert werden kann.

1. Inhalt → In diesm Bereich geben Sie den Text ein, der im Formular sichtbar ausgegeben wird. Sie können auch HTML Formatierungen einbauen.

2. Typ → Hier können Sie einen Typ / Formatierung auswählen. Es gibt 5 Auswahlmöglichkeiten: p; address; blockquote; canvas und outquote.

3. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

4. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

10. Radio-Button-Gruppe

Eine Radio-Button-Gruppe können Sie immer dann auswählen, wenn Sie vom Benutzer eine Pflicht-Auswahl verlangen möchten. In unsererm Beispiel wird eine Kleidergröße abgefragt, dabei ist eine Entscheidung zwischen den Optionen Pflicht.

Konfiguration

Im Folgenden ist erklärt, wie eine Radio-Button-Gruppe im Backend konfiguriert werden kann.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel das Wort Kleidergröße.

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt.

4. Inline → Wenn Sie hier einen Haken setzen, so werden die Optionen in einer Reihe dargestellt.

5. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

6. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann im Nachhinein verändert werden. Wichtig ist, dass dieser Name eindeutig ist, also nur 1x im Formular verwendet wird.

7. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Sonstige → Wenn Sie hier den Haken setzen, so kann der Benutzer eine Option auswählen, die er sich selbst ausgedacht hat. Wenn das Feld aktiviert wäre könnte der Benutzer beispielsweise angeben, dass er den Hoodie gerne in der Kinderkleidergröße 164 haben möchte.

9. Optionen → Hier können Sie die möglichen Auswahl-Optionen eintragen. Diese werden dann alle mit einem Radio-Button versehen. Es kann eine dieser Optionen vom Benutzer ausgewählt werden. Eine Mehrfachauswahl ist nicht erlaubt. Wenn Sie das ermöglichen möchten, so wählen Sie als Feldtyp bitte die Kontrollkästchen-Gruppe aus.

11. Auswahl / Selectbox

In unserem Beispiel wird mit der Auswahl bzw. mit der Selectbox die Art eines Bauvorhaben abgefragt.

Konfiguration

Im Folgenden ist erklärt, wie eine Auswahl / Selectbox im Backend konfiguriert werden kann.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel die Wörter Art des Bauvorhaben.

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt. Beispiel: Um welches Bauvorhaben handelt es sich?

4. Platzhalter → Der Text, der hier eingetragen wird erscheint als hellgraue Eingabe im Formular. Er gibt meistens ein Beispiel an für das Wort, was abgefragt wird

5. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

6. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann hier abgeändert werden.

7. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Erlaubt mehrere Auswahlen → Wenn diese Checkbox gesetzt ist, dann kann in der Selectbox mit der Shift Taste eine Mehrfachauswahl gemacht werden. Dies ist im Standard deaktiviert.

9. Optionen → Hier können Sie die möglichen Auswahl-Optionen eintragen. Diese werden dann alle in die Auswahl-Box bzw. in die Selctbox geschrieben. Die Reihenfolge ist im Backend und im Frontend gleich.

10. Option hinzufügen → mit dem Klick auf diesne Button können Sie weitere Optionen zur Auswahl hinzufügen.

12. Textfeld

Hier sind Beispiele für Textfelder. In den meisten Formularen sind Textfelder die häufisten Feldtypen. Sie können für fast alle offenen Fragen genutzt werden.

Konfiguration

Hier ist erklärt, wie Textfelder konfiguriert werden können.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel die Wörter Name des Kunden.

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt.

4. Platzhalter → Der Text, der hier eingetragen wird erscheint als hellgraue Eingabe im Formular. Er gibt meistens ein Beispiel an für das Wort, was abgefragt wird. Beispiel Max Mustermann

5. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

6. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann hier abgeändert werden.

7. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Wert → Hier kann ein Wert für das Feld vorgegeben werden. Dieser Wert wird später übergeben, es sei denn, derjenige, der das Formular ausfüllt überschreibt diesen Wert.

9. Typ → Hier kann der Feldtyp im Nachhinein noch geändert werden.

10. Maximale Länge → Hier kann die maximale Länge der Eingabe festgelegt werden z.B. 250 Zeichen. Dies kann ein Element für den Schutz vor Bots sein.

13. Textbereich

In diesem Beispiel wird der Feldtyp Textbereich verwendet. Er ermöglicht eine Abfrage von längeren Sätzen. Hier werden beispielsweise nähere Angaben zum Bauvorhaben abgefragt.

Konfiguration

Hier ist erklärt, wie ein Textbereich konfiguriert werden kann.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel die Wörter weitere Angaben zum Bauvorhaben

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt.

4. Platzhalter → Der Text, der hier eingetragen wird erscheint als hellgraue Eingabe im Formular. Er gibt meistens ein Beispiel an für das Wort, was abgefragt wird. Beispiel Max Mustermann

5. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen

6. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann hier abgeändert werden.

7. Zugang → Es werden Rollen definiert, die für dieses Feld zutreffen >> Diese Funktion befindet sich in der technischen Entwicklung <<

8. Wert → Hier kann ein Wert für das Feld vorgegeben werden. Dieser Wert wird später übergeben, es sei denn, derjenige, der das Formular ausfüllt, überschreibt diesen Wert.

9. Typ → Hier kann der Feldtyp im Nachhinein noch geändert werden. Es gibt 3 Möglichkeiten: Textbereich; tinymce und quill

10. Maximale Länge → Hier kann die maximale Länge der Eingabe festgelegt werden z.B. 2.500 Zeichen. Dies kann ein Element für den Schutz vor Bots sein.

11. Reihen → Hier kann die Anzahl der Zeilen, beim ersten Einblenden des Feldes festgelegt werden.

14. Unterseite

programmiert durch strait

Die Unterseite ist wichtig für ‘multiple’ Abfragen. Mit Hilfe dieses Feldtypen kann eine Ergänzung von Datensätzen vorgenommen werden. Es können so beispielsweise mehrere Personen angegeben werden, die jeweils mehrere Textfelder umfassen.

Konfiguration

Hier ist erklärt, wie eine Unterseite konfiguriert werden kann.

1. Erforderlich → Bei der Unterseite sollte der Haken hier nicht gesetzt werden.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel die Wörter Abholberechtigte Personen

3. Name → hier tragen Sie die ID/KEY der Unterseite ein, die durch dieses Feld automatisch aufgerufen wird. Auf der Unterseite können Sie schließlich die Formularfeler konfigurieren. Die Unterseite ist i.d.R. kein Bestandteil der Breadcrumb, da sie außerhalb des Workflow liegt.

4. Interner Be… → Hier wird der interne Bezeichner der Unterseite eingetragen.

5. Anzahl Dire… → Anzahl der direkt angezeigten Elemente

6. Max. Anzahl → so oft kann die Schleife mit der Unterseite maximal durchlaufen werden

7. Button-Text → Hier können Sie den Button beschriften, der die Schleife mit der Unterseite auslösen soll.

8. Button-CSS… → Hier wird die Formatierung des Button eingetragen. Beispiel: btn btn-secondary

15. E-Mail

programmiert durch strait

Dieses Feld ist ein Eingabe-Feld für E-Mail Adressen. Dieses sollten Sie immer dann verwenden, wenn Sie E-Mail Adressen in einem Formular abfragen möchten.
Der Formbuilder prüft dann automatisch bei der Eingabe von Inhalten, ob es sich tatsächlich um eine E-Mail Adresse handelt.

Konfiguration

Im Folgenden ist erklärt, wie das Feld konfiguriert werden kann.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel: E-Mail Adresse

3. Hilfetext → Hier können Sie einen Hilfstext (z.B. eine kurze Anleitung) eintragen. Dieser Text wird mit einem kleinen i (Info-Icon) im fertigen Formular dargestellt.

4. Name → Jedes Feld im Formular muss einen eindeutigen Namen haben, dieser wird bereits vorgegeben und kann hier abgeändert werden.

5. Zugang → Anzahl der direkt angezeigten Elemente

6. Wert → Hier kann ein Wert für das Feld vorgegeben werden. Dieser Wert wird später übergeben, es sei denn, derjenige, der das Formular ausfüllt überschreibt diesen Wert.

7. Klasse → Hier wird die CSS (Cascading Style Sheet) Klasse angegeben. Damit können Sie die Optik und die Anordnung (z.B. Spaltigkeit) der Felder im Formular beeinflussen.

16. ReCaptca

programmiert durch strait - Google ReCaptcha

Sie können mit diesem Element das Google ReCaptcha in Ihr Formular einbauen. Dies ist ein Sicherheitselement um bei der Formulareingabe zu prüfen, ob es sich

Konfiguration

Im Folgenden ist erklärt, wie das Feld ‘ReCaptcha’ konfiguriert werden kann.

1. Erforderlich → In der ersten Zeile geben Sie an, ob es sich um ein Pflichtfeld handeln soll, d.h. ob eine Eingabe erforderlich ist.

2. Beschriftung → Hier geben Sie die Überschrift des Feldes an, in diesem Beispiel: ReCaptcha

3. Public Key → Von Google bekommen Sie einen Public Key, diesen tragen Sie hier ein.

4. Private Key → Von Google bekommen Sie einen Private Key, diesen tragen Sie hier ein.