Ein tiefer Einblick in das Webform-Modul für Drupal 8/9

Veröffentlicht: 2021-10-12

Das Webform-Modul ist der leistungsstärkste und flexibelste Formularersteller und Übermittlungsmanager für Drupal. Es gibt Site-Buildern die Möglichkeit, schnell und einfach komplexe Formulare zu erstellen. Es wird mit einer bestimmten Stufe von Standardeinstellungen geliefert, mit denen Sie es auch an Ihre Anforderungen anpassen können.

Schauen Sie sich diesen erstaunlichen Blog an - Drupal 8 Webform Module - A Short Tutorial, um Ihnen den Einstieg in das Webform-Modul auf Ihrer Drupal 8/9-Site zu erleichtern. Dies wird Ihnen helfen, die Grundlagen leicht zu verstehen.

Das Webform-Modul wird mit vielen interessanten Funktionen geliefert, von denen ich hier einige erwähnen möchte.

Webformularmodul

Webform-Funktionen

1. Form & Elemente ändern

Jedes Formular, Element und die zugehörigen Einstellungen können mit den entsprechenden Hooks geändert werden. Im Folgenden sind einige Hooks aufgeführt, die Sie verwenden können. Weitere Informationen finden Sie in der Datei webform.api.php :

  • Haken formen

◦ Hook_webform_submission_form_alter()
◦ Nehmen Sie Änderungen vor, bevor ein Formular zur Übermittlung von Webformularen gerendert wird.

  • Elementhaken

◦ Hook_webform_element_alter()
◦ Webformular-Elemente ändern.

  • Optionshaken

◦ Hook_webform_options_alter()
◦ Webformular-Optionen ändern.

  • Handlerhaken

◦ Hook_webform_handler_invoke_alter()
◦ Auf einen Webformular-Handler reagieren, wenn eine Methode aufgerufen wird.

  • mehr Haken…

◦ hook_webform_access_rules_alter() usw..
◦ Ändern Sie die Liste der Zugriffsregeln, die pro Webformularebene verwaltet werden sollen.

2. YAML-Quelle

Das Webform-Modul begann als YAML-Formularmodul, mit dem Benutzer Formulare erstellen konnten, indem sie YAML-Markup schrieben. Irgendwann hatte das YAML-Formularmodul eine Benutzeroberfläche und wurde zum Webformularmodul für Drupal 8.

  • YAML bietet eine einfach und leicht zu erlernende Auszeichnungssprache zum Erstellen und Bearbeiten von Elementen eines Webformulars.
  • Auf der Seite (View) Source können Entwickler das Rendering-Array eines Webformulars mithilfe von YAML-Markup bearbeiten. Entwickler können die (View) Source-Seite verwenden, um Webformulare von Hand zu codieren, um die Labels eines Webformulars schnell zu ändern, mehrere Elemente auszuschneiden und einzufügen, Elemente neu anzuordnen sowie benutzerdefinierte Eigenschaften und Markups zu Elementen hinzuzufügen.
  • Hier ist ein Beispiel für ein Kontaktformular und den entsprechenden YAML-Quellcode:

Kontaktformular mit Drag-and-Drop-Benutzeroberfläche

Ein Kontaktformular mit Drag-and-Drop-Benutzeroberfläche

YAML-Quellcode

Der YAML-Quellcode des Kontaktformulars

3. Bedingte Felder

Mit Webform können Sie Ihren Elementen in Ihrem Formular bedingte Logik hinzufügen. Betrachten wir ein kleines Beispiel, bei dem wir die Sichtbarkeit von Elementen basierend auf dem Wert eines anderen Elements innerhalb des Formulars bedingt behandeln müssen.

Hier ist ein Beispielformular mit zweistufigen Feldern, SCHRITT 1 (Radios-Element) mit den Optionen 'E-Mail' und 'Handynummer'. SCHRITT 2 (Feldsatz) mit zwei Elementen, 'Email' und 'Mobile Number'.

Seite erstellen

Seite zum Erstellen von Formularen

Formularansichtsseite

