Drupal: Ein Kontaktformular anlegen

Jede Seite sollte ihren Besuchern eine Kontaktmöglichkeit bieten. Im Idealfall wird das über ein Formular realisiert. Drupal selbst bringt bereits ein entsprechendes Modul mit, das sich blitzschnell konfigurieren lässt und für einfache Zwecke völlig ausreicht. Da jedes Formular gegen Spam geschützt werden sollte, wird in diesem Tutorial außerdem gezeigt, wie sich eine Captcha-Funktion integrieren lässt.

Wir empfehlen:
Drupal-Training

Im Drupal-Kern ist das Modul Contact enthalten. Mit diesem Modul kann man einfache Formulare erstellen. Um das Modul nutzen zu können, ruft man Module auf, aktiviert das vor Contact stehende Kontrollkästchen und klickt auf Konfiguration speichern.

 

Damit ist das Modul einsatzbereit. Wenn man Struktur>Kontaktformular aufruft, fällt auf, dass es dort bereits ein Standard-Kontaktformular gibt.

 

Dieses Formular sollte zunächst angepasst werden. Klickt dazu auf den Bearbeiten-Link. Der Name kann beispielsweise in Kontakt geändert werden. In das Feld Empfänger trägt man die E-Mail-Adressen ein, an die der Inhalt des Formulars geschickt werden soll. Wollt ihr mehrere Empfänger angeben, sind diese durch Kommata voneinander getrennt zu notieren. Sollen die Absender automatisch eine Rückmeldung über den Versand des Formulars bekommen, trägt man den entsprechenden Text in das Feld Automatische Antwort ein.

Herzlichen Dank für die Nachricht.

Dieser Text wird den Benutzern direkt nach dem Formularversand angezeigt.

Über Ausgewählt wird das Formular auf Aktiv gesetzt. Interessant ist diese Option natürlich in erster Linie, wenn es mehrere Formulare gibt. Mit Speichern übernimmt man die Einstellungen abschließend. Daraufhin wird man wieder auf die Übersichtsseite umgeleitet.

Sobald man ein Kontaktformular angelegt hat, erzeugt Drupal automatisch einen Eintrag im Navigationsmenü an. Dieser Menüeintrag ist standardmäßig allerdings deaktiviert. Ihr könnt den Link aktivieren und beispielsweise ins Hauptmenü aufnehmen. Ruft dazu Struktur>Menüs auf und klickt bei Navigation auf Links auflisten. Innerhalb der sich öffnenden Übersicht findet ihr den Eintrag Kontakt (deaktiviert).

 

Klickt dort auf Bearbeiten. Weist dem Eintrag einen Titel zu, aktiviert ihn und stellt bei Übergeordneter Link den Wert Hauptmenü ein.

 

Mit Speichern und Konfiguration speichern werden die Einstellungen übernommen. Das Kontaktformular ist ab sofort im Frontend verfügbar.

 

Es werden Name, E-Mail-Adresse, Betreff und Nachricht abgefragt. Zusätzlich können die Besucher entscheiden, ob sie eine Kopie der eingetragenen Daten haben wollen. Nach dem Absenden des Formulars wird – wenn sie denn eingetragen wurde – eine Nachricht angezeigt.

Es handelt sich bei allen Feldern (bis auf das mit der Kopie) um Pflichtfelder. Ist eines der Felder nicht ausgefüllt, gibt es eine Fehlermeldung.

Das Formular wird in diesem Fall nicht verschickt.

 

Captcha als Spam-Schutz

Eines der mittlerweile am häufigsten eingesetzten Anti-Spam-Mittel sind die sogenannten Captcha. Dieses Captcha ist ein Synonym für Completely Automated Public Turing test to tell Computers and Humans Apart, was sich wörtlich mit Vollautomatischer öffentlicher Turing-Test, um Computer und Menschen zu unterscheiden übersetzt lässt.

Ihr kennt solche Anwendungen. Bevor man sich an einer Seite anmelden oder einen Kommentar schreiben kann, wird man durch das Captcha gezwungen, zunächst eine Zahlen- oder Buchstabenkombination einzutippen. Nur wenn diese mit der angezeigten Grafik übereinstimmt, kann man die angeforderte Seite aufrufen. Alternativ dazu gibt es auch mathematische Captchas, bei denen eine Aufgabe vor dem Versand gelöst werden muss.

