Zum Hauptinhalt springen

Formulare

Formulare auf den ZUG-Websites nutzen immer ein Captcha. Zum Schutz der Bestätigungsmails setzen wir außerdem immer ein Double Opt-in ein.

3 Ebenen

Wenn ihr eine Seite mit einem Formular anlegen wollt, müsst ihr beachten, dass es im Prinzip um 3 Inhaltsebenen geht:

  1. Die Seite, in der das Plugin liegt
  2. Das Plugin "Powermail", in dem das Formular liegt
  3. Das Formular selbst.

Vorteil dieses Aufbaus ist, dass ihr Seite und Konfiguration des Plugins jedes Mal individuell gestalten könnt, obwohl ihr dasselbe Formular verwendet.

Daher: Bitte immer vor Anlegen eines neuen Formulars prüfen, ob es nicht bereits ein passendes gibt (z.B. das Anmeldeformular einer vergangenen Veranstaltung).

Durch die Einbindung des "alten" Formulars in eine neue Seite mit Plugin ist sichergestellt, dass die Daten getrennt sgespeichert werden (alte und neue Anmeldungen werden also nicht gemischt).

Aber: Das funktioniert am besten, wenn ihr das Formular nicht ändert! Nehmt ihr Änderungen an einem bestehenden Formular vor, gelten diese grundsätzlich, also auch für alle anderen Seiten, in denen das Formular eingebunden ist. Das kann zu Problemem führen, wenn ihr es gleichzeitig nutzt. Wenn das Formular aber an anderen Stelle nicht mehr aktiv genutzt wird, könnt ihr es auch ändern.

Oder ihr legt ein neues an.

1. Seite anlegen

Leg eine Seite im Seitenbaum an, in der dein Formular eingebunden sein soll. Die Seite soll im Ordner "Formulare (PowerMail)" (id=157) angelegt werden. So haben wier immer den Überblick über alle Seiten mit Formular und können sie deaktivieren, wenn sie nicht mehr gebraucht werden (IT- und Datenschutz!!!)

2. Plugin anlegen und einstellen

In der neu angelegten (oder überarbeiteten Seite, ihr könnt natürlich bestehende Seiten nutzen, z.B. von vergangenen Veranstaltungen) das Plugin "Powermail" anlegen. Das geht über "Inhaltselement hinzufügen" => Plugins.

Im Plugin nehmt ihr folgende Einstellungen vor:

  1. Auswahl eines bestehenden Formulars oder Anlegen eines neuen Formulars
  2. Bitte immer ankeuzen: E-Mail muss bestätigt werden (Double Opt-In)
  3. E-Mail an uns
  4. E-Mail an Absender*in des Formulars
  5. Bestätigungsseite, die angezeigt wird, wenn das Formular abgeschickt wurde
  6. Von wann bis wann das Formular angezeigt werden soll. HIerzu bitte auch die Tipps & Tricks beachten

Mail an Formular-Empfänger*in / Mail to Receiver

Das ist die E-Mail, die Redaktion oder das Fachteam vom System erhält, wenn ein(e) User*in auf der Webseite ein Formular ausfüllt und abschickt.

  1. Receivers Email (blau) muss ausgefüllt sein, sonst erscheint auf der Bestätigungsseite für die User*in des Formulars: "Fehler beim Versenden der Mail!"
  2. Subject for Email to Receiver (orange) muss ausgefüllt sein, sonst erhält der verantwortliche Redakteur keine E-Mail.
  3. Variable {powermail_all} (blau) nur setzen, wenn wirklich notwenig, sonst löschen.

Mail an Formular-Absender*in / to User

  1. Subject for Email to Sender (orange) muss ausgefüllt sein, sonst geht keine E-Mail an den Anwender des Formulars.
  2. Variable {powermail_all} (blau) sollte nicht gesetzt werden bzw. muss gelöscht werden.

Diese E-Mail-Funktion dürft ihr nicht verwenden, wenn das Formular kein Double Opt-in nutzt.

Bitte gebt in dieser E-Mail auch eine Kontakt-Möglichkeit an. Die Mail wird über eine no-reply-Adresse versendet, auf die User*innen nicht antworten können. Es ist daher wichtig, dass sie im Mailtext eine Kontaktmöglichkeit finden. 

Ergebnis

Mail to User (Formular Anwender)

Ergebnis

Mail to Receiver (ZUG-intern)

Bestätigungsseite

  1. Hier den Text eintragen, der auf der Website angezeigt werden soll, nachdem die/der User*in auf den "Absenden"-Button geklickt hat.
  2. Variable {powermail_all} (blau) darf nicht gesetzt bzw. gelöscht werden.

3. Formular aussuchen/anlegen

Im Plugin könnt ihr ein Formular auswählen (Auswahlliste) und seid dann auch schon fertig.

Oder ihr legt ein neues Formular an (über das Plus).

