Formular-Builder

Einführung

Der Formular-Builder ist ein zentraler Bestandteil von iform4u. Hier werden Formulare erstellt und aktualisiert. Der Formular-Builder bietet die notwendigen Werkzeuge zum Hinzufügen und Entfernen von Feldern sowie anderen HTML-Elementen.

Benutzeroberfläche

Die Benutzeroberfläche des Formular-Builders ist in drei Bereiche unterteilt: Links die Formularfelder, rechts der Theme-Designer und in der Mitte die Formularvorschau.

Das linke Panel hat drei Registerkarten:

• Die Registerkarte „Felder“ zeigt alle Felder und Elemente an, die zum Formular hinzugefügt werden können. Ziehen Sie sie einfach per Drag-and-Drop in den rechten Bereich.
• Die Registerkarte „Einstellungen“ ermöglicht es, den Formularnamen, das Layout des Formulars (Position der Labels) festzulegen und alle Felder zu deaktivieren.
• Die Registerkarte „Code“ zeigt in Echtzeit den HTML-Code, der mit dem Formular-Builder generiert wird. Von hier aus können Sie die ID jedes Elements erkennen, um das Formular auf fortgeschrittene Weise zu bearbeiten. Eine „Kopieren“-Schaltfläche ermöglicht es, den gesamten Quellcode einfach zu kopieren.

Der mittlere Bereich ist die Formularvorschau, von der aus Sie jedes der Komponenten bearbeiten können.

Das rechte Panel ist der Theme-Designer, mit dem Sie das Erscheinungsbild Ihres Formulars anpassen können:

• Hintergründe: Ändern Sie den Hintergrund verschiedener Elemente in Ihrem Formular.
• Typografie: Wählen Sie Schriftart, Stil, Größe und Farbe aller Textelemente in Ihrem Formular.
• Ränder: Legen Sie die Dicke, den Stil und die Farbe der Ränder um bestimmte Elemente in Ihrem Formular fest.
• Schatten: Fügen Sie einen Schatten um Ihr Formular hinzu oder entfernen Sie ihn.
• Schaltflächen: Ändern Sie den Text der Absenden-Schaltfläche.
• Und vieles mehr!

- Ein Feld hinzufügen

Es gibt zwei Möglichkeiten, ein Feld hinzuzufügen:

1. Indem Sie auf ein Widget im linken Panel klicken. Das ist alles! Die Formularkomponente erscheint in Ihrem Formular, unterhalb aller anderen Komponenten.
2. Oder, wenn Sie ein Feld an einer bestimmten Position hinzufügen möchten:
   • Klicken Sie auf ein Widget im linken Panel und ziehen Sie es in den rechten Bereich.
   • Wenn Sie den aktiven Bereich des Formular-Builders betreten, wird eine Box angezeigt, die angibt, wo das Feld platziert wird.
   • Lassen Sie die Schaltfläche los, sobald es an der gewünschten Stelle ist.

- Ein Feld bearbeiten

Um ein Feld zu bearbeiten:

1. Klicken Sie auf das zu bearbeitende Feld, und ein Popover erscheint mit Feldinformationen.
2. Bearbeiten Sie die Informationen entsprechend Ihren Anforderungen.
3. Klicken Sie auf „Speichern“.

Hinweis: Durch Drücken von ESC wird das Popover geschlossen.

- Felder neu anordnen

Um ein Feld (Komponente) neu anzuordnen:

1. Klicken und halten Sie eine Komponente.
2. Ziehen Sie die Komponente nach oben oder unten entsprechend Ihren Anforderungen.
3. Je nachdem, wohin Sie die Komponente ziehen, erscheint eine aktive Zone, in der die Komponente platziert wird.
4. Lassen Sie die Komponente an der gewünschten Stelle los.

- Felder ziehen, um Spalten zu erstellen

Um mit einem Feld (Komponente) Spalten zu erstellen:

1. Klicken Sie auf ein Widget im linken Panel und ziehen Sie es in den Formular-Builder-Bereich.
2. Ziehen Sie es nach links oder rechts von einem bestehenden Feld.
3. Ein Rahmen zeigt an, wo das Feld platziert wird.
4. Lassen Sie das Widget an der gewünschten Stelle los.

Innerhalb des Formular-Builders können Sie vorhandene Felder in die „Spalten-Drop-Zone“ ziehen – der Builder passt dann automatisch die Größe aller Felder innerhalb der Drop-Zone an, um Spalten gleicher Breite zu erstellen.

Sie können auf diese Weise bis zu vier Spalten erstellen. Es ist jedoch möglich, Formulare mit bis zu 12 Spalten zu gestalten, die perfekt in den verfügbaren Platz Ihrer Website passen, indem Sie die Funktion Container CSS Klasse verwenden.

- Ein Feld kopieren

Um ein Feld (Komponente) zu kopieren:

1. Klicken und halten Sie eine Komponente.
2. Klicken Sie im Popover-Fenster auf die Schaltfläche „Kopieren“.

Das kopierte Feld erscheint direkt unter dem Originalfeld.

- Ein Feld löschen

Um ein Feld (Komponente) zu löschen:

1. Klicken und halten Sie eine Komponente.
2. Ziehen Sie sie aus der aktiven Zone heraus.
3. Lassen Sie sie los.

Die Komponente verschwindet daraufhin.

- Feld-ID kopieren