Seite Formularansicht

Im obigen Beispiel möchte ich das Feld "E-Mail" anzeigen, wenn in Schritt 1 die Option "E-Mail" ausgewählt wurde, ansonsten das Feld "Mobilnummer" anzeigen, wenn in Schritt 1 die Option "Mobilnummer" ausgewählt wurde.

Um dies zu erreichen, bearbeiten Sie Ihr 'Email'-Feld, klicken Sie auf die Registerkarte 'Conditions', wählen Sie den 'State' als 'Visible' und setzen Sie den 'Trigger/Value' als 'STEP 1 [Radios] value is email'. Befolgen Sie die gleichen Schritte, um Ihrem Feld "Mobile Number" eine bedingte Logik hinzuzufügen und den "Trigger/Value" als "STEP 1 [Radios] value is mobile_number" festzulegen. Hier ist das endgültige Aussehen des Webformulars:

E-Mail-Element bearbeiten

Bedingungslogik einrichten

Schritt 1

Formular bei Auswahl von 'E-Mail' in SCHRITT 1

Schritt 2

Formular, wenn in SCHRITT 1 'Handynummer' gewählt wird

4. Eigenschaften von benutzerdefinierten Optionen

Mit Webform können Sie Ihren from-Elementen benutzerdefinierte Optionseigenschaften hinzufügen.

Stellen Sie sich ein Szenario vor, in dem Sie die Optionen eines Radioelements basierend auf dem Wert eines anderen Elements im Formular bedingt behandeln möchten. Wie würdest du das machen?

Nun, ich habe keine Möglichkeit gefunden, dies über die Einstellungen der bedingten Logik in der Benutzeroberfläche zu handhaben. Es gibt jedoch eine Vorkehrung zum Festlegen von "benutzerdefinierten Optionseigenschaften" für Ihr Element, wobei Sie die erforderliche bedingte Logik schreiben, die auf Ihre Optionen innerhalb des Elements unter Verwendung des YAML-Codes abzielt.

Hier ist ein Beispiel, in dem wir zwei Radioelemente sehen können und basierend auf der Option, die ich im ersten Element auswähle, sollte sich die Sichtbarkeit der Optionen im zweiten Element ändern.

Seite zum Erstellen von Formularen

Seite zum Erstellen von Formularen

Benutzerdefinierte Option

Formularansichtsseite, bevor Sie benutzerdefinierte Optionseigenschaften hinzufügen:

  • Wenn 'Typ A' gewählt wird, sollten 'Option 1' und 'Option 2' vom zweiten Element aus sichtbar sein. Wenn 'Typ B' gewählt wird, sollten in ähnlicher Weise 'Option 3' und 'Option 4' sichtbar sein. Um dies zu erreichen, bearbeiten Sie das zweite Element, gehen Sie zum Tab "Erweitert", scrollen Sie nach unten zu den Abschnitten "Optionen (benutzerdefinierte) Eigenschaften" und schreiben Sie die erforderliche Logik in YAML.
OptionselementOptionselement bearbeiten

Einrichten der Optionseigenschaften

Typ auswählen

Formular, wenn 'Typ A' gewählt wird

Wählen Sie Typ B

Formular, wenn 'Typ B' gewählt wird

5. E-Mail-Handler für die Übermittlung von Webformularen

  • E-Mail-Handler

E-Mail-Handler sendet eine Webformular-Übermittlung per E-Mail. Um Ihrem Webformular E-Mail-Handler hinzuzufügen, gehen Sie zu "Einstellungen" und dann zur Registerkarte "E-Mails/Handler". Klicken Sie anschließend auf die Schaltfläche 'E-Mail hinzufügen / Handler hinzufügen'.

E-Mail-Handler

E-Mail-Handler hinzufügen

  • Wie in der folgenden Abbildung gezeigt, fügen Sie auf der Registerkarte "Allgemein" den "Titel" hinzu und legen Sie die Details "Senden an" und "Senden von" fest. Fügen Sie nach Bedarf die Nachricht 'Betreff' und 'Text' hinzu und speichern Sie das Konfigurationsformular.