Formular erstellen

  1. Tragt eine Bezeichnung für das Formular ein. Diese Bezeichnung erscheint später als Überschrift über dem Formular im Frontend.
  2. Den daraufhin erscheinenden orangefarbenen Hinweis könnt ihr ignorieren.
  3. Jetzt auf "Seiten neu erstellen" klicken.
  4. Bei "Bezeichnung" eine Aufforderung oder einen Hinweis für die User*innen eintragen. Dieser Eintrag wird im Formular angezeigt. Er kann aber (auch später noch) deaktivier werden, indem ihr unter dem Reiter "Erweitert" bei "Layout" die Option "Bezeichnung verstecken" wählt.
  5. Klickt auf "Felder neu erstellen".
  6. Jetzt beginnt die eigentliche Arbeit am Formular. Das Formular hat mehrere Eingabefelder

Formularfelder anlegen

  1. Mit dem Drop-Down-Menü unter "Typ" die Art des Eingabefeldes auswählen, z.B. "Textfeld" (ist default ausgewählt).
  2. Bei "Bezeichnung" tragen die Bezeichnung des Feldes eintragen, z.B. "Nachname".
  3. Das Häkchen bei "Dieses Feld beinhaltet die E-Mail des Absenders" müssen setzen, wenn ihr in diesem Feld die E-Mail-Adresse abfragen. Das ist wichtig! Es können sonst keine automatischen E-Mails versendet werden.
  4. Mit Klick auf "Felder neu erstellen" oder auf das Plus-Symbol legt ihr weitere Eingabefelder an.
  5. Mit dem Hamburger-Symbol könnt ihr (später) per Drag-and-Drop die Reihenfolge der Felder ändern. Dazu müssen neue Felder aber zunächst abgespeichert worden sein.

Autocomplete

Aus Gründen der Barrierefreiheit und weil es auch super praktisch ist, können wir bei den gängigen Feldern mit personenbezogenen Daten autocomplete-Parameter hinterlegen. Die sorgen dafür, dass z.B. im Browser oder Handy gespeicherte Adressdaten automatisch ausgefüllt werden (wenn die/der User*in das möchte). Hier lernt ihr, wie ihr die Autocomplete-Funktion und wie ihr das umsetzt. Bitte macht euch diese zusätzliche Mühe!

Typen von Formularfeldern

Für die Felder desFormulars stehen im Drop-Down-Menü unter "Typ" folgende Standardoptionen zur Verfügung.

  • Textfeld (Input): einzeiliges Textfeld, z.B. für den Namen oder die E-Mail-Adresse. Bei dem Textfeld, in das die E-Mail-Adresse eingegeben wird, muss das Häkchen bei "Dieses Feld beinhaltet die E-Mail des Absenders" gesetzt sein.
  • Textfeld Mehrzeilig (Textarea): mehrzeiliges Textfeld für längere Eingaben
  • Auswahlfeld: Auswahlliste zwischen mehreren Möglichkeiten mittels Drop-Down-Menü. Die Optionen für die Auswahl müssen im Feld darunter eingetragen werden: Eine Option pro Zeile!
  • Mehrfachauswahl (Checkbox(en)): Auswahl mittels Häkchen (mehrere Antworten sind möglich). Die Optionen für die Auswahl müssen im Feld darunter eingetragen werden: Eine Option pro Zeile!
  • Einfachauswahl (Radiobutton): Auswahl mittels Punkten (nur eine Antwort ist möglich). Die Optionen für die Auswahl müssen im Feld darunter eingetragen werden: Eine Option pro Zeile!
  • Ggf. Einverständnis für Foto-/Videoaufnahmen (funktioniert wie Datenschutz); Das Team Veranstaltungen sollte eine Vorlage haben.
  • Datenschutzerklärung: Das letzte Feld  muss die Einverständniserklärung zum Datenschutz sein. Hierfür wählen bei "Typ" die Option "Mehrfachauswahl" nehmen und  dann bei "Optionen" den Text der Vorlage eintragen, ggf. für eure Zwecke anpassen müssen. Nicht vergessen, unter dem Reiter "Erweitert" das Häkchen bei "Pflichtfeld" zu setzen. Siehe hierzu auch die weiteren Ausführungen unten
  • Abschicken Feld (Submit): Absendebutton
  • Captcha: Immer ein Captcha im Formular einbinden

Pflichtfelder

Es gilt das Prinzip der Datensparsamkeit! Pflichtfelder sollten in der Regel nur "E-Mail" und "Datenschutzerklärung" sein! Abweichungen müssen mit der Datenschutzbeauftragten abgestimmrt werden. Im  Reiter "Erweitert" könnt ihr einstellen, dass ein Feld ein Pflichtfeld sein soll.

Einverständniserklärung Datenschutz

Das Formular muss auch immer eine Einverständniserklärung zum Datenschutz enthalten. Dafür legt ihr eine Checkbox als Pflichtfeld an und gibt diese Auswahloption an:

Deutsch

Über die <f:link.page pageUid="215" target="_blank">Erklärung zum Datenschutz</f:link.page> bin ich informiert und akzeptiere sie.|ja

Englisch

I have been informed about the <a target="_blank" href="/en/privacy-policy/">privacy policy</a>, and I accept it.