Um die Feld-ID zu kopieren, folgen Sie diesen Schritten:

1. Klicken und halten Sie eine Komponente.
2. Klicken Sie auf die drei vertikalen Punkte (im Popover-Kopfbereich).
3. Klicken Sie auf „ID kopieren“.

Jetzt können Sie die ID an anderer Stelle einfügen, z. B. in eine benutzerdefinierte E-Mail-Nachricht oder ein CSS-Design.

Grundlegende Formulareinstellungen

Durch Klicken auf die Registerkarte „Einstellungen“ des Formular-Builders gelangen Sie zu einer sehr einfachen Version der Formularkonfiguration. Von hier aus können Sie:

1. Den Formularnamen ändern: Der Formularname dient dazu, das Formular auf den Verwaltungsseiten zu erkennen und wird auch als Titel der öffentlichen Formularseite bei iform4u angezeigt.
2. Das Formularlayout ändern: Das Formularlayout basiert auf Bootstrap CSS und wird verwendet, um die Position der Labels im Formular zu bestimmen.
   • Das vertikale Layout zeigt die Feldlabels oben an,
   • das horizontale Layout zeigt die Labels auf der linken Seite des Feldes an und
   • das Inline-Layout blendet die Labels aus und zeigt die Felder nebeneinander an. Zum Beispiel können Sie es für ein E-Mail-Registrierungsformular verwenden, um ein E-Mail-Feld und eine Schaltfläche nebeneinander anzuzeigen.
3. Formularelemente deaktivieren: Ermöglicht es, alle Formularfelder zu deaktivieren. Dies ist eine erweiterte Option, die nützlich sein kann, wenn Sie planen, mit dem Formular von einer externen JavaScript-Datei aus zu interagieren.

Diese grundlegenden Optionen sind eng mit dem Formular-Builder verbunden. Es gibt jedoch weitere erweiterte Einstellungsoptionen, die im Formular-Manager zugänglich sind.

Feldeinstellungen

Jedes Formularfeld verfügt über viele Konfigurationsoptionen, zum Beispiel das Label, den Standardwert, die CSS-Klasse usw. Um ein Feld zu konfigurieren, gehen Sie zur Vorschau und klicken darauf.

Konfigurationsoptionen

Im Folgenden sind alle Konfigurationsoptionen in alphabetischer Reihenfolge aufgeführt. Nicht alle Optionen sind für alle Felder verfügbar. Verwenden Sie diese Liste als Referenz, wenn Sie Probleme haben.

- Akzeptieren:

Diese Option ist im Feld „Datei-Upload“ verfügbar. Damit können Sie den Typ der Dateien einschränken, die das Feld akzeptieren kann. Beachten Sie Folgendes:

• Sie müssen die Dateiendungen mit einem Punkt beginnen und durch Kommas trennen.
• Standardmäßig werden alle Dateien validiert und es werden nur Bilddateien mit den Endungen „.gif, .jpg, .png“ akzeptiert.
• Um beispielsweise Textdateien zu akzeptieren, können Sie diese Option auf „.doc, .docx, .txt“ ändern.
• Wenn Sie alle Dateitypen akzeptieren möchten, lassen Sie dieses Feld leer.
• Diese Option aktiviert das Attribut „accept“ aus dem HTML5-Standard, sodass die Feldvalidierung sowohl auf der Clientseite (Browser) als auch auf der Serverseite durchgeführt wird.

- Alias:

Mit der Alias-Option können Sie WebHook-Benachrichtigungen mit dem Feldalias anstelle des Feldnamens senden. Beispielsweise können wir POST-Daten mit „name“ oder „age“ anstelle von „text_0“ oder „number_0“ erneut senden.

- Kontrollkästchen:

Die Option „Kontrollkästchen“ ist nur in Kontrollkästchenfeldern verfügbar und wird verwendet, um Kontrollkästchen zur Komponente hinzuzufügen.

Beispiel: Öffnen Sie den „Bulk-Editor“, fügen Sie die folgenden „Kontrollkästchen“ hinzu und klicken Sie auf „Speichern“:

Erste Wahl|1
Zweite Wahl|2|ausgewählt
Dritte Wahl|3
Vierte Wahl|4|ausgewählt
Fünfte Wahl|5

Die Formularvorschau zeigt eine Kontrollkästchenkomponente mit 5 Kontrollkästchen: Erste Wahl, Zweite Wahl, Dritte Wahl, Vierte Wahl und Fünfte Wahl. Die Kontrollkästchen „Zweite Wahl“ und „Vierte Wahl“ werden standardmäßig ausgewählt. Wenn der Benutzer das Formular ohne Änderungen einreicht, werden die Werte 2 und 4 gesendet.

- DNS prüfen:

Diese Option weist die Anwendung an, im Prozess der E-Mail-Feldvalidierung zu überprüfen, ob die E-Mail-Domain tatsächlich existiert und über „A“- und „MX“-Einträge verfügt.

Vorsicht! Dies ist eine erweiterte Option und sollte mit Vorsicht verwendet werden. Die Überprüfung kann aufgrund eines Problems mit den DNS-Servern fehlschlagen, selbst wenn es sich um eine gültige E-Mail handelt. Standardmäßig ist diese Option deaktiviert.

- CSS-Klasse:

Ermöglicht das Hinzufügen einer oder mehrerer CSS-Klassen zum Formularfeld.

