Versions Compared

Version Old Version 20 New Version 21
Changes made by

Karima Laghrami

Karima Laghrami

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

it dem Webform Modul kannst du individuelle Formulare für deine Website erstellen und verwalten. 

Ob mehrseitiges Formular mit bedingter Logik oder einfaches Kontaktformular, Webform bietet zahlreiche Möglichkeiten. 

Leistungsmerkmale: 

  • Erstellung von individuellen Webformularen
  • Einbindung der Formulare in Websites
  • Einsendungen sammeln und überprüfen
  • Bestätigungen und Benachrichtigungen senden und verwalten
  • Testing 

Info
titleWichtig

Dieses Dokumentation setzt voraus, dass du eine Drupal Website hast und die Grundfunktionalitäten des Pagedesigners kennst.
Das Webform Modul wurde bereits installiert und freigegeben.


Table of Contents
maxLevel4
stylenone


1. Übersicht Formulare

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

 

1.1 Neues Formular erstellen

Info

 Anleitung

1. Navigiere in die Webform-Verwaltung → /admin/structure/webform

2. Klicke auf "Webformular hinzufügen"

3. Erfasse einen Titel (Pflichtfeld). Bei Bedarf kannst du eine Beschreibung und Kategorie hinterlegen sowie den Status auswählen: 
    Status "Geöffnet": dieses Formular ist aktiv.
    Status "Geschlossen": dieses Formular ist inaktiv und für Seitenbesucher nicht sichtbar. 

4. Klicke auf "Speichern"

Du befindest dich nun in einer neuen Maske "Erstellen", wo du das Formular (seine Felder) aufbauen kannst. 

5. Klicke auf "Element auswählen" um ein Feld hinzuzufügen. 

2. Elemente & Felder - Erstellen

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

Expand
titleÜbersicht Maske "Erstellen"

1. Elemente  Elemente: Standardansicht des Formulader Elemente.
2. d
3. d
4. d
5. d
6. d
7. d
8. d
9. d
10. d
11. d
12. d
13. d
14. d  Quelle: Bei Bedarf können die Elemente im YAML-Format angezeigt und bearbeitet werden. 
3.  Element hinzufügen: Öffnet ein Pop-up mit einer Auswahlübersicht sämtlicher Elemente, welche du verwenden darfst. 
4.  Seite hinzufügen: Für mehrseitige Formulare - siehe Kapitel ***
5.  Layout hinzufügen: Für ein neues Flexbox-Layout - siehe Kapitel ***
6.  Zeilenreihenfolge anzeigen: Fügt bei Bedarf eine neue Spalte mit Gewichtungsoption in der Element-Übersicht ein. Je grösser die Zahl, desto weiter unten erscheint ein Element und umgekehrt. 
7.  Der Titel: nach einem Klick darauf landest du in der jeweiligen Elementbearbeitung. Mittels Fadenkreuz (links davon) kannst du das Element via Drag & Drop verschieben. 
8.  Schlüssel: Eindeutiger Maschinenname des Elements. Dieser generiert sich automatisch aus dem Titel, kann bei Bedarf jedoch manuell erfasst werden (nur Kleinbuchstaben und Underlines). 
9.  Typ: Typ des Elements (Textfelder, Radiobuttons, Container usw.)
10. Erforderlich: Einfache Methode um aus einem Element ein Pflichtelement (siehe Formularvalidierung Kapitel ***) zu machen. 
11. Bearbeiten: Führt zur Elementbearbeitung. Bei einem Klick auf den Pfeil öffnet sich ein Dropdown mit zwei weiteren Optionen: "Duplizieren" (um ein Feld zu kopieren) und "Löschen". 
12. Anpassen: Führt zu den Formularbutton-Optionen (Absenden und Aktualisieren). Wird meistens verwendet um den Standard-Buttontext "Absenden" anzupassen. 
13. Speichert die Elemente 
14. Zurücksetzen: Setzt nicht gespeichert Anpassungen (Drag & Drop Reihenfolge, Gewichtung oder Pflichtfeld-Häkchen) zurück.

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 Elementen und dazugehörigen Eigenschaften:

Expand
titleÜbersicht Elemente


NameBeschreibungAnsicht
TextfeldEinzeiliges Textfeld

TextbereichMehrzeiliges Textfeld

E-MailTextfeld, welches bei der Eingabe ein @-Zeichen erwartet

ZahlEingabefeld in dem ausschliesslich Zahlen eingegeben werden können

Einfache CheckboxEinfache Checkbox zum aus- und abwählen. 
Anwendungsbeispiel: Datenschutzrichtlinien bestätigen (als Pflichtfeld)

CheckboxenErlaubt mehrere Antwortalternativen.

Checkboxen (Andere)Erlaubt mehrere Antwortalternativen. Wählt der Besucher die Option "Andere",
so erscheint darunter ein Textfeld für einen individuellen Wert

AuswählenKlassisches Dropdown

Auswählen (Andere)Klassisches Dropdown. Wählt der Besucher die Option "Andere",
so erscheint darunter ein Textfeld für einen individuellen Wert

RadiosRadiobuttons für eine einzige Antwortalternative. 
Anwendungsbeispiel: Ja-/Nein-Fragen

Radios (Andere)Radiobuttons für eine einzige Antwortalternative. Wählt der Besucher die Option "Andere",
so erscheint darunter ein Textfeld für einen individuellen Wert

DokumentdateiErlaubt dem Besucher einen Dateiupload

BilddateiErlaubt dem Besucher einen Bildupload

Einfaches HTMLKann verwendet werden um das Formular mit Inhalten zu ergänzen
Anwendung: Intros, Titel, Erklärtexte usw.

DatumDatumsauswahl


2.2 Einstellungen (Standardelemente)

2.2.1 Element Beschreibung/Hilfe/Zusätze

2.2.2 Formularanzeige

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

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:

Expand
titleÜbersicht Container


NameBeschreibungAnsicht
AbschnittErstellt eine Überschrift über den Feldern, die sich im Abschnitt befinden: 


3.2 Flexbox

3.3 Mehrseitiges Formular

4. Bestätigung

5. Benachrichtigung (Behandlungsroutinen)

6. Ergebnisse

7. Testing 

8. Erweitert 

8.1 Entitäten





...