Für Drupal gibt es natürlich ein entsprechendes Modul, mit dem sich ein Captcha integrieren lässt. Ladet euch dieses Modul von der Seite http://drupal.org/project/captcha herunter. (Momentan gibt es zwar lediglich eine Beta-Version, diese arbeitet aber durchaus zuverlässig). Nach der Modul-Installation zeigt ein anschließender Blick nach Module, dass dort die beiden neuen Module CAPTCHA und Image CAPTCHA auftauchen.

 

Aktiviert die vor diesen Modulen stehenden Kontrollkästchen und bestätigt das mit Konfiguration speichern. Nach erfolgreicher Installation muss die Captcha-Funktion noch konfiguriert werden. Das geschieht unter Konfiguration>CAPTCHA im Bereich Benutzer.

http://downloads.psd-tutorials.de/Download/_userimages/Image/daniel_koch/images/drupal7/drupal7_24/drupal7_24_01.gif

Natürlich lässt sich auch hier keine pauschale Aussage darüber treffen, welche Einstellungen für welche Webseite ideal sind. Prinzipiell hat sich in der Praxis die folgende Konfiguration aber durchaus bewährt: Stellt bei Default challenge type den Wert Image (from module image_captcha) ein. Dadurch wird ein grafisches Captcha verwendet.

Alternativ dazu könnte man auch die mathematische Variante verwenden.

Diese Einstellung gilt dann standardmäßig für alle Formulare. Über die Auswahlfelder darunter lässt sich diese Angabe dann aber explizit für jedes Formular überschreiben. Aktiviert außerdem die Option Add CAPTCHA administration links to forms. Dadurch könnt ihr dann – natürlich Administrationsrechte vorausgesetzt – die Captcha-Funktion direkt in den Formularen anpassen.

Wenn ihr den Besuchern eine Hilfe zum Ausfüllen der Captchas anbieten wollt, aktiviert ihr die Option Add a description to the CAPTCHA. In diesem Fall können die Hilfetexte dann in die entsprechenden Felder eingetragen werden.

Bei Default CAPTCHA validation bestimmt ihr, ob beim Captcha zwischen Groß- und Kleinschreibung unterschieden werden soll. Durch Case sensitive validation: the response has to exactly match the solution. wird exakt auf die richtige Schreibweise geachtet.

Unter Persistence lässt sich festlegen, wann ein Captcha angezeigt werden soll. Am besten aktiviert man hier Always add a challenge. Dadurch müssen die Benutzer immer ein Captcha ausfüllen.

Mit Konfiguration speichern werden die allgemeinen Captcha-Einstellungen übernommen. Jetzt solltet ihr noch das Bilder-Captcha konfigurieren. Die notwendigen Einstellungen findet ihr im Register Image Captcha.

Im oberen Fensterbereich gibt es eine Vorschau, die schon einmal einen guten Eindruck vermittelt, wie das Captcha letztendlich aussehen wird. In das Feld Characters to use in the code könnt ihr die Zeichen eintragen, die im Captcha vorkommen dürfen. Ebenfalls einstellen lässt sich die Textlänge. Diese kann zwischen zwei und zehn Zeichen liegen.

Im Bereich Font Settings kann man Angaben zum Schriftbild machen. Was hier eingestellt wird, ist letztendlich sicherlich Geschmacksache.

Unter Color and Image Settings könnt ihr Hintergrundfarbe, Schriftfarbe, Farbschwankungen und das Bildformat bestimmen. Als Bildformat hat man die Wahl zwischen JPEG, PNG und einem PNG mit transparentem Hintergrund.

Und zu guter Letzt gibt es noch die Einstellungen unterhalb von Distortion and Noise. Dort macht man Angaben dazu, wie verzerrt die Grafiken letztendlich dargestellt werden sollen. Ihr solltet diese Einstellungen unbedingt testen, bevor ihr mit eurer Seite online geht. Es bringt schließlich nichts, wenn ihr zwar ein Captcha auf eurer Seite habt, dieses aber – eben aufgrund einer zu starken Verzerrung – auch von menschlichen Besuchern nicht gelesen werden kann. Vergesst nicht, die Einstellungen abschließend zu speichern.

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