Wordpress Plugin für Formulare: Contact Form 7

In der Welt der Vorlagen für Kontaktformulare in Wordpress haben sich in den letzten Jahren zwei Wordpress Plugins als Platzhirsche hervorgetan: 

  • Ninja Forms 
  • Contact Form 7 

Beide Wordpress Plugins haben wir seit 2015 bei mehreren Projekten eingesetzt, um bei Wordpress Webseiten Kontaktformulare zu erstellen. Beide Plugins haben sich in dieser Zeit weiterentwickelt. Zudem haben wir Erfahrungen mit beiden Plugins gemacht, was die Konfiguration von Formularen, Spam, die Migration von Formularen und die Handhabung des Backends angeht. Diese Erfahrungen möchten wir mit Ihnen teilen! Aus diesem Grund schildern wir Ihnen, warum wir Contact Form 7 als Standard bei der Erstellung von Formularen einsetzen und nicht mehr Ninja Forms.

Kontaktformulare mit Ninja Forms

Zuerst zu Ninja Forms. Dieses Wordpress Plugin ist sehr beliebt! Die Wordpress Plugin Seite weist mehr als 1 Millionen aktive Installationen dieses Plugins auf. Ninja Forms ist ja auch sehr reizvoll: Man kann ein Formular aus einem Baukasten erstellen, zieht ein paar Elemente an die gedachte Stelle, konfiguriert ein wenig und hat dann ein vollständiges Formular zur Verfügung. Das geht alles sehr schnell! 

Ninja Forms: Migration

Was etwas länger dauert: Wie bekomme ich das Formular von einer Webseite auf die andere? Diese Frage stellt sich, wenn man Formulare lokal erstellt hat und diese nun auf den Live Server stellen möchte. Man kann in diesem Fall die Datenbanken per phpMyAdmin exportieren. Das geht beim ersten Mal sehr schnell. Was aber, wenn nach ein paar Tagen die Daten zwischen den Servern auseinander laufen? Um es kurz zu machen: Die Migration von Formularen bringt Aufwand mit sich. 

Zugleich aber bringt dies einen Vorteil für Ninja Forms mit sich: Alle Daten zu den Formularen werden in eigenen Tabellen in der Datenbank des Projekts gespeichert.

Ninja Forms: Spam

Bei einem Projekt haben wir Ninja Forms für eine Kundin installiert. Sie machte uns nach mehreren Monaten darauf aufmerksam, dass sie von ihrer Webseite mit Spam bombardiert wird. Es stellte sich heraus, dass das Kontaktformular mit Ninja Forms die Ursache war, und dies trotz eingebautem ReCaptcha und anderen Schutzmaßnahmen. Von 630 Einträgen in der Datenbank waren ganze 20 valide Datensätze.

Ninja Forms: Datenschutz

Ninja Forms speichert als Standard alle Daten, die in das Formular eingegeben werden. Dies war über Jahre hinweg ein klarer Vorteil, sorgt dieses Verhalten doch dafür, dass keine Informationen verloren gehen! 

In Zeiten des besorgten Datenschutzes wird jedoch ein Bumerang daraus. Da Ninja Forms die Daten abspeichert, muss man als Betreiber einer Webseite auch Sorge dafür tragen, dass diese nicht nur vor Angriffen geschützt sind, sondern auch regelmäßig gelöscht werden. Für all dies beginnt zusätzlicher Aufwand.

Ninja Forms: Layout

Ninja Forms bringt bereits eine gute Unterstützung für ein eigenes Layout mit. Damit lässt sich ein Design recht schnell umsetzen. Dies ist ein klarer Vorteil für Ninja Forms!

Contact Form 7

Diese Erfahrungen führten dazu, dass wir uns nach einer attraktiven Alternative umsahen. Als weiterer Platzhirsch hatte sich in der Zwischenzeit Contact Form 7 etabliert. Dieses Wordpress Plugin wird noch häufiger als Plugin zur Erstellung von Formularen eingesetzt, die Plugin Seite von Wordpress weist mehr als 5 Millionen aktive Installationen aus. Die Beliebtheit gilt nicht nur für ganze Webseiten: Auch Wordpress Themes wie Restaurant and Café nutzen Contact Form 7 als Grundlage, um auf dieser Basis eigene Formulare aufzubauen. Das alles sind Gründe genug dafür, sich einmal mit diesem System auseinanderzusetzen. 

