Drupal 8 Webform-Modul – Ein kurzes Tutorial

Veröffentlicht: 2020-04-07

Das Drupal 8 Webform-Modul ist ein beigesteuertes Modul und eines der leistungsstärksten und flexibelsten Module in Drupal 8. Es ist ein Open-Source-Modul, das zum Erstellen von Formularen und zum Verwalten der Einreichung verwendet wird. Drupal Webform hat es auch in unsere Liste der besten Drupal-Module geschafft, die Sie für Ihr nächstes Drupal-Projekt unbedingt benötigen! Erfahren Sie mehr über das vielseitige Modul in diesem Drupal 8-Webformular-Tutorial.

Drupal Webform ist ein äußerst vielseitiges Modul, das verwendet wird, um Formulare zu erstellen und Informationen von den Benutzern auf Drupal-Websites zu extrahieren. Mit dem Drupal-Webformular-Modul können wir beispielsweise Umfragen, Kontaktformulare, Feedback-Formulare und vieles mehr erstellen. Nach der Übermittlung ermöglicht dieses Modul das Senden von E-Mails an den Benutzer und kann Benachrichtigungen an den Administrator bezüglich der Übermittlung senden. Es gibt Optionen, um die Einreichung anzuzeigen, als Knoten, Seite oder Block zu veröffentlichen und die Ergebnisse in eine CSV-Datei zu exportieren.

Webform-Logo abgeleitet von Drupal.org/Webform

Webform-Logo abgeleitet von Drupal.org/Webform

Erste Schritte mit dem Drupal 8 Webform-Modul

Die Drupal-Community hat uns einige phänomenale Module zur Verfügung gestellt und Drupal Webform ist sicherlich eines davon. Jacob Rockowitz, der Builder und Betreuer des Webform-Moduls, hatte einmal mit uns über Webform und seinen Beitrag zur Drupal-Community diskutiert. „Jeder hat einen persönlichen Groove/Stil beim Erstellen von Software. Nachdem ich 20 Jahre lang Software geschrieben habe, habe ich akzeptiert, dass ich gerne auf ein einziges Ziel/Projekt hinarbeite, nämlich das Webform-Modul für Drupal 8. Gleichzeitig habe ich auch gelernt, dass das Erstellen von Open-Source-Software mehr ist als nur beitragender Code; es geht darum, eine Community rund um den Code zu unterstützen und zu schaffen.“ Lesen Sie hier mehr über Jacob und viele weitere Mitwirkende der Drupal-Community.
Beginnen wir nun mit der Installation des Drupal 8-Webformularmoduls und dem Erstellen von Webformularen.

Installieren und aktivieren Sie das Drupal Webform-Modul

Laden Sie das Drupal 8 Webform-Modul von https://www.drupal.org/project/webform herunter und aktivieren Sie es.

Installieren und aktivieren Sie Drupal 8

Um das Webformular zu aktivieren, gehen Sie zu Erweitern und in der Kategorie Webformular sehen Sie ein Webformular zusammen mit dem Kontrollkästchen. Um mit Drupal 8 zu arbeiten, aktivieren Webformulare die Feld-API, das Systemmodul und das Benutzermodul. Ohne die Aktivierung dieser drei Module kann das Webformular nicht aktiviert werden.
Unter Webformular gibt es viele Optionen, die spezifische Funktionen bereitstellen. Aktivieren Sie sie gemäß den Anforderungen.

Erstellen Sie ein neues Drupal-Webformular

Um ein neues Drupal 8-Webformular zu erstellen, aktivieren Sie die Webform-Benutzeroberfläche und den Webformular-Zugriff. Die Webform-Benutzeroberfläche bietet eine gute Benutzeroberfläche zum Erstellen / Verwalten von Webformularen und Webform Access steuert die Webform-Knoten. Aktivieren Sie den Webform-Knoten, bevor Sie den Webform-Zugriff aktivieren. Gehen Sie dann zu Struktur > Webformulare .

Erstellen Sie ein neues Webformular

Hier sind einige Optionen für Webformulare.

  • Auf der ersten Registerkarte, Formulare, befindet sich eine Liste der erstellten Webformulare. Standardmäßig ist ein Kontaktformular vorhanden. Dies ist die Vorlage, die vom Webform-Modul bereitgestellt wird.
  • Weitere Vorlagen finden Sie im zweiten Reiter Vorlagen.
  • Auf der Registerkarte Einreichungen können wir die von den Benutzern eingereichten Formulare anzeigen.
  • Optionen haben einen vordefinierten wiederverwendbaren Satz von Werten, die für die Optionsfelder, Kontrollkästchen und Menüs verfügbar sind.
  • Auf der Registerkarte Add-ons befinden sich einige weitere wiederverwendbare Werte.
  • In Konfigurationen werden allgemeine Einstellungen der Webformulare bereitgestellt.