Email BestätigungBestätigungs-HandlerE-Mail-BestätigungshandlerNachrichtTitel Beschreibung

Und das war's. Ihr Handler wird gefeuert, wenn das Formular gesendet wird.

  • Sie können auch bedingte E-Mail-Handler für Ihr Webformular festlegen, dh verschiedene E-Mail-Handler basierend auf dem Wert bestimmter Elemente im Formular auslösen.
  • Betrachten wir zum Beispiel ein 'Select'-Element mit den Werten 'Type 1' und 'Type 2'. Wenn der Benutzer 'Typ 1' übermittelt, lösen Sie den 'E-Mail - Typ 1'-Handler aus, der die 'An'-Adresse auf ' [email protected] ' gesetzt hat. Wenn der Benutzer 'Typ 2' übermittelt, lösen Sie den 'E-Mail - Typ 2'-Handler aus, der die 'An'-Adresse auf ' [email protected] ' gesetzt hat.
  • Um Ihrem E-Mail-Handler bedingte Logik hinzuzufügen, erstellen Sie einen Handler und nennen Sie ihn "E-Mail - Typ 1". Setzen Sie die 'An'-Adresse auf ' [email protected] ', wechseln Sie zur Registerkarte 'Bedingungen', wählen Sie den 'Status' als 'Sichtbar' und setzen Sie den 'Trigger/Wert' als 'Typ auswählen [Auswahl] Wert ist Typ_1'.
  • Erstellen Sie auf ähnliche Weise den zweiten Handler und nennen Sie ihn "E-Mail - Typ 2". Setzen Sie die 'An'-Adresse auf ' [email protected] ', wechseln Sie zur Registerkarte 'Bedingungen', wählen Sie den 'Status' als 'Sichtbar' und setzen Sie den 'Trigger/Wert' als 'Typ auswählen [Auswahl] Wert ist Typ_2'.
E-Mail-Typ

  • Geplante E-Mail-Handler

    • Es erweitert den E-Mail-Handler des Webform-Moduls, um die Planung von E-Mails zu ermöglichen. Um diese Funktion zu verwenden, aktivieren Sie das Untermodul 'Webform Scheduled Email Handler'.
    • Um das Senden einer E-Mail mit den Formulareinsendungen zu planen, klicken Sie auf die Schaltfläche „Handler hinzufügen“. Wählen Sie hier den Handler 'Geplante E-Mail' aus.
Handler auswählen

Es gibt nur eine zusätzliche Konfigurationseinstellung im 'Scheduled Email'-Handler im Vergleich zum normalen 'E-Mail-Handler'. Und das heißt, das E-Mail-Datum planen unter der Registerkarte Allgemeine Einstellungen hinzuzufügen.

E-Mail-Handler planen

Geplanter E-Mail-Handler

Legen Sie das Datum fest, an dem Ihr Handler ausgelöst wird, und wenn der nächste Cron ausgeführt wird, wird Ihre E-Mail gesendet!

Hilfe finden

Es gibt verschiedene Möglichkeiten, um Hilfe zum Webformular-Modul zu erhalten. Hier ist eine Liste mit einigen Quellen:

  • Dokumentation, Kochbuch und Screencasts
    • https://www.drupal.org/docs/8/modules/webform
  • Warteschlange für Webformular-Probleme
    • https://www.drupal.org/project/issues/webform
  • Drupal-Antworten
    • http://drupal.stackexchange.com
  • Slack-Kanal
    • Sie können Ihre Fragen zum Webform-Modul jederzeit im #webform-Kanal im Drupal-Slack-Workspace posten. Jeder aus der Community, sogar der Modul-Maintainer selbst, ist immer da und ist so freundlich, Sie bei Ihren Problemen zu unterstützen.

Ein GROSSES Dankeschön an Jacob Rockowitz für seine unermüdliche Unterstützung für das Drupal 8/9 Webform-Modul. Ohne ihn wäre Webform nicht das, was es heute ist.