Wie Sie das Widget Konfigurierbare Liste einrichten

Mit dem Widget Konfigurierbare Liste können Sie eine Reihe von Feldern oder Fragen in Ihrem Formular definieren und anzeigen. Ihre Befragten können dann so viele dieser Feldsätze zu Ihrem Formular hinzufügen und beantworten, wie Sie zulassen. Dies ist ideal, um eine Reihe von Fragen mehrmals zu stellen.

Einrichten des Widgets

Im Folgenden erfahren Sie, wie Sie das Widget Konfigurierbare Liste einrichten und konfigurieren:

1. Wählen Sie im Formular Generator im linken Bereich der Seite die Option Element hinzufügen.

2. Wählen Sie im Bereich Formularelemente die Registerkarte Widgets aus.

3. Suchen und wählen Sie Konfigurierbare Liste.

Nachdem Sie das Widget zu Ihrem Formular hinzugefügt haben, sollte der Einstellungsbereich auf der rechten Seite angezeigt werden. Ist dies nicht der Fall, klicken Sie auf das Zauberstab-Symbol um die Widget-Einstellungen zu öffnen.

4. In den Widget-Einstellungen auf der rechten Seite definieren Sie Ihre Felder im Bereich Feldkonfiguration.

Hinweis: Felddeklarationen sollten durch einen Zeilenumbruch getrennt werden.

Hier finden Sie die Liste und Syntax der unterstützten Feldtypen, die Sie in Ihrer dynamischen Liste verwenden können.

• Text
• Zahlen
• Textbereich
• Dropdown-Liste
• Radio Button
• Mehrfachauswahl
• Datumseingabe
• Zeit-Eingabe
• Datum
• Uhrzeit
• Statisch

text

Akzeptiert einzeilige, einfache Texte.

[label]:text[:placeholder]

Beispiele:

• Name: text
• E-Mail: text: Hier eingeben…

number

Akzeptiert nur Zahlen.

[label]:number[:placeholder:step,min,max]

Beispiele: 

• Quantity: number
• Alter: number: Geben Sie Ihr Alter ein
• Bewertung: number:: 1, 1, 10

textarea

Akzeptiert einfache Texte und Zeilenumbrüche.

[label]:textarea[:placeholder]

Beipiele: 

• Anmerkungen: textarea
• Kommentare: textarea: Hier eingeben…

dropdown

Eine Liste von Optionen in einer Dropdown-Liste.

[label]:dropdown:option1[,option2,...:placeholder]

Um eine der Optionen standardmäßig auszuwählen, ersetzen Sie den Platzhalter durch eine der Optionen in Ihrer Liste.

Beispiele:

• Pizza: dropdown: Käse, Pepperoni, Wurst
• Größe: dropdown: Klein, Mittel, Groß: Bitte auswählen
• Getränk: dropdown: Apfel, Orange, Ananas: Orange

radio

Einzelauswahl  (Optionsfeld) – wählen Sie eine der verfügbaren Optionen aus.

[label]:radio:option1[,option2,...]

Beispiel:

• Bestellung: radio: Abholung, Lieferung
• Gemüse: radio: Karotte, Rettich, Brokkoli

checkbox

Mehrfachauswahl – kreuzen Sie die verfügbaren Optionen an.

[label]:checkbox:option1[,option2,...]

Beispiele:

• Zusätze: checkbox: Soda, Salat, Fritten
• Soße: checkbox: Süß, Sauer, Pikant

dateInput

Eine Datumsauswahl mit Kalender-Pop-up.

[label]:dateInput[:format]

Wenn das Datumsformat undefiniert oder ungültig ist, wird es standardmäßig auf J/M/T gesetzt. Sie können die Buchstaben nach Belieben austauschen.

Beispiel:

• Datum: dateInput
• Geburtsdatum: dateInput: d/m/y

timeInput

Ein Zeitwähler.

[label]:timeInput:format[,now] 