So erstellen Sie ein neues Webformular –

  1. Klicken Sie auf Webformular hinzufügen.
  2. Wenn Sie auf Webformular hinzufügen klicken, öffnet sich eine Registerkarte mit Titel, Beschreibung, Kategorie und Status.
  3. Fügen Sie dem Webformular einen Titel und eine kurze Beschreibung zum Webformular hinzu.
  4. Am Ende gibt es unter Status zwei Optionen offen und geschlossen. Das heißt, wenn der Status ' offen ' ist, steht das Formular dem Benutzer zur Verfügung, ansonsten ist es geschlossen. Nachdem Sie alle Optionen bearbeitet haben, klicken Sie auf Speichern . Hier lautet der Titel beispielsweise ' Registrierung '.
Webformular Felder hinzufügen

Hinzufügen von Feldern zum Drupal 8-Webformular

Beim Klicken auf Speichern öffnet sich eine Seite mit dem Titel des angegebenen Webformulars (hier – Registrierung).

Webformular-Registrierung


● Um die Felder zum Webformular hinzuzufügen, klicken Sie auf + Element hinzufügen.
● Wenn Sie auf + Element hinzufügen klicken , erscheint ein Popup mit der Liste der Felder, die im Webformular verwendet werden können.

Elemente im Webformular hinzufügen


Um eine Vorschau der Elemente anzuzeigen, klicken Sie oben rechts auf Vorschau anzeigen. Um das Element hinzuzufügen, klicken Sie auf das Element hinzufügen des jeweiligen Elements. Beim Anklicken öffnet sich das Popup auf der rechten Seite der Seite.

Webformularelemente


Hier gibt es Optionen zum Bearbeiten des Titelnamens und viele erweiterte Einstellungen für das Feld. Nachdem Sie alle Einstellungsänderungen vorgenommen haben, klicken Sie am Ende auf die Schaltfläche Speichern . Klicken Sie bei allen Pflichtfeldern im Webformular auf das Kontrollkästchen unter Erforderlich.

● Sie können das erstellte Webformular anzeigen, indem Sie oben auf die Registerkarte Ansicht klicken. Die Schaltfläche Senden wird automatisch erstellt, wenn ein Element zum Webformular hinzugefügt wird.
Die Registerkarte Test ermöglicht das Testen des erstellten Webformulars. Die Werte in den Formularfeldern werden automatisch mit Zufallswerten gefüllt.
● Auf der Registerkarte Ergebnis können die Werte des gesendeten Formulars angezeigt werden. Unter der Registerkarte Ergebnis gibt es drei Optionen.

  1. Liste aller eingereichten Formulare unter der Registerkarte " Einreichen" .
  2. Eingesendete Ergebnisse können in vier Formaten heruntergeladen werden – Text mit Trennzeichen, HTML-Tabellen, JSON-Dokument oder Yaml-Dokument auf der Registerkarte Download .
  3. Kann die eingereichten Formulare in der Registerkarte "Ergebnisse löschen" löschen .

● Die Registerkarte Einstellungen enthält die allgemeinen Einstellungen der Webformulare, die entsprechend den Anforderungen des Benutzers geändert werden können.

● Die Konfiguration des Drupal-Webformulars kann von der Registerkarte Export heruntergeladen werden. Die Konfiguration wird angezeigt und kann durch Klicken auf die Schaltfläche Download am Ende der Seite heruntergeladen werden. Die Konfiguration wird im Yaml- Format heruntergeladen, da die Yaml-Konfigurationsdatei problemlos in eine andere Drupal-Instanz importiert werden kann.

Hinzufügen von Inhalten zum Drupal-Webformular

Sobald das Drupal 8 Webform-Modul aktiviert ist, wird ein Inhaltstyp mit dem Namen ' webform ' erstellt. Es hat Felder wie Titel, Text und Webformular. Das Webformular hat eine Dropdown-Liste mit allen erstellten Webformularen.

Um den Inhalt zum Webformular hinzuzufügen, gehen Sie zu Inhalt > Inhalt hinzufügen > Webformular . Wie bereits erwähnt, wird es einen Titel und einen Textkörper geben. Es gibt ein Dropdown-Menü mit der Bezeichnung Webform, das die Titelnamen aller erstellten Webformulare enthält.

Web-Formular

Daneben gibt es eine weitere Option namens ' Webform-Einstellungen '.

Webformulareinstellungen

Im Status gibt es drei Optionen: Offen (um das Formular für die Benutzer geöffnet zu halten), Geschlossen (um das Formular für die Benutzer zu schließen) und Geplant ( es wird das Datums- und Uhrzeitfeld bereitgestellt und entsprechend dem angegebenen Datum und der angegebenen Uhrzeit das Formular wird den Benutzern zum Ausfüllen offen gehalten).

Sie können auch Standarddaten bereitstellen, indem Sie das Feld Standardübermittlungsdaten mit einem verfügbaren Token ausfüllen. Ein Token kann durch Klicken auf Verfügbare Token durchsuchen durchsucht werden. Beispiele zum Schreiben des Tokens können durch Klicken auf den Link Beispiel angezeigt werden. Und kann alle eingereichten Formulare auf der Registerkarte Ergebnis anzeigen.

