Drupal: Professionelle Formulare mit Webform

In Drupal lassen sich einfache Kontaktformulare anlegen. Wie das funktioniert, wurde im Rahmen dieser Tutorial-Reihe bereits gezeigt. Früher oder später will man aber auch anspruchsvollere Formulare auf seiner Webseite haben. Und hier kommt man mit den Bordmitteln von Drupal nicht weiter. Für Drupal gibt es aber – und das ahnt ihr sicherlich – zahlreiche Formular-Erweiterungen. Eine der interessantesten, nämlich Webform, wird in diesem Tutorial vorgestellt.

Wir empfehlen:
Drupal-Training

Wer komplexe Formulare anlegen will oder muss, der sollte sich das Modul Webform (http://drupal.org/project/webform) genauer ansehen. Denn mit Webform lassen sich verschiedene Felder und Feldarten zu einem Formular zusammenfassen. Damit aber nicht genug: Auch die Auswertung der Formulardaten ist mit Webform möglich. Ladet euch das Modul herunter und installiert es über Module>Neues Modul installieren>Datei auswählen>Installieren.

Anschließend muss das Modul unter Module im Bereich Webform aktiviert werden.

Übernehmt die Änderungen mit Konfiguration speichern. Durch die Aktivierung wird der neue Inhaltstyp Webform angelegt.

 

Webform konfigurieren

Auch dieses Modul kann und sollte man natürlich nicht ohne weitere Anpassungen auf seine Besucher loslassen. Zunächst gilt es demnach, das Modul zu konfigurieren. Die entsprechenden Einstellungen sind unter Konfiguration>Webform settings zu finden. Interessant ist dort zunächst einmal der Bereich Default E-Mail values.

Tragt hier Absender, Absendername und den standardmäßig zu verwendenden Betreff ein. Die Einstellungen können mit Konfiguration speichern übernommen werden. Damit sind die grundlegenden Optionen angepasst und man kann das erste Formular anlegen.

 

Ein Formular erzeugen

Das Webform-Modul ist recht komplex. Alle Optionen hier vorstellen zu wollen, würde daher zu weit führen. Hilfreich ist es aber sicherlich, wenn anhand eines Beispiels gezeigt wird, wie sich Formulare anlegen und auswerten lassen. Die folgenden Schritte zeigen genau das und bilden somit die Basis, auf der ihr später eure ganz individuellen Formulare anlegen könnt.

Um ein neues Formular anzulegen, ruft man Inhalt>Inhalt hinzufügen>Webform auf.

 

Tragt zunächst einen Titel ein. Im aktuellen Beispiel könnte dies Anfrage sein. Aktiviert außerdem die Option Menüpunkt erstellen. Öffnet anschließend den Bereich URL-Alias-Einstellungen und tragt in das Feld URL-Alias beispielsweise "anfrage.html" ein. Mit Speichern werden die Einstellungen übernommen. Daraufhin landet ihr auf der Seite, auf der das Formular letztendlich angepasst wird.

 

Das Register Webform ist in die drei Bereiche Form components, E-Mails und Form settings unterteilt. Im Bereich Form components werden die Formularfelder angelegt. Nehmt hier für das Feld Vorname folgende Einstellungen vor:

Beschriftung = Vorname
Typ = Textfeld

Aktiviert außerdem das Kontrollkästchen Mandatory. Dadurch muss das Vorname-Feld zwingend ausgefüllt werden.

Mit Hinzufügen werden die Einstellungen bestätigt. Daraufhin gelangt man zu einer etwas detaillierteren Konfigurationsseite. Hier könnt ihr beispielsweise die Maximallänge, die Breite des Feldes und einen Standardwert eintragen. Über Save component wird das Feld letztendlich angelegt. Auf diese Weise könnt ihr weitere Felder erzeugen. Im aktuellen Fall wird von folgenden Einstellungen ausgegangen:

Beschriftung = Name
Typ = Textfeld

Feld E-Mail:
Beschriftung = E-Mail
Typ = E-Mail

Feld Informationen:
Beschriftung = Informationen
Typ = Select options

Beim Feld Informationen müssen, nachdem auf Hinzufügen geklickt wurde, die im Auswahlfeld anzuzeigenden Daten in das Feld Optionen eingetragen werden.

joomla|Joomla!
typo3|TYPO3
wordpress|WordPress

Der erste Wert wird intern dem value-Attribut zugewiesen. Der hinter dem senkrechten Strich stehende Eintrag ist der, der letztendlich im Auswahlfeld zu sehen ist.

 

Als letzter Eintrag wird Anfrage angelegt. Als Feldtyp weist man hier Fieldset zu. Mit Hinzufügen wird auch diese Komponente erzeugt. Aktiviert in den erweiterten Optionen dieses Feldes die Option Collapsed by Default.

 

Auf der Komponenten-Übersichtsseite werden die einzelnen Komponenten nun noch per Drag&Drop in die richtige Reihenfolge gebracht. Das Fieldset-Element muss dabei der erste Eintrag sein. Diesem Element werden alle anderen Felder eingerückt(!) untergeordnet.

Anfrage
–Vorname
–Name
–E-Mail

Insgesamt sollte die Ansicht also folgendermaßen aussehen:

 

Im nächsten Schritt wird festgelegt, wohin das Formular geschickt werden soll. Das geschieht im Register E-Mails.

Tragt dazu die gewünschte E-Mail-Adresse in das gleichnamige Feld ein und bestätigt dies mit Hinzufügen. Daraufhin gelangt ihr zu einem weiteren Dialogfenster.

Hier könnt ihr Betreff, Absender und den Inhalt angeben. Die Einstellungen in diesem Fenster dürften weitestgehend selbsterklärend sein und müssen in aller Regel auch nicht angepasst werden. Übernehmt die Einstellungen mit Save e-mail settings. Bei Bedarf könnt ihr anschließend weitere E-Mail-Adressen konfigurieren, an die das Formular ebenfalls geschickt werden soll.

 

Weiter geht es im Register Form settings.

In diesem Dialogfenster lässt sich u.a. ein Bestätigungstext oder die URL einer Bestätigungsseite angeben. Ebenso lässt sich der Versand des Formulars begrenzen. So könnte man beispielsweise festlegen, dass nur eine bestimmte Anzahl an Formularen verschickt werden kann.

Captcha einbinden

Das Formular sollte mittels Captcha gegen Spam abgesichert werden. Dazu muss man das Formular mit der integrierten Captcha-Funktionalität verbinden. Ruft die Formular-Übersicht auf und klickt dort nacheinander auf CAPTCHA: NO CHALLENGE ENABLED und Place a CAPTCHA here for untrusted users.

In dem sich daraufhin öffnenden Fenster kann die Captcha-Variante ausgewählt werden. Was dort eingestellt wird, ist letztendlich sicherlich Geschmacksache. Mit [default challenge type] macht man aber nichts verkehrt.

Die Einstellungen werden abschließend mit Speichern übernommen. Verwendet wird die allgemeine Captcha-Funktionalität, die ihr bereits im Zusammenhang mit den anderen Formularen kennengelernt habt. Die entsprechenden Einstellungen dazu findet ihr in den Einstellungen für das Modul Captcha. Änderungen, die an diesem Modul vorgenommen werden, sind dann direkt auch bei dem neuen Formular sichtbar.beispielsweise festlegen, dass nur eine bestimmte Anzahl an Formularen verschickt werden kann.

Solltet ihr das Modul noch nicht installiert haben, ladet es euch zunächst von der Seite http://drupal.org/project/captcha herunter, installiert und konfiguriert es.

Das Formular testen

Damit ist das Formular bereits erstellt und kann getestet werden. Ruft dazu das Frontend auf. Sollte das Captcha nicht zu sehen sein, aktiviert es zunächst durch Anklicken des entsprechenden Hyperlinks.

Füllt anschließend das Formular aus und schickt es ab.

 

Das Formular sollte problemlos verschickt werden können. Angezeigt wird – wenn konfiguriert – eine entsprechende Versandbestätigung.

Wurde keine Meldung explizit angegeben, ist eine Standardmeldung zu sehen:

Thank you, your submission has been received.

Den Test, ob das Formular tatsächlich funktioniert, solltet ihr natürlich als ein nicht angemeldeter Benutzer durchführen. Nur so wird das Formular so angezeigt, wie es die Benutzer letztendlich sehen.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Bootstrap für modernes Webdesign

Bootstrap für modernes Webdesign

Ob Smartphone, Tablet oder PC – Größe spielt keine Rolle mehr! Mit Bootstrap schmiegen sich Content und Design wie von Geisterhand an jedes Format. Lerne in 12 Lektionen und 2,5 Stunden Video-Training, wie dir das beliebte Framework Bootstrap den Weg zur responsiven Website erleichtert.

  • Funktionen, Komponenten, Möglichkeiten: Bootstrap kennenlernen und bedienen
  • In der Praxis: Am Live-Beispiel von der Basis bis zur responsiven Website
  • Zum Mitmachen und Nachvollziehen inklusive der Arbeitsdateien

Zum Training