- Container-CSS-Klasse:

Ermöglicht das Hinzufügen einer oder mehrerer CSS-Klassen zum Container der gesamten Komponente.

Sie können mehrspaltige Formulare erstellen, indem Sie die Klasse col-xs-* (das Sternchen steht für die Anzahl der Spalten zwischen 1 und 12) definieren.

Beispiel:

Wenn Sie zwei Felder in zwei Spalten platzieren möchten, müssen Sie Folgendes tun:

1. Fügen Sie der Container-CSS-Klasse des ersten Feldes „col-xs-6“ hinzu.
2. Fügen Sie der Container-CSS-Klasse des zweiten Feldes „col-xs-6“ hinzu.

In diesem Beispiel verwenden wir die vordefinierten CSS-Klassen „no-padding“, um das von Bootstrap CSS hinzugefügte Padding zu entfernen. Sie können diese Klassen hinzufügen oder weglassen, je nach Ihrem Design. Wenn nicht, können Sie der Container-CSS-Klasse der anderen Felder „col-xs-12“ hinzufügen, um das gleiche Padding für jedes Feld beizubehalten.

Wichtig! Weitere Informationen finden Sie in der Bootstrap CSS-Dokumentation.

Hinweis:

• Standardmäßig haben alle Felder außer der Schaltfläche die Klasse: form-group. Diese Klasse kann nicht bearbeitet werden.
• Standardmäßig hat das Schaltflächenfeld die Klasse: form-action. Diese Klasse kann nicht bearbeitet werden.

- Benutzerdefinierte Attribute:

Sie können benutzerdefinierte Attribute zu einem Feld hinzufügen. Diese Attribute bestehen aus zwei Teilen: dem Attributnamen und dem Attributwert. Diese Funktion ermöglicht es Ihnen, barrierefreiere Formulare zu erstellen, insbesondere weil Sie damit Folgendes hinzufügen können:

• Datenattribute: Nützlich, um Formularfelder in JavaScript-Bibliotheken zu integrieren.
• Aria-Attribute: Nützlich, um Formularfelder besser zu beschreiben und eine höhere Zugänglichkeit zu bieten.

- Standardwert:

Sie können einem Feld einen Standardwert hinzufügen. Dieser Wert wird standardmäßig angezeigt, kann jedoch vom Benutzer geändert werden. Wenn der Benutzer das Formular einreicht, ohne den Standardwert zu ändern, wird dieser Wert gesammelt, um die Einreichung zu verarbeiten.

- Deaktiviert:

Sie können ein Feld deaktivieren, wenn Sie möchten, dass es dem Benutzer angezeigt wird, aber nicht bearbeitet werden kann (beachten Sie, dass Sie auch ein verstecktes Feld deaktivieren können). Im Gegensatz zur Option „Schreibgeschützt“ wird ein deaktiviertes Feld nicht an den Server gesendet. Das heißt, die in einem deaktivierten Feld gespeicherten Informationen werden nicht empfangen und erscheinen daher nicht im Einreichungsmanager.

- Feldgröße:

Ein Textbereichsfeld erlaubt die Konfiguration seiner Größe. Die Größe muss eine ganze Zahl sein und gibt die Anzahl der angezeigten Zeilen an, also die Höhe des Feldes. Standardmäßig beträgt sie 3.

- Hilfetext:

Der hier eingegebene Text wird unterhalb des Feldes angezeigt und häufig verwendet, um den Benutzern Anweisungen zu geben, was sie eingeben sollen.

- Platzierung des Hilfetextes:

Mit diesem Dropdown-Menü können Sie den Hilfetext über oder unter das Formularfeld verschieben.

- Inline:

Die Inline-Option ist bei Kontrollkästchenfeldern und Optionsfeldern verfügbar und wird verwendet, um die vertikale Position der Kontrollkästchen oder Optionsfelder in eine horizontale Position zu ändern.

- Eingabetyp:

Viele Felder ermöglichen es Ihnen, den Eingabetyp zu ändern, um den Typ der Daten zu spezifizieren, die Sie empfangen möchten. Beispielsweise kann ein Textfeld einen Eingabetyp „URL“ haben, um sicherzustellen, dass der eingegebene Text eine absolute URL ist, die mit „http“ beginnt.

- Nur Ganzzahlen:

Sie können diese Option aktivieren, wenn der Wert dieses Feldes nur eine Ganzzahl sein soll. Gibt der Benutzer eine Gleitkommazahl ein, wird das Formular nicht verarbeitet und stattdessen ein Validierungsfehler angezeigt.

- Muster für Ganzzahlen:

Dies ist eine erweiterte Option des Zahlenfeldes, die es Ihnen ermöglicht, den regulären Ausdruck anzupassen, der nur ganze Zahlen (0-9) akzeptiert und im Prozess der Formularvalidierung verwendet wird. Der standardmäßig verwendete reguläre Ausdruck lautet: /^\s[+-]?\d+\s$/.

- Label

Es ist die häufigste Methode, den Benutzern mitzuteilen, welchen Wert sie in das Feld eingeben sollen. Es wird normalerweise oben am Feld angezeigt, Sie können diese Position jedoch durch Ändern des Formularlayouts ändern.

- CSS-Klasse des Labels:

Erlaubt das Hinzufügen einer oder mehrerer CSS-Klassen zum Label. Beachten Sie, dass Sie, wenn Sie ein Label ausblenden möchten, die CSS-Klasse „sr-only“ von Bootstrap 3 hinzufügen können.