Das Backend von Contact Form 7 bietet die gleichen Möglichkeiten wie Ninja Forms: Man hat einen Editor, aus dem man sich mit Hilfe von verschiedenen Modulen ein Formular zusammenschiebt. Hier bietet Ninja Forms einen Vorteil: Man kann die einzelnen Felder eines Formulars auch nachträglich noch in der grafischen Benutzeroberfläche bearbeiten. Dies ist bei Contact Form 7 nicht vorgesehen.

Contact Form 7: Migration

Der oben beschriebene Nachteil erweist sich bei der Migration eines Formulars von einem Server auf einen anderen als dicker Vorteil: Man kann den bei der Eingabe und Bearbeitung generierten Quelltext für das Formular einfach aus dem Eingabefenster herauskopieren und auf den neuen Server einfügen. Schon ist das gleiche Formular extern verfügbar! Auch ist es erheblich einfacher, vom Stand eines Formulars eine Textdatei als Backup zu ziehen! Und es ist sehr einfach, eine einzelnes Feld als Vorlage in einer Textdatei abzuspeichern. Dies ist ein klarer Vorteil für Contact Form 7! 

Der Nachteil: Wenn ein Formular ausgefüllt wurde, werden die Daten nicht in eigenen Tabellen in der Datenbank des Projekts gespeichert. Dies ist ein klarer Nachteil von Contact Form 7. Allerdings ist dies leider ein Problem, was viele Wordpress Plugins mit sich bringen und was einer der Punkte ist, die bei TYPO3 anders gelöst werden.

Contact Form 7: Spam

Bei der oben beschriebenen Kundin haben wir Contact Form 7 installiert, um sie vor Spam zu schützen. Das Ergebnis: nun kommen nicht mehr mindestens fünf Spammails pro Tag herein, sondern nur noch valide Anfragen. Die Anzahl an Spam tendiert gegen Null. Klarer Vorteil von Contact Form 7 gegenüber Ninja Forms

Für den Schutz gegen Spam gibt es bei Contact Form 7 die Möglichkeit, Fragen und ein Captcha zu installieren. Es gibt aber auch noch eine anderen Möglichkeit: Eine Falle für böse Bots zu installieren! Das Plugin Honeypot ist dazu gedacht: Nach dessen Installation und Aktivierung baut man in sein Formular ein blindes Eingabefeld ein. Ein Mensch kann dieses Feld nicht sehen und wird dieses leer lassen. Ein Bot, der den reinen Quelltext des Formulars missbraucht, wird dort ein Eingabefeld sehen und etwas in dieses Feld hineinschreiben. Schwupps, und schon wird die Anfrage an den Server als falsch erkannt!

Contact Form 7: Datenschutz

Hier haben wir Fluch und Segen zugleich: Fluch, weil Contact Form 7 als Standard keine Daten speichert. Segen, weil dieses in der heutigen Zeit des Datenschutzes die mit Abstand beste Lösung ist! 

Aber auch hierfür gibt es einen Ausweg: Ebenso wie es den Honeypot gegen Spam gibt, so gibt es Flamingo als Wordpress Plugin, um die eingelaufenen Daten zu speichern und nach Wunsch zu verarbeiten oder zu exportieren.

Contact Form 7: Layout

Das von der Templating Engine von Contact Form 7 generierte Layout ist recht einfach und erfordert mehr Aufwand als bei Ninja Forms, um es auf ein angeliefertes Design umzusetzen. Hier zeigt sich aber auch der klare Vorteil der Tatsache, dass man bei diesem Wordpress Plugin direkt im Quelltext der Vorlage arbeiten kann, denn man kann hier eine eigene HTML-Vorlage einbauen und diese per CSS layouten.

Kontaktformular mit Contact Form 7 erstellen

Das Anlegen eines neuen oder die Bearbeitung eines bestehenden Formulars in Contact Form 7 erfolgen über eine grafische Benutzeroberfläche. Nach dem Klicken auf einen der Buttons oberhalb des Quelltextes öffnet sich ein Popup-Fenster in einem Layer, in dem man die gewünschten Angaben zu einem Feld machen kann. 

