Nach wie vor werden Kontaktformulare beim Aufbau vieler Websites vernachlässigt. Dabei sind sie, betreibt man keinen Shop, oft das primäre Konversionsziel. Denn um was geht es denn, nachdem die Besucher einer Website sich auf dieser informiert haben? Doch zumeist darum, ihn zur Kontaktaufnahme zu bewegen. Dafür kann ein Formular gute Dienste leisten.

Worum geht es?

WordPess bringt von Haus aus kein integriertes Formular mit, es stehen aus diesem Grund eine Reihe von Plug-ins zur Verfügung, die diese Funktion nachrüsten. Wir setzen bei unseren Kunden vor allem zwei Formular-Plug-ins ein, nämlich Contact Form 7 und Gravity Forms. Wie man diese klug konfiguriert beschreibt der folgende Beitrag.

Planung ist alles

Es ist sinnvoll, die gewünschten Formularfelder im Vorfeld zu definieren und auf einen Zettel aufzuzeichnen – das sortiert die Gedanken und gibt einen Eindruck der optischen Anmutung des späteren Formulars. Die beiden Plug-ins geben den Formularen ein durchaus ansprechendes Layout mit, das sich nahtlos in responsiven Design integriert. Feinheiten kann später über CSS verändern.
Beide Plug-ins versenden, nachdem der User das Formular abgesendet hat, eine E-Mail an eine E-Mail Adresse. Bei manchen Hostern muss diese Adresse im Domainraum der Website liegen. Dies gilt es zu testen.

Contact Form 7

Contact Form 7 ist nicht ohne Grund das beliebtesten Formular-Plug-in bei WordPress.org. Zum einen ist es gratis, zum anderen ist es relativ einfach zu bedienen. Ob seiner Popularität existieren zudem Erweiterungen, die Contact Form 7 im Bedarfsfall funktional nachrüsten und ein englischsprachiges Forum, in dem die meisten Fragen schon einmal beantwortet wurden, die bei der Erstellung eines Formulars auftreten.

Nach der Installation klinkt sich Contact Form 7 in das linke Seitenmenü unter dem Namen „Formulare“ im Backend ein. Die Wahl von „Neu hinzufügen“ erstellt ein blankes Formular, in das sich über „Tag generieren“ nun die gewünschten Formular-Elemente hinzufügen lassen. Alle gängigen Elemente eines Formular, beispielsweise Text-, E-Mail- und Datumsfelder sowie Checkboxen und SPAM-Filter, sind Bestandteil des Plug-ins.
(1.) Wählt man beispielsweise „Textfeld“ lässt sich zunächst angeben, ob dieses Feld ein Pflichtfeld werden soll. Anschließend muss der Name des Feldes eingegeben werden. Dieser Name ist die interne Referenz und entspricht nicht automatische dem Namen, der später über oder neben dem Feld als Bezeichnung steht. Anschließend lassen sich Größe und die maximale Anzahl der Zeichen festlegen, die der Benutzer später eintragen darf.
Eine platzsparende Alternative zur üblichen Beschriftung der Felder ist es, unter „Standardwert (optional)“ die gewünschte Bezeichnung einzutragen und die Checkbox „Diesen Text als Platzhalter nutzen?“ zu aktivieren. Dann erscheint die Beschriftung innerhalb des Feldes und verschwindet, wenn der Benutzer anfängt in das Feld einzuschreiben. Achten Sie bei dieser und den anderen Varianten aber darauf, auf ein etwaiges Pflichtfeld hinzuweisen.

(2.) Unten im Editorfeld entsteht während des Ausfüllens automatisiert ein Code in eckigen Klammern. (3.) Kopieren Sie diesen Code und fügen diesen in das Formular links ein. Zeilenumbrüche zwischen einer etwaigen Beschreibung und dem dazugehörigenFormularfeldern erzwingen sie mit <br>, Absätze zwischen den Formularfelder, indem sie alles in <p></p> kapseln (s. Grafik).
Contact Form 7 sendet nicht automatisch das gesamte Formular an Sie bzw. die hinterlegte E-Mail Adresse. Daher steht im Editorfeld ganz unten „Und setzen Sie diesen Code in das Nachrichtentextfeld unterhalb ein.“ Das sollten Sie tun, denn nur dann landet der Inhalt des Feldes in der E-Mail.

Entsprechend dem oben beschriebenen Vorgehen bauen Sie das Formular sukzessive auf. Und denken Sie immer daran auch den Code für die E-Mail einzukopieren.
Krönender Abschluss eines jeden Kontakformulars ist der Button zum Versenden desselben. Um ein Captcha zu verwenden, muss das Really Simple Captcha Plug-inSimple installiert sein.
Wie integrieren Sie das Formulare nun in ihre Kontaktseite? Dazu kopieren Sie den vom System ganz oben generierten Code in die Zwischenablage und fügen ihn im Text-Editor Modus in die entsprechende Stelle ihrer WordPress-Seite ein.

Das oben zusammengestellte Formular sieht auf einer Website mit dem Dorayaki-Theme von Elmastudio so aus:

Alle Felder untereinander zu setzen, mag für kurze Formulare gängig sein, für längere Formulare ist es nicht angeraten. Zweispaltige und zudem responsive Layouts lassen sich in Contact Form 7 nur über Umwege erreichen. Eine von uns getestete Lösung dafür wurde auf WPSnippets veröffentlicht.

