Konktaktformular-Bausatz für Webentwickler

Kontaktformulare zahlreicher Websites sind potenzielle Spam-Schleudern. Da stellt sich die Frage: was ist ein technisch gutes Kontaktformular? Die zentralen Aspekte hierbei sind Sicherheit vor Missbrauch sowie technische, optische und inhaltliche Flexibilität. Basteln Sie ein Kontaktformular mit dem Dr. Web-Kontaktformular-Bausatz.

Der vorgeschlagene Weg ist natürlich nicht die einzige Möglichkeit, ein ordentliches Kontaktformular auf die Beine zu stellen. Der Dr. Web-Kontaktformular-Bausatz setzt auf das Yellow Duck Framework (YDF) für PHP auf. Es integriert die Template-Engine Smarty mit der E-Mail-Klassenbibliothek phpMailer und bietet weit reichende Funktionen zur Formulareingaben-Validierung an. Außerdem steht es unter einer freien OpenSource-Lizenz – YDF ist also wie geschaffen für unser Vorhaben und ist auch für weit größere Projekte geeignet.

Drei Dateien spielen eine zentrale Rolle im Bausatz:

1. DrWebKontaktformular.php
Dieses Skript ist für alles zuständig: Eingabefelder erzeugen, HTML-Templates verarbeiten, Eingaben überprüfen, E-Mails erzeugen und natürlich abschicken.

2. DrWebKontaktformular.tpl
DrWebKontaktformular.tpl ist die HTML-Vorlage des Kontaktformulars. Sie können die Vorlage so verändern, dass nur noch das Formular selbst angezeigt wird und dann den DrWeb-Bausatz in eine vorhandene Website einarbeiten. Einfacher ist es jedoch, dieses HTML-Template so zu verändern, dass es sich nahtlos in eine bereits bestehende Website einfügt.

In dem HTML-Template wird auch die Darstellungslogik geregelt. In diesem Fall ist das hauptsächlich die Entscheidung, ob Fehlermeldungen angezeigt werden oder nicht. Alles weitere an Programmcode steckt im eigentlichen PHP-Skript.

3. DrWebKontaktformular_MailTemplate.tpl
Wie der Dateiname bereits andeutet definiert diese Datei den Aufbau der E-Mails. Das Verarbeitungsprinzip ist das gleiche wie beim HTML-Template.

Darüber hinaus gehören zum Bausatz die Dateien DrWebKontaktformular.css und DrWebKontaktformular_Danke.php, welches ein einfaches PHP-Skript ist, das je nach Parameter eine entsprechende Bestätigungsmeldung ausgibt.

So legen Sie los
Laden Sie zunächst das Bausatz-Paket (zip 912 KB oder tar.bz2 630 KB) herunter. Entpacken Sie es und schieben Sie die Dateien auf einen Webserver. Für Testzwecke können Sie das ganze Archiv in das WWW-Root eines Webservers speichern. In Produktionsumgebungen ist es aus Sicherheitsgründen empfohlen, das Verzeichnis YDFramework2 außerhalb des WWW-Roots zu platzieren, damit dessen Dateien nicht per http abrufbar sind. Um das Kontaktformular in einen funktionsfähigken Zustand zu bringen, müssen Sie nur die ersten paar Zeilen in der Datei DrWebKontaktformular.php nach Ihren Wünschen ändern. Was die Konstanten bewirken, ist in den Kommentaren über den Zeilen zu lesen. Danach ist die Konfiguration schon fertig – rufen Sie DrWebKontaktformular.php im Webbrowser auf, es sollte ein funktionierendes Kontaktformular erscheinen.

Anpassen
Meistens muss ein Kontaktformular individuell angepasst werden. Das ist hier recht einfach möglich. Im folgenden erweitern wir das Skript beispielhaft um eine auswählbare Anrede, also “Herr/Frau”.