Für viele der Eingabefelder gibt es Angaben, die überall auftauchen: 

  • Feld-Typ: Pflichtfeld 
    Hiermit weisen Sie das Formular an, zu überprüfen, ob in dieses Feld ein Inhalt eingegeben wurde 
  • Name 
    Dies ist der Name der Variable, mit der dieses Formular später weiterverarbeitet werden soll.
    Bitte verwenden Sie keine Sonderzeichen, keine Leerzeichen und keine Umlaute 
  • Standardwert 
    Hier können Sie bei Textfeldern (ein- oder mehrzeilig) eingeben, was als unterlegter Text in einem Feld (Placeholder) eingegeben werden soll 
  • ID-Attribut 
    Hier können Sie eine ID zur CSS-Formatierung definieren 
  • Klassen-Attribut 
    Hier können Sie eine CSS-Klasse definieren

Beachten Sie:

  • Contact Form 7 baut für jede Zeile im Quelltext der Fomulardefinition eine eigene Zeile im generierten Quelltext der HTML-Seite auf 
  • Sie können einem Feld HTML-Text voranstellen oder Zwischentext bzw. Überschriften zur Gliederung eines Formulars einfügen 
  • Über das <label> Tab können Sie einen barrierefreien Text für ein Formularfeld einsetzen. 

Beispiel für Quelltext im Eingabefeld

Wie in der Syntax von Wordpress üblich, werden die Daten eines einzelnen Formularfeldes bei Contact Form 7 in eckige Klammern geschrieben. In den Grundzügen jedes Feldes haben Sie in diesen eckigen Klammern die Art des Feldes (hier: Input einzeiliges Eingabefeld) und den Namen der Variable (hier: your-name). 

[text your-name]

Wenn Sie ein Feld zu einem Pflichtfeld machen wollen, fügen Sie einfach ein Sternchen hinter der Definition des Feldes ein: 

[text* your-name]

Einem Platzhalter fügen Sie hinter diese grundlegende Definition eines Feldes. Geben Sie nach der Bezeichnung placeholder den gewünschten Wert in Anführungszeichen ein, durch ein Leerzeichen getrennt: 

[text* your-name placeholder "Geben Sie Ihren Namen ein"]

Diese Felddefinition können Sie noch mit dem HTML-Tag <label> umfassen. 

<label> Ihr Name 
[text* your-name] </label>

Für ein barrierefreies Webdesign können Sie dem <label> ein title Attribut mitgeben: 

<label title="Ihr Name bitte"> Ihr Name 
[text* your-name placeholder "Hier Ihr Name"] </label>

Diese Syntax gilt für die meisten Felder in Contact Form 7. Hier nun die Beschreibungen der meist genutzten Objekte:

Formularfeld: Text

Machen Sie hier die Angaben zur Variable und ggf. zum Pflichtfeld. Über die Kombination Standardwert und die Checkbox für den Platzhalter weisen Sie einen Text für den Placeholder zu, der in einem leeren Eingabefeld zusätzliche Erklärungen zum Inhalt bereitstellt.

Formularfeld: Checkbox und Radio Button

Die Eingabefelder für Mehrfachauswahl (Checkbox) und Einzelauswahl (Radio Button) sind sich in der Konfiguration sehr ähnlich. Daher beschreiben wir sie hier zusammen. 

Für beide Felder können Sie festlegen, ob es sich um ein Pflichtfeld handelt. Die Variable legen Sie über das Feld Name fest. Dies deckt sich mit den Standards der Konfiguration. 

Bei den Optionen können Sie pro Zeile einen Wert eintragen. Für jede Zeile wird ein anklickbarer Punkt generiert. Wenn Sie jeden Eintrag mit einer Beschreibung umfassen, generiert das Plugin einen <label> um die jeweilige Option. Dies hat zur Folge, dass Sie nicht den gesamten Block für ein Feld mit einem <label> umfassen können, wie bei den anderen Feldern üblich. In diesem Fall darf das <label> nur die Beschreibung des Feldes umfassen, sonst gibt es einen Konflikt beim Speichern. 