• Die zulässigen Formatwerte sind 12 (mit AM/PM-Selektor) und 24. Ist der Wert ungültig, wird er auf 12 zurückgesetzt.
• Um die aktuelle Zeit als Standard einzustellen, fügen Sie “,now“ an die Erklärung an.

Beispiele:

• Ankunftszeit: timeInput: 24
• Aktuelle Uhrzeit: timeInput: 12, now

date

Eine Datumsauswahl mit drei Feldern.

[label]:date[:format:range:today]

• Wenn das Datumsformat undefiniert oder ungültig ist, wird es standardmäßig auf J/M/T gesetzt. Sie können die Buchstaben nach Belieben austauschen.
• Der Jahresbereich wird als Anfang-Ende formatiert (z. B. 2015-2025). Wenn sie nicht definiert oder ungültig ist, wird sie standardmäßig auf 10 Jahre zurück bis zum nächsten Jahr gesetzt.
• Um das aktuelle Datum als Standard festzulegen, fügen Sie “:today” an die Erklärung an.

Beispiele:

• Geburtsdatum: date
• Ankunftsdatum: date: m/d/y: 2025-2030
• Datum: date: d/m/y:: today

time

Ein Drei-Felder-Zeitwähler.

[label]:time[:format,now]

• Die zulässigen Formatwerte sind 12 (mit AM/PM-Selektor) und 24. Ist das Format nicht definiert oder ungültig, wird es auf 12 gesetzt.
• Um die aktuelle Zeit als Standard einzustellen, fügen Sie “,now“ an die Erklärung an.

Beispiel:

• Ankunftszeit: time
• Aktuelle Uhrzeit: time: 12, now

static

Eine Nachricht oder einen Text anzeigen.

[label]:static:[text]

Sie können einige grundlegende textbezogene HTML-Tags einfügen.

Beispiel:

• Anmerkung: static: Wir sind 24/7 geöffnet.
• Tipp: static: Klicken Sie auf die Schaltfläche <strong>Zeile hinzufügen</strong>, um weitere Zeilen hinzuzufügen.

Felder als “Erforderlich” festlegen

Um zu verhindern, dass Ihre Formularausfüller Pflichtfelder überspringen, können Sie diese als “Erforderlich” kennzeichnen, indem Sie ein Sternchen (“*”) an den Anfang der Felddeklaration setzen.

Ihre Formularausfüller können das Formular nicht abschicken, solange die erforderlichen Felder leer sind.

Einrichten anderer Konfigurationen

Scrollen Sie im Bereich Widget-Einstellungen auf der rechten Seite unter der Registerkarte Allgemein über die Felderkonfiguration hinaus, um weitere Optionen zur Konfiguration des Widgets anzuzeigen.

Hier sind die verfügbaren Optionen:

• Mindestanzahl an Zeilen – Die Mindestanzahl der Feldsätze, die in Ihrem Formular angezeigt werden sollen.
• Maximum an Zeilen  – Die maximale Anzahl von Feldsätzen, die in Ihrem Formular angezeigt werden dürfen. Null steht für unbegrenzt.
• Bezeichnung für “Hinzufügen – Der Text, der auf der Schaltfläche “Hinzufügen” erscheinen soll.

Das Aussehen der Liste ändern

Es ist oft notwendig, Ihr Formular so zu gestalten, dass es genau so aussieht, wie Sie es sich wünschen, z. B. um Ihr Produktbild oder Ihre Corporate Identity anzupassen. Mit diesem Widget können Sie das Aussehen der Liste weiter anpassen, indem Sie Ihre eigenen CSS-Codes hinzufügen.

So wenden Sie benutzerdefiniertes CSS an

1. Wählen Sie das Zauberstab-Symbol des Widgets, um die Widget-Einstellungen zu öffnen.
2. Gehen Sie im Bereich Widget-Einstellungen auf die Registerkarte Benutzerdefiniertes CSS.
3. Geben Sie Ihre benutzerdefinierten CSS-Codes in die Textbox ein.
4. Wenn Sie fertig sind, wählen Sie Widget Aktualisieren, um Ihre Änderungen zu speichern.