1. Suchen Sie in DrWebKontaktformular.php nach der Zeile “$form = new YDForm( ‘form1′ );” und fügen Sie darunter diese vier folgenden Zeilen ein:

  $form->addElement( 'radio', 'anrede', 'Anrede', array(),
  array( 'Frau' => 'Frau', 'Herr' => 'Herr' ) );

  $form->addFilter( 'anrede', 'trim' ); 

  $form->addRule( 'anrede', 'required', "Bitte geben Sie
  eine Anrede an." );

  $form->addRule( 'anrede', 'regex', "Fehler.",
  "/^[a-z]{4}$/i" ); 

2. In der Methode emailSenden() fügen Sie nach “$emlTpl = new YDTemplate();” dieses ein:

       $emlTpl->assign( 'anrede', $eingaben['anrede'] ); 

3. Setzen Sie im HTML-Template DrWebKontaktformular.tpl nach “<form {$form.attribs}>” diese Zeile ein:

       {$form.anrede.label_html}<br>{$form.anrede.html}

  

4. Die folgende letzte Anpassung betrifft die Datei DrWebKontaktformular_MailTemplate.tpl. Ändern Sie die erste Zeile in

       Absender: {$anrede} {$lesername} ({$lesermail}) 

Das wars!

Was passiert in diesen Zeilen?
addElement() (Punkt eins) fügt dem Formular ein weiteres Radio-Element hinzu. Die wählbaren Alternativen sind “Frau” und “Herr”. Die HTML-Werte lauten genauso. addFilter() ist nicht unbedingt notwendig – die Funktion entfernt ungewollte Leerzeichen im HTML-Wert. Der erste addRule()-Aufruf bewirkt, dass das Feld “Anrede” als Pflichtfeld (required) entsprechend markiert wird. Wird keine Anrede ausgewählt, erscheint oben genannte Fehlermeldung. Der zweite Aufruf dient dazu, das Skript gegen Missbrauch abzusichern, in dem nur genau vier Groß- und Kleinbuchstaben als HTML-Wert akzeptiert werden – nichts anderes. So ist es zum Beispiel nicht möglich, Prozentzeichen, Zeilenumbrüche oder Anführungsstriche als Wert anzugeben, beispielsweise durch ein Skript, welches manipulierte Daten injizieren will.

Mit der zweiten Änderung (Punkt zwei) in der Datei DrWebKontaktformular.php wird dem Anrede-Platzhalter im E-Mail-Template der angegebene Wert aus dem HTML-Formular zugewiesen.

Das Eingabefeld im HTML-Template und der Platzhalter im Mail-Template fehlen bisher. Daher werden sie in den beiden letzten Schritten drei und vier hinzugefügt.

Die API-Dokumentation zu YDF-Klassen und -Funktionen finden Sie auf der Website des YDF-Projekts.

Erweitern
Der Bausatz ist beliebig erweiterbar. Denkbar und sinnvoll wäre es, die “Danke”-Seite auch mittels YDF und Templates erzeugen zu lassen. Bei großen Unternehmen wäre auch eine weitere Differenzierung des Kunden-Anliegens angebracht.

Nicht empfehlenswert ist es dagegen, Funktionen in das Kontaktformular-Skript einzubauen, die dort nicht unmittelbar hinein gehören. Zum Beispiel bläht das automatische Verteilen der Mails an unterschiedliche Personen oder Abteilungen den Code unnötig auf. Die Empfängeradressen müssen wahrscheinlich häufiger als das Skript selbst geändert werden, zum Beispiel bei Abwesenheit von Mail-Empfängern. Dann jedes Mal das Skript zu bearbeiten ist unpraktisch und fehleranfällig. Besser wäre es, den E-Mail-Server mit dieser Aufgabe zu betrauen, denn das ist schließlich eine seiner Aufgaben. ™

Aktualisierung: Dr. Web-Kontaktformular-Bausatz v1.2
Eine Leseranfrage hat uns zu einer Verbesserung angeregt. Der Fokus liegt bei dieser Aktualisierung auf einer Übersichtsseite, die nach dem Absenden des Formulars angezeigt wird. Diese Übersichtsseite bietet dem Nutzer die Gelegenheit, das Eingegebene nochmal zu prüfen und bei Bedarf seine Eingaben zu überarbeiten. Die Usability spielt dabei eine besondere Rolle. Der Zurück-Knopf des Browsers darf den Eingabe- und Überarbeitungsprozess nicht stören, in dem zum Beispiel veraltete Eingaben oder ein leeres Formular erscheint.

Die Übersichtsseite ist optional. Das Verhalten des Formulars wird über die Konstante ‘OVERVIEW’ gesteuert, die wie alle anderen Konfigurationseinstellungen am Anfang des Skriptes zu finden sind. Hat die Konstante den Wert ‘true’, wird eine Übersichtsseite angezeigt, bei ‘false’ nicht.

Die Klasse YDPersistent des Yellow Duck Frameworks war dabei eine große Hilfe. Sie ermöglicht es, PHP-Objekte, Arrays und Variablen dauerhaft, also über Seitenabrufe hinaus zu speichern, inklusive Komprimierung und Verschlüsselung. Als Speicher dienen Cookies. Das Skript ließe sich allerdings relativ simpel so umbauen, dass diese ‘persistenten’ Daten auf dem Server gespeichert werden.

Im Wesentlichen ist nur eine neue Datei hinzugekommen: DrWebKontaktformular_Ueberblick.tpl. Das ist ein simples Smarty-Template, welches für die Darstellung der Übersichtsseite verwendet wird.

Aktualisierung eines vorhandenen Formulars
Wenn Sie bereits ein Formular mit Hilfe einer älteren Version dieses Bausatzes umgesetzt haben, kopieren Sie bitte nicht einfach die neuen Dateien über die alten. Der Quellcode des Skripts ist ausführlich dokumentiert, so dass Sie einen leichten Einstieg in die neue Version finden und vorhandene Skripte entsprechend ergänzen können.

Die Links:

• Dr. Web-Kontaktformular-Bausatz (zip 912 KiB) (tar.bz2 630 KiB)
• Yellow Duck Framework (englisch)
• Yellow Duck Framework API (englisch)

Erstveröffentlichung am 27.12.2005

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.