Content Comparison

1. Neues Formular erstellen

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

Image Added 

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": 

Image Added

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. 

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. 

Expand
title Anleitung und Details
Info Image Added 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":  Image Added  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:  Image Added Nachher:  Image Added Expand title 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: 

Image Added

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: 

Image Added

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. 

Image Added

Expand
title Anleitung und Details
Info Image Added Anleitung  1. Bestätigungen werden in den Formulareinstellungen verwaltet:  Image Added 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 Image Added Inline Lädt die aktuelle Seite erneut und ersetzt das Webformular durch die Bestätigungsnachricht*. Image Added Message Lädt die aktuelle Seite bzw. das Formular erneut und zeigt die Bestätigungsnachricht* am unteren Seitenrand an. Image Added Modal Lädt die aktuelle Seite bzw. das Formular erneut und zeigt die Bestätigungsnachricht* in einem modalen Dialog an Image Added 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: Image Added *Bestätigungsnachrichten können individuell erstellt/gestaltet werden.  3. Verfasse bei Bedarf eine individuelle Bestätigungsnachricht: Image Added

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.). 

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

Image Removed

2.1 Formular Elemente (Übersicht)

2.2 Einstellungen - Eingabefelder

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

2.2.1 Einstellungen - Eingabefelder

Image Removed

1. Elementeinstellungen:

2. Element Beschreibung / Hilfe / Zusätze:

3. Formularanzeige:

4. Formularvalidierung:

2.2.2 Einstellungen - Options- und Auswahlelemente

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

2.2.1.1 Element Beschreibung/Hilfe/Zusätze

2.2.1.2 Formularanzeige

2.2.1.3 Formularvalidierung

2.3 Einstellungen (Options- und Auswahlelemente)

2.3.1 Elementoptionen

2.4 Bedingungen

3 Formular Layout

3.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: 

Image Removed

Der Button "Add element" führt zur Elementauswahl. Das ausgewählte Element wird direkt innerhalb vom Container platziert. 

Dir stehen diverse Containertypen zur Verfügung:

3.2 Flexbox

3.3 Mehrseitiges Formular

4. Bestätigung

5. Benachrichtigung (Behandlungsroutinen)

6. Ergebnisse

7. Testing 

8. Erweitert 

<h4>Neue Anmeldung Team-Event</h4>
Folgender Benutzer hat sich für das Team-Event 2022 angemeldet: <br />
<br />
[webform_submission:values]

<h4>Danke für deine Anmeldung!</h4>
Grüezi [webform_submission:values:customer_name]<br />
<br />
Du wurdest soeben für den Team-Event 2022 angemeldet. <br />
<br />
Die Details senden wir an die folgende Mail-Adresse: [webform_submission:values:customer_mail]<br />
<br />
Freundliche Grüsse<br />
HR Muster AG

7. Eingaben / Eingegangene Formulare

Du hast jederzeit die Möglichkeit, Eingaben von bereits eingegangenen Formularen aufzurufen. 

8. Testing 

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

Image Added

Im Testmodus werden die Formularfelder automatisch mit Testinhalt ausgefüllt, so dass du das Formular lediglich absenden musst, um beispielsweise die Handler zu testen. 

9. Übersetzen

Falls du eine mehrsprachige Website besitzts, hast du die Möglichkeit, Formulare zu übersetzen.