Hinweis: Standardmäßig verfügen alle Felder über die CSS-Klasse „control-label“. Es wird empfohlen, diese nicht zu entfernen.

- Mindestdatum:

Sie können ein Datum als Mindestdatum definieren, das im Validierungsprozess des Feldes berücksichtigt wird. Gibt der Benutzer ein früheres Datum ein, wird das Formular nicht gesendet und stattdessen ein Validierungsfehler angezeigt. Wenn diese Option nicht definiert ist, existiert diese Einschränkung nicht.

Das Datum muss folgendes Format einhalten: yyyy-mm-dd (HTML5-Standardformat) für statische Daten. Sie können auch Tags verwenden, um relative Daten zu validieren:

• {today}: Heute ist das Mindestdatum.
• {today:+1}: Morgen ist das Mindestdatum.
• {today:-1}: Gestern ist das Mindestdatum.

- Höchstdatum:

Sie können ein Datum als Höchstdatum definieren, das im Validierungsprozess des Feldes berücksichtigt wird. Gibt der Benutzer ein späteres Datum ein, wird das Formular nicht gesendet und stattdessen ein Validierungsfehler angezeigt. Wenn diese Option nicht definiert ist, existiert diese Einschränkung nicht.

Das Datum muss folgendes Format einhalten: yyyy-mm-dd (HTML5-Standardformat) für statische Daten. Sie können auch Tags verwenden, um relative Daten zu validieren:

• {today}: Heute ist das Höchstdatum.
• {today:+1}: Morgen ist das Höchstdatum.
• {today:-1}: Gestern ist das Höchstdatum.

- Mindestzahl:

Sie können eine Ganzzahl oder eine Gleitkommazahl als Mindestwert definieren, die im Validierungsprozess des Feldes berücksichtigt wird. Gibt der Benutzer eine kleinere Zahl ein, wird das Formular nicht gesendet und stattdessen ein Validierungsfehler angezeigt. Wenn diese Option nicht definiert ist, existiert diese Einschränkung nicht.

- Höchstzahl:

Sie können eine Ganzzahl oder eine Gleitkommazahl als Höchstwert definieren, die im Validierungsprozess des Feldes berücksichtigt wird. Gibt der Benutzer eine größere Zahl ein, wird das Formular nicht gesendet und stattdessen ein Validierungsfehler angezeigt. Wenn diese Option nicht definiert ist, existiert diese Einschränkung nicht.

- Mindestgröße:

Sie können eine Ganzzahl als Mindestgröße definieren, die im Prozess der Feldvalidierung berücksichtigt wird. Wenn der Benutzer eine Datei mit einer kleineren Größe als der definierten hochlädt, wird das Formular nicht gesendet, und stattdessen wird ein Validierungsfehler angezeigt. Wenn diese Option nicht definiert ist, existiert diese Einschränkung nicht.

Die Ganzzahl repräsentiert die Anzahl der erlaubten Bytes. Zum Beispiel, Mindestgröße: 5242880 (resultierend aus der Multiplikation von 1024 x 1024 x 5), bedeutet, dass die Mindestdateigröße 5 MB beträgt.

- Höchstgröße:

Sie können eine Ganzzahl als Höchstgröße definieren, die im Prozess der Feldvalidierung berücksichtigt wird. Wenn der Benutzer eine Datei mit einer größeren Größe als der definierten hochlädt, wird das Formular nicht gesendet, und stattdessen wird ein Validierungsfehler angezeigt. Wenn diese Option nicht definiert ist, existiert diese Einschränkung nicht.

Die Ganzzahl repräsentiert die Anzahl der erlaubten Bytes. Zum Beispiel, Höchstgröße: 5242880 (resultierend aus der Multiplikation von 1024 x 1024 x 5), bedeutet, dass die Höchstdateigröße 5 MB beträgt.

- Mindestlänge:

Sie können eine Ganzzahl als Mindestlänge der Eingabezeichenfolge definieren. Wenn sie nicht gesetzt ist, bedeutet dies keine Mindestlängenbegrenzung.

- Maximale Länge:

Sie können eine Ganzzahl als maximale Länge der Eingabezeichenfolge definieren. Wenn sie nicht gesetzt ist, bedeutet dies keine maximale Längenbegrenzung.

- Mindestanzahl von Dateien:

Sie können eine Ganzzahl als Mindestanzahl von Dateien definieren, die der Endbenutzer hochladen muss, um die Validierung zu bestehen.

- Maximale Anzahl von Dateien:

Sie können eine Ganzzahl als maximale Anzahl von Dateien definieren, die der Endbenutzer hochladen darf, um die Validierung zu bestehen. Verwenden Sie diese Funktion, um Mehrfachuploads mit demselben Datei-Upload-Feld zu ermöglichen.

- Mehrfachauswahl:

Diese Option zeigt an, dass der Benutzer mehrere Werte eingeben kann. Sie finden diese Option in den Feldern „E-Mail“ und „Auswahlliste“:

• Wenn die Mehrfachauswahloption bei einem E-Mail-Feld aktiviert ist, können Sie mehrere gültige E-Mail-Adressen eingeben, getrennt durch Kommas. Zum Beispiel: ', '.
• Wenn die Mehrfachauswahloption bei einem Auswahllistenfeld aktiviert ist, können Sie mehrere Optionen auswählen. Die gesammelten Informationen werden im komma-separierten Format vorliegen. Zum Beispiel: 'Option Eins, Option Zwei'.