Hinzufügen des Drupal 8-Webformulars als Feld in Inhaltstypen

Um das Drupal-Webformular im Inhaltstyp hinzuzufügen, gehen Sie zu Struktur > Inhaltstypen > Felder des Inhaltstyps verwalten, für den das Formular erforderlich ist.

Klicken Sie auf das Feld Hinzufügen . Wählen Sie unter Neues Feld hinzufügen im Abschnitt " Referenzen " " Webformular " aus, geben Sie diesem Feld eine Bezeichnung und klicken Sie auf "Speichern und fortfahren".

In den Feldeinstellungen können Sie die Anzahl der zulässigen Werte für das Feld angeben und auf 'Feldeinstellungen speichern' klicken.

Sie können das Standardformular aus dem Standardwert auswählen oder auf ' Einstellungen speichern ' klicken.

Gehen Sie nun zu Inhalt > Inhalt hinzufügen und wählen Sie den Inhaltstyp aus, der ein Feld hat, das auf die Webformulare verweist.

Web-Formular

Wählen Sie aus der Dropdown-Liste das Formular aus, das für diesen Inhalt benötigt wird. Das gesendete Formular kann in der Registerkarte Ergebnis dieses Inhalts angezeigt werden.

Hinzufügen von Captcha in Drupal-Webformularen

Sie müssen gesehen haben, dass Captcha auf vielen Websites weit verbreitet ist. Vor dem Absenden eines Formulars stellt es eine Frage und bittet den Benutzer um eine Antwort. Dies verhindert, dass die Bots die Server überlasten, indem sie viele Formular- und E-Mail-Übermittlungen vornehmen.

Mit Drupal Webform können Sie das Captcha-Element hinzufügen, während Sie das Webformular erstellen. Drupal-Webformular-Captcha erfordert, dass Sie das Captcha-Modul aktivieren.

Schritte zum Hinzufügen von Drupal-Webformular-Captcha in Formularen:

Laden Sie das Captcha-Modul von www.drupal.org/project/captcha herunter und aktivieren Sie es .

Navigieren Sie zu Struktur > Webformulare .

Klicken Sie auf den Build des Formulars, für das Captcha erforderlich ist.

Klicken Sie auf Element hinzufügen und erweitern Sie Erweiterte Elemente . Durch Erweitern der Liste können die erweiterten Elemente angezeigt werden. Klicken Sie auf Captcha- Element hinzufügen, um das Captcha hinzuzufügen.

Webformulare captcha

Ein Klick auf Element hinzufügen öffnet rechts ein Einstellungsfenster. Aktivieren Sie das Kontrollkästchen Admin- Modus, damit der Administrator das Captcha debuggen und anzeigen kann.

Und im Herausforderungstyp haben wir 2 Optionen - Mathematik und Bild. Sie können eine Ihrer Optionen auswählen. Klicken Sie dann auf Speichern und auf Elemente speichern .

Fügen Sie das Feld im Inhaltstyp des Feldtyps Webform hinzu und verweisen Sie auf das Formular, für das das Captcha hinzugefügt wird.

Gehen Sie nun zu Inhalt > Inhalt hinzufügen > und zum Inhaltstyp, der ein Feld hat, das auf das Formular verweist.

Füllen Sie den Titel aus und speichern Sie den Inhalt. Wenn Sie den Inhalt anzeigen, wird das Formular zusammen mit dem Captcha veröffentlicht. Vor dem Aktivieren des Senden-Buttons sollte das Captcha-Feld ausgefüllt werden, sonst wird das Formular nicht gesendet und gibt die Warnmeldung aus.

drupal 8 Webformular

Vorteile des Drupal Webform-Moduls

Das Drupal Webform-Modul ist Open Source, d. h. es ist kostenlos und Sie benötigen nur Zeit zum Einrichten und Konfigurieren der Formulare.

Sie können Formularvalidierungen auch über Hooks, Webformular-Handler oder das Drupal Webform Validation-Modul durchführen. Das Drupal-Webformular-Validierungsmodul fügt dem Knoten eine zusätzliche Registerkarte hinzu, auf der Sie Ihre eigenen Validierungsregeln anpassen und erstellen können.

Diese Webformulare sind flexibel und ermöglichen die Anpassung der in den Formularen verwendeten Felder.

Es bietet viele Optionen in einer einzigen Installation, wie das Senden von Benachrichtigungen und E-Mails an den Benutzer und den Administrator.

Drupal Webforms macht es einfach, die Ergebnisse der Übermittlung zu exportieren. Benutzer können das Ergebnis des gesendeten Formulars in der Admin-Oberfläche anzeigen und das Ergebnis auch im CSV-Format exportieren, indem sie auf eine einzige Schaltfläche klicken.