Webform in Arbeit *

M1. Neues Formular erstellen

Die Webform-Verwaltung befindet sich im Drupal Backend unter "Struktur → Webformulare"

1.1 Neues Formular erstellen

2. Elemente und Felder

In der Maske "Erstellen" kannst du Elemente hinzufügen, löschen, verschieben, verschachteln usw.:
Direkte URL: /admin/structure/webform/manage/[Formularname]

Eine Vorschau deines Formulars erhältst du mit eine Klick auf den Reiter "Ansicht": 

2.1 Formular Elemente (Übersicht)

Bei der Erstellung eines Formulars stehen dir diverse Elemente zur Verfügung, von einfachen Textfeldern bis zu komplexen Optionsmöglichkeiten. 
Hier findest du eine Auswahl der wichtigsten Elemente und dazugehörigen Eigenschaften.

3. Elemente konfigurieren (Einstellungen)

Mit einem Klick auf den Titel eines Elements oder via "Bearbeiten" Button gelangst du in den Bearbeitungsmodus. 
Hier kannst du Labels, Platzhalter, Hilfetexte, Werte, Validierungen und vieles mehr konfigurieren. 

Obwohl bei den meisten Elementen dieselben Einstellungen möglich sind, gibt es Unterschiede zwischen: 

• Eingabefeldern (Textfeld, Textbereich, E-Mail, Zahl usw.) 
• Options- und Auswahlelementen (Radiobuttons, Checkboxen, Dropdown usw.)

3.1 Einstellungen - Standard

In diesem Kapitel konfigurieren wir die Einstellungen eines Textfeldes (Standard-Element):

3.2 Einstellungen - Options- und Auswahlelemente

In diesem Kapitel konfigurieren wir die Einstellungen von einem Dropdown (Auswahlelement):

3.3 Bedingungen

Bedingte Logik ändert das Verhalten eines Formulars basierend auf bestimmten Aktionen.
Es ermöglicht uns, das Formularerlebnis basierend auf den Eingaben des Besuchers dynamisch anzupassen. Die Logik basiert auf wenn/dann Bedingungen.

Anwendungsfall: 

Bei einem Bestellformular gib es eine Liefer- und Rechnungsadresse.
Wählt der Besucher die Option "Rechnungsadresse nicht identisch mit Lieferadresse" wird mittels bedingter Logik ein neues Feld eingeblendet für die Rechnungsadresse. 

 Anleitung und Details

 Anleitung - Feld nach Klick auf Checkbox einblenden

1. Erstelle eine Checkbox (Typ: einfache Checkbox) mit dem Label: "Textfeld anzeigen?"

2. Erstelle ein Textfeld mit dem Label: "Textfeld"

3. Öffne die Optionen des Textfeldes und wähle den Reiter "Bedingungen": 

 Die Bedingung wird immer dem Element zugeordnet, dessen Zustand sich verändert. 

4. Definiere die Bedingung und notiere sie bei Bedarf: "Werde sichtbar, wenn die Checkbox "Textfeld anzeigen" aktiviert ist"

5. Hinterlege diese Bedingungslogik (eine Erklärung der einzelnen Objekte findest du weiter unten in "Bedingungslogik Details"): 

Status: Sichtbar (Slide)

Verknüpfung (wenn): alle

Element: Checkbox "Textfeld anzeigen?"

Auslöser/Wert: Überprüft

6. Teste das Formular, nach eine Klick auf die Checkbox sollte das Textfeld sichtbar werden: 

Vorher: 

Nachher: 

 Bedingungslogik Details

Objekt	Beschreibung
Status	Status der das Element erhält, wenn die Logik zutrifft.  Beispiele: Wird sichtbar, wird unsichtbar, wird aktiviert, wird deaktiviert
Verknüpfung (wenn)	alle = UND (wenn alle Bedingungen erfüllt sind) Alle = ODER (wenn eine oder mehrere Bedingungen erfüllt sind) Eins = XODER (entweder oder, trifft nur zu wenn eine von zwei Bedingungen erfüllt ist)
Element	Eine Auswahl deiner erstellten Elemente
Auslöser Wert	Der Auslöser:  Bei Auswahlelementen: Überprüft Bei Eingaben: Wert ist (dieser Wert muss eingegeben werden, damit die Logik ausgelöst wird)

4 Formular Layout

4.1 Container

Container bilden einen Teil des Layouts und gliedern das Formular. Dies sorgt dafür, dass Seitenbesucher (gerade bei grossen Formularen) die Übersicht behalten.
Um einen Container zu verwenden, muss er als Element hinzugefügt werden. Anschliessend können Felder innerhalb des Containers platziert werden: 

Dir stehen diverse Containertypen zur Verfügung:

Standardmässig besitzen alle Formularelemente eine Breite von 100%. Sie nehmen also den vollen Platz der Zeile ein, in der sie sich befinden. 
Flexbox erlaubt es uns, das Formularlayout zu verändern in dem wir Beispielsweise zwei Elemente nebeneinander platzieren.

Informationen in mehrstufige/mehrseitigen Formularen werden vom Seitenbesucher übersichtlicher und weniger überwältigend wahrgenommen. 
Die Formulare eignen sich besonders für Bewerbungs- und Registrierungsformulare: 

Der Besucher füllt die Formularfelder aus und navigiert mittels Vor- und Zurückbutton zwischen den einzelnen Seiten/Stufen. 

5. Bestätigung

Eine Formularbestätigung teilt dem Seitenbesucher mit, dass sein Formular korrekt ausgefüllt und abgesendet wurde. 

 Anleitung und Details

 Anleitung 

1. Bestätigungen werden in den Formulareinstellungen verwaltet: 

Direkte URL: /admin/structure/webform/manage/[Formularname]/settings/confirmation

2. Wähle eine Bestätigungsart: 

Name	Beschreibung	Ansicht/Vorschau
Page	Leitet auf neue (leere) Seite weiter und zeigt eine Bestätigungsnachricht* an.  Unterhalb der Nachricht erscheint ein Link, welcher zurück zum Formular führt
Inline	Lädt die aktuelle Seite erneut und ersetzt das Webformular durch die Bestätigungsnachricht*.
Message	Lädt die aktuelle Seite bzw. das Formular erneut und zeigt die Bestätigungsnachricht* am unteren Seitenrand an.
Modal	Lädt die aktuelle Seite bzw. das Formular erneut und zeigt die Bestätigungsnachricht* in einem modalen Dialog an
URL & URL mit Nachricht	Leitet zu einem benutzerdefinierten Pfad um und zeigt ggf. eine Bestätigungsnachricht* am unteren Seitenrand an. Erfordert eine erstellte Bestätigungsseite, welche anschliessend als Node hinterlegt wird:

*Bestätigungsnachrichten können individuell erstellt/gestaltet werden. 

3. Verfasse bei Bedarf eine individuelle Bestätigungsnachricht:

6. Benachrichtigung (E-Mail-Handler)

Mittels "E-Mail-Handler" kann definiert werden, an wen die Formularwerte nach Eingabe gesendet werden (interne Administration, HR-Abteilung oder Kopie an Seitenbesuche usw.). 

7. Ergebnisse

8. Testing 

Mit einem Klick auf den Reiter Test gelangst du auf eine separate Seite, in der dein Formular bereits ausgefüllt ist.

8. Übersetzen