- Zahlenmuster:

Dies ist eine erweiterte Option des Zahlenfelds, die es Ihnen ermöglicht, den regulären Ausdruck anzupassen, der jede Zahl akzeptiert und im Prozess der Formularvalidierung verwendet wird. Der standardmäßig verwendete reguläre Ausdruck entspricht einer Gleitkommazahl und optional einem Exponenten (z. B. -1.23e-10): /^\s[-+]?[0-9]*.?[0-9]+([eE][-+]?[0-9]+)?\s*$/.

- Optionen:

Die Option „Optionen“ ist nur in den Auswahllistenfeldern verfügbar und wird verwendet, um Auswahlmöglichkeiten zur Komponente hinzuzufügen.

Beispiel: Wenn Sie im Optionsfeld des Formular-Popups Folgendes eingeben:

Eins|1
Zwei|2|ausgewählt
Drei|3
Vier|4
Fünf|5

Die Formularvorschau zeigt ein Feld mit dem Text „Zwei“, und wenn der Benutzer das Formular ohne Änderungen einreicht, wird der Wert 2 gesendet.

- Muster:

Dies ist eine erweiterte Option und ermöglicht es Ihnen, einen regulären Ausdruck hinzuzufügen, der für die Feldvalidierung verwendet wird. Wenn der vom Benutzer gesendete Wert nicht mit diesem Muster übereinstimmt, wird das Formular nicht verarbeitet, und stattdessen wird ein Validierungsfehler angezeigt.

- Platzhalter:

Dies ist die alternative Methode, den Wert zu beschreiben, den der Benutzer in das Feld eingeben soll. Standardmäßig wird der Platzhalter im Feld angezeigt, bis der Benutzer beginnt, Daten einzugeben.

- Radiobuttons:

Die Radiobuttons-Option ist in Radiofeld-Komponenten verfügbar und wird verwendet, um Radiobuttons zum Formular hinzuzufügen.

Beispiel: Wenn Sie im Feld „Radios“ des Pop-Up-Formulars Folgendes eingeben:

Eins|1
Zwei|2|ausgewählt
Drei|3
Vier|4
Fünf|5

Die Formularvorschau zeigt fünf Radiobuttons mit den Wörtern Eins, Zwei, Drei, Vier und Fünf. Die Option „Zwei“ wird ausgewählt. Wenn der Benutzer das Formular ohne Änderungen einreicht, wird der Wert 2 gesendet.

Zusätzlich können Sie Bilder oder Symbole zu den Radiobuttons hinzufügen, um Ihre Formulare dynamischer zu gestalten.

Um ein Bild zu einem Radiobutton hinzuzufügen, fügen Sie die Bild-URL als dritten Parameter der Radiobutton-Einstellung hinzu. Beispiel:

Eins
Zwei|2
Drei|3|ausgewählt
Vier|4|http://example.com/image-4.jpg
Fünf|5|http://example.com/image-5.jpg|ausgewählt

Dadurch werden fünf Radiobuttons erstellt:

• Eins: Erstellt einen Radiobutton mit dem Wert „Eins“ und dem Label „Eins“.
• Zwei|2: Erstellt einen Radiobutton mit dem Wert „2“ und dem Label „Zwei“.
• Drei|3|ausgewählt: Erstellt einen Radiobutton mit dem Wert „3“, dem Label „Drei“ und wird standardmäßig ausgewählt.
• Vier|4|http://example.com/image-4.jpg: Erstellt einen Radiobutton mit dem Wert „4“, dem Label „Vier“, und das Bild wird neben dem Radiobutton angezeigt.
• Fünf|5|http://example.com/image-5.jpg|ausgewählt: Erstellt einen Radiobutton mit dem Wert „5“, dem Label „Fünf“, das Bild wird neben dem Radiobutton angezeigt und wird standardmäßig ausgewählt.

Um Symbole anstelle von Bildern hinzuzufügen, ersetzen Sie einfach die Bild-URLs durch die CSS-Klassen der Symbole, z. B. glyphicon glyphicon-user, um das Benutzersymbol anzuzeigen. Standardmäßig verwendet die Anwendung Glyphicons Pro-Symbole, aber Sie können auch andere Symbole wie Font Awesome verwenden, indem Sie diese Schriften zu Ihrem CSS-Design hinzufügen.

Wichtig: Um ein Bild oder Symbol zu den Radiobutton-Einstellungen hinzuzufügen, müssen die ersten beiden Parameter vorhanden sein, auch wenn sie gleich sind.

Hinweis: Sie können die Radiobuttons horizontal anzeigen, indem Sie das Attribut „inline“ aktivieren.

- Auswahlfeld:

Ein Auswahlfeld ist ein Dropdown-Menü, das dem Benutzer erlaubt, eine oder mehrere Optionen auszuwählen, je nach Konfiguration. Der Hauptunterschied zur Radiobutton-Komponente besteht darin, dass Sie viele Optionen hinzufügen können, ohne die Größe zu ändern. Es wird empfohlen, diese Komponente zu verwenden, wenn viele Optionen vorhanden sind, z. B.: „Wählen Sie Ihr Herkunftsland?“