Gravity Forms

Das zweite Plug-in, das wir an dieser Stelle vorstellen wollen, besticht durch seine einfache Handhabung per Drag & Drop und seine Funktionsvielfalt. Gravity Forms erlaubt die Gestaltung komplexer, auch mehrseitiger Formulare. Zudem speichert es die Einreichungen in einer Datenbank, die sich jederzeit einsehen lässt. Für viele kleinere Shops ist Gravity Forms daher das Plug-in der Wahl. Ein weiteres Feature ist der Einsatz von Bedingungslogiken. Dabei werden beispielsweise bestimmte Felder je nach den Einträgen in den vorherigen Feldern angezeigt.
Eine Lizenz für eine Website kostet zur Zeit 39 $. Dafür gibt es ein Jahr englischsprachigen Support und Updates. Die teureren Lizenzen beinhalten die Integration von Diensten wie PayPal und MailChimp.

Wie Sie im Screenshot erkennen, klinkt sich Gravity Forms in die linke Menüleiste unter „Formulare“ ein und gibt sich nach dem Aufruf alle Mühe, Anfängern die Erstellung eines Formulars zu erleichtern. Tooltips helfen auch später immer wieder weiter. Ein Klick auf „Einzeiliger Text“ in der rechten Spalte befördert beispielsweise ein Textfeld in das linke Layoutfeld. Geben Sie dann dort unter „Feldbezeichnung“ die Bezeichnung für das Formularfeld ein, in unserem Fall „Ihr Name“. Aktivieren Sie unter Regeln die Checkbox „erforderlich“ wird das Ausfüllen für den Benutzer zur Pflicht.

Auf diese Art lassen sich nun die weiteren Felder erstellen. In unserem Fall haben wir noch ein Textabsatz und ein E-Mail Feld als Pflichtfelder eingebaut. Ein Captcha ist integraler Bestandteil von Gravity Forms, bedingt aber ein reCAPTCHA-Konto. Der Google-Dienst ist technisch gesehen empfehlenswert. Speichern Sie mit „Formular aktualisieren“.

Der Button zum Absenden wird nicht direkt im Layout eingerichtet, sondern unter „Form.-Einstlgn.“. Hier lässt sich auch festlegen, ob die Feldbeschriftungen (Labels) oberhalb, rechts oder links platziert werden. Und Sie können bestimmen, ob nur eine bestimmte Anzahl von Einträgen in einem Zeitraum eintreffen dürfen, danach wird das Formular deaktiviert.
Unter „Bestätigung“ legen Sie den Text fest, der dem Besucher nach dem erfolgreichen Absenden des Formulars auf der Website angezeigt wird. Sie können auch eine Seite (Page) angeben, auf die er oder sie weiter geleitet wird.

Unter „Benachrichtigungen“ lässt sich der Inhalt und das Aussehen der E-Mails bestimmen, die nach dem Absenden versendet werden. Der Eintrag {admin_email} schickt eine Mail an den im WordPress-Backend hinterlegten Administrator. Auch andere Empfänger sind möglich. Trägt man in das „Nachricht“ Textfeld {all_fields} ein, werden alle angelegten Felder mitgeschickt. Wie oben erwähnt lassen sich alle ausgefüllten Formulare über „Einträge“ zentral und übersichtlich einsehen.

Das neue Formular kann man in einem Beitrag (Post) oder einer Seite (Page) über den Button „Formulare“ einbauen. Sollte der Formular-Button nicht erscheinen, weil sie beispielsweise einen Layout-Builder nutzen, lässt sich das Formular auch über den Shortcode [ gravityform id=”X” ] einpflegen, wobei X für die Kennzahl des Formulars steht. Die finden Sie im Formular-Editor ganz oben.
Ab einer gewissen Länge sollte man Formulare nicht mehr auf einer Seite darstellen, sondern auf mehrere Seiten aufteilen. Gravity Forms ist gut dafür geeignet, um solche, mehrseitigen Formulare anzulegen. Ein Klick auf „Seitenumbruch“ im Editor setzt eine Seitenumbruchsgrafik ein, die sich per Maus zwischen die angelegten Felder schieben lässt. Nettes Feature: Ein Prozessbalken klärt den Besucher darüber auf, wie weit er im gesamten Formular fortgeschritten ist.

Fazit

Wie so oft gilt es im Vorwege festzustellen, welche Anforderungen man ein Formular hat, bevor man ein entsprechendes Plug-in installiert. Für den Einstieg und auf einer kleinen Websites reicht das kostenlose Contact Form 7 oft aus. Hat man die Erstellungslogik erst begriffen, lassen sich Formulare aller Art einfach erstellen. Die Community ist groß, viele Fragen wurden schon geklärt.
Wer Drag & Drop per Maus bevorzugt und zugleich komplexe Layouts erstellen möchte, für den könnte Gravity Forms die Wahl sein. Das Plug-in ist zwar kostenpflichtig, damit kauft man aber auch Support und Updates ein. Die einfache Einsicht in die Formulareinträge im WordPress Backend mag für viele Anwender ein weiteres Argument sein.