Zum Inhalt springen

Webformulare mit Drupal

Mit Drupal Webform lassen sich komplexe Webformulare erstellen. Dabei lassen sich verschiedene Felder und Feldarten zu einem Formular zusammenfassen.

Weiterhin ist auch die Auswertung der Formulardaten mit Webform möglich.

Berechtigungen der Chef- und der Standardredakteure:
 

- Übersicht über die Webformulare erhalten

- Webformulare erstellen

- fremde Webformulare bearbeiten

- eigene Webformulare bearbeiten

- alle Webformular-Einsendungen einsehen

Erstellen von Formularen

Formular erstellen

Formular hinzufügen als .gif Animation
Formular hinzufügen als .gif Animation

1. Aufruf von Arbeitsbereich > Webformulare > Button "Webformular hinzufügen" 

2. Titel (und Beschreibung) eingeben 

3. Speichern
Nach dem Speichern erfolgt die Weiterleitung zum erstellten Formular. 

Einfaches Formular

Screenshot von Element anlegen
Screenshot von Element anlegen
Screenshot von Titel eintragen
Screenshot von Titel eintragen
Screenshot von Titelposition festlegen
Screenshot von Titelposition festlegen
Screenshot von Feldeinstellungen
Screenshot von Feldeinstellungen

Nach dem Erstellen muss das Formular mit Feldern befüllt werden. 

1. Button "Element hinzufügen"
benötigtes Feld auswählen, z.B. Textfeld 

2. Titel und evtl. Beschreibung eintragen 

3. Einstellen, wo der Titel angezeigt werden soll 

4. Feldeinstellungen vornehmen, z.B. als Pflichtfeld setzen und eigene Nachricht eingeben und/oder Zeichenbegrenzung einstellen 

5. Schritt 1 - 4 wiederholen, bis alle benötigten Felder eingefügt sind

Um Seiten/Elemente zu löschen
Seite/Element anklicken > unten neben "Speichern" ist ein Button zum Löschen > Abfrage, ob das Element wirklich gelöscht werden soll, bestätigen 
oder 
in der gewünschten Zeile rechts auf den kleinen Pfeil neben "Bearbeiten" drücken und dort "Löschen" auswählen

Seite erstellen

Screenshot von Bereich wählen
Screenshot von Bereich wählen
Screenshot von Bereich wählen
Screenshot von Bereich wählen
Screenshot von Titel ausfüllen
Screenshot von Titel ausfüllen
Screenshot von Einfügen des Webformulars
Screenshot von Einfügen des Webformulars
Screenshot von Formular hinzufügen
Screenshot von Formular hinzufügen
Screenshot von großer Schaltfläche
Screenshot von großer Schaltfläche
Screenshot Formular aussuchen und speichern
Screenshot Formular aussuchen und speichern
Screenshot von URL-Alias
Screenshot von URL-Alias
Screenshot von Statusmeldung
Screenshot von Statusmeldung

Um eine Seite zu erstellen: 
 

1. Arbeitsbereich > Inhalt hinzufügen > Bereich wählen 

2. Inhaltstyp auswählen, z.B. Artikelseite 

3. Titel & weitere Felder ausfüllen 

4. zum Einfügen des Webformulars: Dropdown-Liste unter "Inhaltselemente" anklicken 

5. "Webformular hinzufügen" wählen 

6. die große Schaltfläche "Webformular" im Bereich darüber anklicken 

7. aus der Liste das gewünschte Formular wählen 
unter "WEBFORMULAR EINSTELLUNGEN" kann bestimmt werden, ob das Formular offen oder geschlossen sein soll

8. wenn alles fertig ist > "Speichern und Änderungen veröffentlichen (freigeben)" 

9. falls nicht schon vorher geschehen, hier den URL-Alias eingeben und bestätigen 

10. nach dem Speichern erscheint eine Statusmeldung 

11. das Formular kann nun betrachtet werden 
ACHTUNG! Nur veröffentlichte Seiten können angesehen werden.

Seite bearbeiten

Screenshot von Seite bearbeiten
Screenshot von Seite bearbeiten

Um nach der Ansicht die Seite erneut zu bearbeiten: 

1. oben im Menü auf Arbeitsbereich > "Ihr Arbeitsbereich" gehen 

2. oben rechts in der Seitenübersicht bei "Ihre neuesten Änderungen" bei gewünschter Seite Button "Bearbeiten" klicken 

Mehrseitiges Formular

GIF zum Erstellen des mehrseitigen Formulars
GIF zum Erstellen des mehrseitigen Formulars

Das Vorgehen ist ähnlich wie beim Einfachen Formular, nur mit dem Unterschied, dass zuerst eine Seite, der die Elemente untergeordnet werden, erstellt wird. 