Um Optionen hinzuzufügen, zu bearbeiten oder zu löschen, klicken Sie auf die Komponente. Dann erscheint ein Formular mit dem Feld „Optionen“. Beachten Sie, dass jede Zeile in diesem Feld eine andere Option darstellt. Jede Zeile kann aus drei Teilen bestehen, getrennt durch eine vertikale Linie. Das Format sollte wie folgt sein: Label|Wert|ausgewählt. Der zweite und dritte Teil dieses Formats ist optional.

Beispiel: Wenn Sie im Feld „Optionen“ Folgendes eingeben:

Eins|1
Zwei|2|ausgewählt
Drei|3
Vier|4
Fünf|5

Die Formularvorschau zeigt ein Dropdown-Menü mit dem Text „Zwei“. Wenn der Benutzer das Formular ohne Änderungen einreicht, wird der Wert 2 gesendet.

Auswahlliste mit Optionsgruppen ¶

Um eine Optionsgruppe zu erstellen, fügen Sie doppelte eckige Klammern um den Text hinzu, z. B.:

[[Schwedische Autos]]
Volvo
Saab
[[Deutsche Autos]]
Mercedes
Audi

- Verstecktes Feld:

Durch Hinzufügen eines versteckten Felds zum Formular wird dieses nicht angezeigt. Versteckte Felder sind jedoch nützlich für mathematische Berechnungen oder um Standardwerte zu senden, ohne die Formularoberfläche zu verändern.

Hinweis: Sie können einem versteckten Feld ein Label hinzufügen, um die Arbeit in der Formularverwaltung komfortabler zu gestalten, z. B. um bedingte Regeln mit diesem Feld zu erstellen.

- Dateiupload:

Das Dateiupload-Feld ist eine Komponente, die es Benutzern ermöglicht, Dateien mit der Formularübermittlung anzuhängen. Einmal gesendet, erscheinen die Dateien in den detaillierten Übermittlungsinformationen. Zwei wichtige Punkte, die zu beachten sind:

• Zulässige Dateitypen: Sie können die Arten von Dateien, die in jedem Dateifeld hochgeladen werden können, einschränken. Standardmäßig sind für Bilder die Dateitypen '.gif, .jpg, .png' erlaubt. Um die zulässigen Dateitypen zu ändern, klicken Sie auf die Komponente und ändern Sie im Feld „Erlaubte Dateitypen“ die Erweiterungen, z. B. '.doc, .pdf, .txt', um Textdateien zu akzeptieren.
• Größenbeschränkungen: Sie können die Dateigröße einschränken, indem Sie eine Mindest- oder Höchstgröße für jedes Feld definieren. Um die zulässige Dateigröße zu ändern, klicken Sie auf die Komponente und erweitern Sie das Popup-Formular, indem Sie auf den Link „Mehr“ klicken. Suchen Sie dann die Felder „Mindestgröße“ und „Höchstgröße“ und geben Sie die Ziffer ein, die die erlaubte Anzahl an Bytes darstellt. Beispiel: Höchstgröße: 5242880 (Ergebnis der Multiplikation von 1024 x 1024 x 5 = 5 MB).

- Snippet:

Das HTML-Snippet-Feld ist eine erweiterte Komponente, die es Ihnen ermöglicht, HTML-Code zu Ihren Formularen hinzuzufügen. Es wird ein WYSIWYG-Editor angezeigt, der Tastaturkürzel erkennt, um Ihren HTML-Code schnell zu formatieren.

Seien Sie vorsichtig, einen gültigen HTML-Code einzugeben, andernfalls speichert der Formular-Builder das Formular nicht und zeigt stattdessen eine Fehlermeldung an, die die Zeile des fehlerhaften Codes angibt. Ein häufiger Fehler ist beispielsweise das Hinzufügen mehrerer HTML-Elemente mit derselben ID.

Um eine HTML-Tabelle hinzuzufügen, einen Link einzufügen oder ein Bild anzuzeigen, müssen Sie zunächst auf die Schaltfläche „Vollbild“ klicken. Dadurch wird der WYSIWYG-Editor über den Formular-Builder geöffnet, sodass Sie mehr Platz haben, um den benötigten Inhalt einzugeben. Sie können auch auf die Schaltfläche „Code“ klicken, um den Inhalt als HTML-Code anzuzeigen.

Hinweis: Obwohl Sie CSS- und JavaScript-Code in ein Formular einfügen können, wird dies nicht empfohlen. In solchen Fällen können Sie ein CSS-Theme erstellen und/oder eine externe JavaScript-Datei laden. Denken Sie daran, dass das erstellte Formular auch im Übermittlungsmanager angezeigt wird und sein Code möglicherweise inkompatibel ist.

- reCaptcha:

Das reCaptcha-Feld ist eine erweiterte Komponente, die es Ihnen ermöglicht, die Technologie von Google zu nutzen, um zu überprüfen, ob Benutzer keine Bots und/oder Spammer sind. Sie können die reCAPTCHA-Konfiguration ändern, z. B. die Farbgestaltung, den Captcha-Typ und die Größe. Beachten Sie, dass Sie pro Formular nur eine reCaptcha-Komponente hinzufügen können.

