Formulare Website

Formulare Spezielles

Folgende zwei Spezial-Funktionalitäten sind weder intuitiv noch offensichtlich. Fazit ist aber, dass, wenn man die Vorlagen benutzt, um neue Formulare zu kreieren, alles schon richtig eingestellt ist. (Im Oktober 2022 wurde alle Formulare überprüft.)

Verwendung und Veröffentlichung von Fotoaufnahmen (Checkbox)

Problem

Bei der Checkbox für die Einwilligung der Fotoaufnahmen ergeben sich folgende Probleme:

  • Wenn der Text in der Checkbox-Beschreibung eingefügt wird, ist der Text zu klein und man kann diesen nicht formatieren (zB. Paragraphen einsetzen). Beispiel zu kleiner Text bei der Checkbox-Beschreibung
  • Wenn ein HTML-Text vor einer Checkbox gestellt wird, ist kein Zusammenhang (technischer Art, für Screenreader) ersichtlich zwischen Text (davor) und Checkbox. Anzeige der zwei unabhängigen Elemente und die Lösung.

Lösung

Falls die Checkbox den Schlüssel (Code-Feldname) ‚photo_publication_acknowledgment‚ hat, bezieht sich die Checkbox auf den vorangehenden HTML-Text. So kann der Screenreader richtig mitteilen, welcher Text gemeint ist, das man zur Kenntnis nimmt.

  • Einfaches HTML: photo_publication_text
  • Checkbox: photo_publication_acknowledgment

Wenn für neue Formulare immer eine Vorlage benutzt wird, muss man hier nichts korrigieren.

Auto-complete

Damit die Browser schon (früher) gemachte Eingaben von Nutzer:innen vorschlagen können, sollen bei den Webforms immer die gleichen Schlüssel (Code-(Feld-)Namen) für die Felder benutzt werden, gemäss folgender Liste.

Feldtitel: Schlüssel

  • Salutation/Anrede: salutation
  • First Name/Vorname: first_name
  • Last Name/Nachname: last_name
  • E-mail: mail
  • Telephone (Contact Tracing): telephone
  • Institution / School / Company: company
  • Position: position

Liste der Feldtitel mit zugehörigem Schlüssel.

Wenn für neue Formulare immer eine Vorlage benutzt wird, muss man hier nichts korrigieren.

Weitere schon benutzte Felder

  • Date of birth/Geburtsdatum: date_of_birth (‚geburtsdatum‘ wurde auch schon benutzt)
  • Age/Alter: age
  • Gender/Geschlecht: gender
  • Date/Datum: date_today
  • Place/Ort: place

Abfrage des Geschlechts

Um in einem Formular die Abfrage des Geschlechts zu machen muss ein Element vom Typ Radio other mit speziellen Einstellungen hinzugefügt werden. Die drei Werte Männlich, Weiblich und Keine Angabe sind bereits vorbereitet. Lediglich das Feld für Weiteres Geschlecht muss jeweils noch hinzugefügt werden. Dieses Feld lässt sich leider nicht in der Vorlage abbilden, da es zuerst ein zusätzliches Eingabefeld öffnen wird, wie in der folgenden Abbildung gezeigt.

Formularfeld Geschlecht. Teil 1 bei Auswahl m/f oder na, Teil 2 bei Auswahl von Weiteres

Im folgenden die Schritte um ein Feld für die Abfrage des Geschlechts in ein Formular einzufügen.

  • Als Element Typ Radios other auswählen
  • Bei Optionen Geschlecht oder Gender auswählen
  • Bei Options display Side by side auswählen
  • Unter Other option settings wird das Other option label mit dem Text “Weiteres” ausgefüllt
  • Unter Other title wird auch “Weiteres” ausgefüllt
  • Unter Other placeholder wird “Weiteres Geschlecht…” ausgefüllt

Nach Bedarf muss auch noch die Übersetzung auf Englisch hinzugefügt werden mittels folgender Schritte.

  • Wechsel auf Übersetzung um Englische Übersetzung hinzufügen.
  • Auswahl der Englischen Übersetzung
  • Titel: Geschlecht auf “Gender”
  • Other option label: Weiteres auf “Other”
  • Other title: Weiteres auf “Other Gender”
  • Other placeholder: Weiteres Geschlecht… auf “Enter other…”

Nun haben wir auch eine richtige Englische Übersetzung.

Formulare vor Missbrauch schützen mit Captchas

Um missbräuchliche Verwendung (z.B. Spam-Versand) der Drupal-Formulare durch Bots weitgehend zu verhindern ist es notwendig Captchas einzusetzen. Die HfH hat sich entschieden dazu die Google-reCAPTCHA-V3-Technologie zu verwenden. Bei diesem «reCAPTCHA V3» wird Missbrauch vermieden, ohne dass der User etwas ausfüllen muss. Dieses reCAPTCHA-V3 ist für den Benutzer erkennbar am blauen reCAPTCHA Logo unten rechts auf der Webseite. Alle Formulare auf der HfH-Website müssen damit ausgestattet werden.

reCAPTCHA Info

Das Captcha wird in ein Formular eingebaut wie ein Formularelement. Die Schritte dazu sind nachfolgend aufgelistet und mit drei Screenshots illustriert.

  1. Add Element
  2. Suche nach Captcha-Element und füge es hinzu
  3. Konfigurieren des Challenge type als no_action (from module recaptcha_v3)

Drupal Form Builder, wähle Add element

 

Suche nach Captcha

Konfiguriere no_action

 

 

Lizenz

Anleitungen HfH: Umfragen und Formulare Copyright © DLC. Alle Rechte vorbehalten.