<label title="Tragen Sie Ihre Interessen ein"> Interessen </label>
    [checkbox Interessen use_label_element "Comics" "Bücher" "Krimis"]

Formularfeld: Datum

Diese Eingabe generiert ein Datumsfeld in einem Formular. In diesem Feld vergeben Sie einen Namen der Variable und ggf. einen Platzhalter. Auch dieses Feld kann ein Pflichtfeld sein. 

Über das Feld Bereich können Sie definieren, zwischen welchen Zeitpunkten eine Eingabe erfolgen kann. Sie können statische Werte vorgeben oder diese berechnen lassen. Damit können Sie z. B. das aktuelle Datum als Anfangswert setzen. 

[date* Geburtsdatum min:2000-06-14 placeholder "Ihr Geburtsdatum bitte!"]

Formularfeld: Dropdown Menu

Auch ein Dropdown-Menu (Select) kann ein Pflichtfeld sein. Definieren Sie einen Namen für die Variable. 

Über das Feld Optionen geben Sie ein, welche Werte die Besucher auswählen können. Wenn Sie ein leeres Objekt als erste Option einfügen, verhindern Sie falsche Eingaben, wenn ein Pflichtfeld genutzt wird, denn in diesem Fall würde sonst immer der erste Wert genommen, wenn der Besucher nichts bewusst ausgewählt hat. 

[select* Anrede include_blank "Frau" "Herr" "Divers"]

Die Optionen können Sie nach der Erstellung eines solchen Feldes noch selbst ergänzen, indem Sie einzelne Werte, mit Leerzeichen getrennt und in doppelte Anführungszeichen gesetzt, eintragen.

Formularfeld: Zustimmung

Dieses Feld ist einfach zu konfigurieren, bringt aber einige wichtige Zusatzfunktionen mit sich. Grundsätzlich gilt: Das Zustimmung (acceptance) Feld stellt eine Checkbox bereit, die man ausfüllen muss, um das Formular abschicken zu können. Wichtig ist dies z. B. für die Datenschutzerklärung oder die AGB

  • Geben Sie unter Name die Bezeichnung der Variable ein, unter der die Aktion dieses Feldes gespeichert bzw. verschickt werden soll. 
  • Bedingung ist der Text neben der Checkbox, den der Besucher bestätigen muss. Dieser Text wird gespeichert. 
  • Optionen gibt Ihnen die Möglichkeit, ein Verschicken des Formulars auch zu erlauben, wenn der Besucher das Feld nicht angeklickt hat. 

Beim Einbinden dieses Feldes und wenn dieses als nicht optional eingestellt ist, wird der Button zum Versenden erst dann aktiviert, wenn der Besucher tatsächlich auf die Checkbox geklickt hat. Eine JavaScript-Funktion schaltet den Button sonst inaktiv. 

Unsere Datenschutzerklärung finden Sie <a href="/[link]/">hier</a>.
Das Formular kann erst nach dieser Bestätigung verschickt werden.
[acceptance Datenschutzerklaerung] Ich habe die Datenschutzerklärung gelesen [/acceptance]

Sie können dem Acceptance Feld einen Text mit dem Link zu einer bestimmten Seite, hier die Datenschutzerklärung, voranstellen. Den Link müssen Sie dabei statisch per Hand eingeben.

Reservierte Namen für Variablen

Contact Form 7 verfügt über reservierte Namen von Variablen, die das System für bestimmte Zwecke verwendet. Bei der Neuanlage eines Formulars werden diese Bezeichner für Variablen automatisch vergeben. Dabei handelt es sich um diese Variablen: 

  • your-name
    Benutzername, der diese Mail verschickt 
  • your-email
    E-Mail Adresse des Absenders 
  • your-subject
    Betreff der E-Mail 
  • your-message
    Nachricht in der E-Mail 

Diese Variablen beschreiben den Inhalt und die Daten zum Verschicken einer E-Mail, wie sie als Standard genutzt werden.

Links zu Contact Form 7

Finden Sie hier die Links zu den oben beschriebenen Wordpress Plugins:

►Contact Form 7

►Flamingo

►Contact Form 7 Honeypot

►Ninja Forms

Thomas Berscheid ⧉ 05.04.2020
^