Wichtig! Bevor Sie die reCAPTCHA-Komponente zu Ihrem Formular hinzufügen, müssen Sie zuerst die reCAPTCHA-Schlüssel in der Konfiguration der Website hinzufügen. Andernfalls funktioniert reCAPTCHA nicht. Wenn Sie das Formular vor dem Hinzufügen der Schlüssel erstellt haben, müssen Sie das Formular aktualisieren.

- Seitenumbruch:

Das Seitenumbruch-Feld ist eine erweiterte Komponente, die es Ihnen ermöglicht, mehrstufige oder mehrseitige Formulare zu erstellen. Für jeden erstellten Seitenumbruch fügen Sie eine neue Seite hinzu. Darüber hinaus wird über dem Formular ein Header angezeigt, der den Benutzern anzeigt, in welchem Schritt sie sich befinden und wie viele Schritte noch erforderlich sind, um das Formular abzusenden. Zwei wichtige Punkte sind zu beachten:

1. Die Seitenumbruch-Komponente fügt zwei Schaltflächen hinzu, die die Navigation im Formular ermöglichen. Sie können den Text der Schaltflächen „Weiter“ oder „Zurück“ durch Klicken auf die Komponente anpassen.
2. Formularschritte: Diese erscheinen über dem Formular. Einstellungen:
   • Klicken Sie auf „Formularschritte“, um deren Einstellungen zu überprüfen. Sie können die Titel der einzelnen Schritte im Feld „Formularschritte“ ändern. Jede Zeile entspricht einem Titel.
   • Sie können festlegen, ob nur die Titel oder die Schritte (Zahlen) angezeigt werden sollen.
   • Sie können die Schrittzahlen durch Glyphicons-Symbole ersetzen. Um Glyphicons in den Schritten zu verwenden, fügen Sie zu jeder Zeile im Feld „Schritte“ eine vertikale Linie und „icon-[Symbolname]“ hinzu. Zum Beispiel, um die Zahl 1 zu ersetzen, schreiben Sie in die erste Zeile der Schritte: „Unbenannter Schritt|icon-user“. Besuchen Sie die Glyphicons-Website, um die Namen der verfügbaren Symbole zu sehen.
   • Sie können das Design der Schritte in eine Fortschrittsleiste ändern, die den Prozentsatz der erreichten Fortschritte anzeigt.
   • Schließlich können Sie die Formularschritte ausblenden, indem Sie die Option „Keine Formularschritte“ aktivieren.

Hinweis: Sie können zu einer bestimmten Seite navigieren, indem Sie die Seitenzahl an die URL anhängen, z. B. um zur zweiten Seite zu gelangen, fügen Sie den Abfrageparameter „p=2“ hinzu.

- Abstandshalter:

Die Abstandshalter-Komponente ermöglicht es Ihnen, präzise vertikale Abstände zwischen Feldern in Ihren Formularen hinzuzufügen. Ziehen Sie einfach einen Abstandshalter zwischen Ihre Felder und legen Sie die Anzahl der Pixel fest, die zwischen den Feldern angezeigt werden sollen.

Optionen:

• Höhe: Der Abstand, definiert durch die Anzahl der Pixel.

- Unterschrift:

Die Unterschriften-Komponente ermöglicht es Ihren Endbenutzern, ein Formular mit ihrer Unterschrift zu versehen – entweder mit der Maus oder dem Finger auf einem Tablet/Smartphone. So können Sie Unterschriften für Verträge, rechtliche Dokumente und andere Formulare, die eine physische Unterschrift erfordern, sicher erfassen.

Zwei wichtige Punkte, die zu beachten sind:

1. Die Unterschriften-Komponente fügt zwei Schaltflächen hinzu, die Interaktionen mit der Leinwand ermöglichen. Sie können den Text der Schaltflächen „Löschen“ und „Rückgängig“ durch Klicken auf die Komponente anpassen.
2. Feldeinstellungen: Das Unterschriftsfeld hat folgende spezielle Optionen:
   • Löschen: Aktivieren/Deaktivieren der „Löschen“-Schaltfläche. Wenn ein Endbenutzer auf die „Löschen“-Schaltfläche klickt, wird die Unterschrift entfernt, und die Leinwand wird geleert, um erneut zu beginnen.
   • Rückgängig: Aktivieren/Deaktivieren der „Rückgängig“-Schaltfläche. Wenn ein Endbenutzer auf die „Rückgängig“-Schaltfläche klickt, wird der letzte Strich seiner Unterschrift entfernt. Der Benutzer kann diese Schaltfläche weiterhin drücken, um seine Unterschrift schrittweise rückgängig zu machen.
   • Zusätzlich können Sie die Breite und Höhe der Leinwand definieren, die Farbe des Stifts ändern sowie den Text der Schaltflächen anpassen, neben anderen allgemeinen Einstellungen.

- Matrix-Feld:

Das Matrix-Feld ist eine erweiterte Komponente, die es Ihnen ermöglicht, mehrere Formularsteuerelemente desselben Eingabetyps innerhalb einer Tabelle zu gruppieren. Sie können ein Matrix-Feld mit den folgenden Eingabetypen erstellen:

• Radiobutton
• Checkbox
• Auswahlliste
• Text
• Textbereich
• Zahl
• Bereich (Slider)
• E-Mail
• Telefon
• URL
• Farbe
• Passwort
• Datum
• Datum/Zeit-Lokal
• Zeit
• Monat
• Woche

Alle Formularsteuerelemente sind vollständig anpassbar und je nach Typ wird die korrekte Eingabevalidierung angewendet.