1. Button "Seite hinzufügen"

2. Seitennamen angeben & festlegen, ob sie beim Seitenaufruf zuerst angezeigt werden soll 

3. rechts neben Seitennamen Button "Element hinzufügen"  

4. benötigte Elemente aussuchen & einfügen  

5. Schritt 1 - 4 wiederholen, bis alles benötigte eingefügt ist 

6. fertiges Formular speichern & in Seite einfügen 

Ausgewählte Elemente - OPTIONS ELEMENTS

Screenshot von Options Elements
Screenshot von Options Elements

OPTIONS ELEMENTS

1. Kontrollkästchen: Checkboxes

- unter Optionen -> Custom Optionen können eigene Werte eingegeben werden

- "Option value" ist der Wert, der neben dem Kästchen erscheint

- "Option text" überschreibt diesen Wert

- Beschreibung erscheint neben dem Wert 
 

2. Checkboxes other: wie Kontrollkästchen, nur mit zusätzlichem Feld für Nutzereingabe ("Weiteres")  

- gleiche Einstellungen wie bei Kontrollkästchen

- eine vom Benutzer eigegebene Antwort wird unter "OTHER OPTION SETTINGS" abgefragt 
 

3. Auswahl: Auswahl als Dropdown-Liste (Mehrfachauswahl) 

- gleiche Einstellungen wie bei Kontrollkästchen 
 

4. Auswahlknöpfe: Auswahlliste mit Radio-Buttons (Einfachauswahl)  

gleiche Einstellungen wie bei Kontrollkästchen

Ausgewählte Elemente - BEHÄLTER

Screenshot des Feldes Details
Screenshot des Feldes Details

BEHÄLTER 

1. Details: Dropdown-Box mit Text

- Text bei "Beschreibung" wird ein- und ausgeblendet

- dem Details-Feld können weitere Elemente untergeordnet werden

E-Mail Handler

Screenshot E-Mail-Handler
Screenshot E-Mail-Handler
Screenshot E-Mail-Handler
Screenshot E-Mail-Handler
Screenshot E-Mail-Handler
Screenshot E-Mail-Handler
Screenshot E-Mail-Handler
Screenshot E-Mail-Handler

Folgende Einstellungen müssen beim E-Mail Handler gesetzt werden: 

1. Webformular ->Einstellungen -> Emails/Handlers 

2. Button "Add email", um E-Mail Handler hinzuzufügen 

3. Titel eingeben 

4. SENDEN AN -> E-Mail-Feld des Formulars auswählen
an diese Adresse wird die Bestätigungs-E-Mail gesendet 

5. SEND FROM → bestaetigung@visitBerlin.de 
ACHTUNG! 
hier darf die E-Mail-Adresse nicht geändert werden, es sollte immer bestaetigung@visitBerlin.de eingetragen sein 

6. Absendernamen eintragen 

7. bei MESSAGE den Betreff und Textkörper eintragen 
Inhalt der Bestätigungs-E-Mail 

8. INCLUDED EMAIL VALUES -> Voreinstellungen belassen 
die Felder, die in der E-Mail angezeigt werden 

9. im Reiter "Erweitert" die Voreinstellungen belassen: 
- Enable the >>Titel<< handler.
- E-Mail senden ...when submission is completed. 
- Send email as HTML

Vorschauseite

Screenshot von Vorschaueinstellungen
Screenshot von Vorschaueinstellungen

Diese Formularseite wird vor dem Absenden der Formulareingabe angezeigt. 

1. Einstellungen > Formular > ganz unten VORSCHAUEINSTELLUNGEN 

2. Vorschauseite aktivieren auf Erforderlich setzen 
- Preview label: wird Fortschrittsbalken angezeigt
- Preview page title: wird auf der Vorschauseite angezeigt
- Nachrichten-Vorschau: die Mitteilung auf der Vorschauseite
- INCLUDED PREVIEW VALUES: die Elemente, die in der Vorschau sind 

3. Speichern

Formular Testversand

"Webformular" -> Test
befüllt das Formular mit Platzhaltertext 

Nach dem Klick auf "Test" wird man zum Formular weitergeleitet, welches mit Platzhaltern befüllt wird. Falls es ein mehrseitiges Formular ist, muss man sich durch die Seiten klicken. 

ACHTUNG! Das Formular wird tatsächlich abgeschickt und zählt als Eingabe. 

Bekannte Probleme: 
Das Formular wird tatsächlich abgeschickt und zählt als Eingabe. 

Formulareingaben auswerten

Unter "Webformular" -> "Resultate" können die Eingaben betrachtet, heruntergeladen und gelöscht werden. 

ACHTUNG! Beim Leeren werden alle Eingaben endgültig gelöscht. 

1517576777
1555068555