Ein Matrix-Feld kann beliebig viele Fragen (Zeilen) und Antworten (Spalten) enthalten. Sie können für jede Antwort unterschiedliche Werte festlegen.

Ein spezieller Eingabetyp für das Matrix-Feld ist die Auswahlliste, da Sie verschiedene Werte (Optionen) hinzufügen müssen. Um dies zu tun, aktivieren Sie „Werte“ und geben Sie in jedem „Wert“-Feld durch Schrägstriche getrennte Werte ein. Wenn Sie eine standardmäßige leere Option aktivieren möchten, verwenden Sie die Platzhalter-Einstellung.

Sie können auch offene Fragen erstellen, z. B. mit der Textfeld-Variante. Jede Zeile enthält eine Reihe von Text-Eingabefeldern. Diese Variante sieht ähnlich aus und funktioniert wie das Textfeld. Dasselbe gilt für andere auf Text basierende Eingabefelder wie Textbereich oder Zahlenfelder.

Eine besondere Funktion im Matrix-Feld ist die Möglichkeit, die Fragen auszublenden. Aktivieren Sie einfach die Option „Inline“, und die Fragen verschwinden. Sie können diese Funktion verwenden, wenn Sie nur eine einzelne Frage in tabellarischer Form stellen möchten.

Hinweis: Wenn eine Tabelle sehr groß ist, sollten Sie die Klasse „table-responsive“ innerhalb der Einstellung „Container CSS-Klasse“ hinzufügen.

- Net Promoter Score (NPS):

NPS ist wahrscheinlich die wichtigste Kennzahl zur Messung der Kundenzufriedenheit und Kundenbindung und steht jetzt in iform4u zur Verfügung.

iform4u NPS hilft Ihnen dabei, authentisches Kundenfeedback zu sammeln, sodass Sie wirklich verstehen, wie Ihre Organisation wahrgenommen wird. Es ist eine Möglichkeit, festzuhalten, was Ihre Kunden denken, ihre Zufriedenheit und ob sie Sie weiterempfehlen würden.

Fragen Sie sie beispielsweise:

„Auf einer Skala von 1–10, wie wahrscheinlich ist es, dass Sie uns Ihren Freunden empfehlen?“

Dies gibt Ihnen qualitative Einblicke in das „Warum“ Ihrer Kundenmeinung, was oft besser funktioniert als generische jährliche Kundenzufriedenheitsumfragen.

Diese Komponente ermöglicht es Ihnen, die Frage anzupassen, Beschriftungen anzuzeigen, Hilfetexte hinzuzufügen und mehr. Außerdem kann sie als Buttons oder als Radiobuttons angezeigt werden. Standardmäßig wird das Design mit Buttons angezeigt. Entfernen Sie einfach die CSS-Klasse „hidden“ und ersetzen Sie die Button-CSS-Klasse durch: „btn btn-label btn-nps“.

- Button:

Das Button-Feld ist eine Komponente, mit der Sie Formulare absenden können. Während es normal ist, einen Button pro Formular hinzuzufügen, hindert Sie nichts daran, mehr hinzuzufügen, beispielsweise am Anfang und Ende des Formulars. Diese Komponente kann drei Typen haben:

• Absenden: Zum Absenden des Formulars. Dies ist der Standardtyp.
• Zurücksetzen: Zum Zurücksetzen des Formulars auf die Standardwerte.
• Bild: Zeigt ein Bild auf dem Button an und wird wie „Absenden“ verwendet, um das Formular abzusenden. Wenn Sie diesen Typ von Button verwenden, müssen Sie die URL des Bildes hinzufügen und die CSS-Klasse entfernen.
• Button: Dieser Typ sendet das Formular nicht, kann jedoch verwendet werden, um über JavaScript mit den Feldern zu interagieren.

Sie können einem Button vom Typ „Absenden“, „Zurücksetzen“ oder „Button“ ein Symbol hinzufügen, indem Sie im Attribut „Button-Text“ die Symbolbeschriftung schreiben. Zum Beispiel:

<span class="glyphicon glyphicon-shopping-cart"></span> Jetzt kaufen!

Dadurch wird Ihr Button mit einem ansprechenden Symbol am Anfang angezeigt:

Hinweis: Die CSS-Klasse „btn btn-primary“ fügt das Standarddesign zum Button hinzu. Weitere Informationen finden Sie auf der Bootstrap CSS-Website.

Feldvalidierung

Ein sehr wichtiger Punkt ist die Feldvalidierung, die ausgeführt wird, wenn Benutzer ein Formular absenden.

Feldvalidierung ist der Prozess, durch den überprüft wird, ob die von den Benutzern übermittelten Daten bestimmte Anforderungen erfüllen. Beispielsweise erfordert ein Datumsfeld, dass der Wert, der an den Server gesendet wird, das Format yyyy-mm-dd hat. Die Validierung stellt sicher, dass dies geschieht.

Sie sollten beachten, dass iform4u mit standardmäßigen HTML5-Feldern arbeitet. Daher können Sie immer auf die HTML5-Dokumentation zugreifen, um weitere Informationen zu erhalten. Zusätzlich zur Validierung nach Typ können Felder weitere Anforderungen haben, wie „Erforderlich“ und „Eindeutig“.

Viele dieser Anforderungen werden clientseitig vom Browser validiert, alle jedoch serverseitig von iform4u.