gekennzeichnet. Wie Du mit zwei kostenfreien Tools Deine Besucher optimal konvertieren lässt. Mit wenig Aufwand zu maximalem Erfolg. WordPress-Eingabeformulare in Top-Design ohne Programmieraufwand mit Contact Form 7 und Magic Action Box. Zwei Addons bringen bessere SEO Platzierungen. Eine Umfrage mit WP-Polls rundet das Nutzererlebnis ab.
Das Grundproblem
Das Grundproblem kennt jeder Blogger und Webmaster: Die Besucher der eigenen Website besser kennenlernen und sie an sich binden. Noch besser: Sie zu wiederkehrenden Besuchern zu machen.
Um einen User direkt anzusprechen und ihm ein Angebot schmackhaft zu machen, muss man dessen Kontaktdaten haben. Über ein Kontaktformular bekommt man Mailadressen recht einfach. Vorausgesetzt, das Angebot spricht den Nutzer an und das Formular ist ansprechend gestaltet. Auch die Psychologie hinter einem Call To Action (CTA) spielt eine Rolle.
Warum das Rad neu erfinden, wenn es hervorragende und bewährte Lösungen für Mailing Formulare gibt? Am Ende des Beitrags gibt es übrigens eine Live-Demo, die alle beschriebenen Komponenten beinhaltet.
Die Lösung
Was ich jetzt vorstelle, hat sich jahrelang bewährt und einige hundert Kontakte generiert. Die Lösung funktioniert sowohl technisch hervorragend als auch menschlich: Der Mensch vor dem Computer oder Smartphone bekommt Lust, das angebotene Formular zu nutzen und seine Email Adresse anzugeben.
Die Lösung basiert auf zwei Komponenten und setzt WordPress voraus. Zwei zusätzliche Tools erhöhen das Ansehen Deiner Webseite in Suchmaschinen obendrauf.
Der Formulargenerator Contact Form 7
Contact Form 7 ist die wahrscheinlich populärste WordPress-Erweiterung für Formulare. Dieses Plugin erlaubt es, auf einfache Weise Eingabefelder und den Submit-Button zu definieren. Zahlreiche Erweiterungen für dieses Plugin, wie ein Date Picker zur Datumsauswahl, sind am Markt verfügbar.
Zunächst wird mit Contact Form 7 (kurz: CF7) ein Eingabeformular erzeugt. Die Admin-Oberfläche sieht etwa so aus:
Rot umrandet sind die relevanten Elemente: Oben befindet sich eine Leiste mit Eingabefeldern, wie Checkboxen, Textfelder, Email-Felder usw.
Darunter bietet der Texteditor die Möglichkeit, das Formular an seine Bedürfnisse anzupassen. Normalerweise reicht es, wenn man die Buttons aus der Leiste verwendet, um einen HTML Code für das Formular automatisch generieren zu lassen. Der Editor erlaubt es aber, manuell in den Code einzugreifen und Feinabstimmungen vorzunehmen.
Das so generierte CF7 Formular kann per Shortcut einfach in einen Beitrag (Page oder Post) eingebunden werden. Ein Beispiel hierfür (eckige Klammern am Anfang und Ende ergänzen):
contact-form-7 id="4711" title="Demo CF7"
Um bei mehreren Formularen nicht den Überblick zu verlieren oder um über das Formular verschickte Mails an den eigenen Server automatisiert verarbeiten zu können, sollte man spezifische Absenderkennungen vorsehen. Die Konfiguration ist denkbar einfach, wie der CF7 Konfigurator zeigt:
Eigentlich wäre diese CF7 Form bereits voll lauffähig. Sie kann Eingaben entgegennehmen und validieren (ungültige Eingaben von Mailadressen werden abgefangen). Außerdem verschickt CF7 bereits eine Mail an den Webmaster, nachdem ein User das Formular über den Submit-Button abgeschickt hat.
Das Problem mit den Standard CF7 Forms ist aber deren schlechte Konvertierung. Das liegt im Wesentlichen am Aussehen der Forms. Ein Beispiel folgt später.
Das führt uns zum nächsten Schritt der Lösung, einem weiteren Plugin für WordPress.
Gut konvertierende Formulare mit Magic Action Box
Das geniale an Magic Action Box ist: Die mit CF7 konfigurierten HTML Formulare waren nicht umsonst, sie werden vielmehr recycelt.
Magic Action Box (kurz: MAB) ist ein Wrapper um CF7 und versieht die etwas angestaubt drein schauenden Forms mit einer neuen Optik. Hier die Ansicht auf die Pflegeoberfläche, mit der man komfortabel schöne Formulare erzeugen kann:
MAB bietet von Hause aus vier Stile an: Default, Dark, Pink und Royal. Ich kann alle empfehlen, bis auf Pink vielleicht. Das ist eher was für Seiten in Bonbon-Farben.
Im MAB Editor wählt man einfach die erstellte CF7 aus und fügt dann später statt dem CF7 Shortcode den MAB Shortcode im Beitrag oder Artikel ein. Ein Beispiel (eckige Klammern am Anfang und Ende ergänzen):
magicactionbox id="4711"
Es ist sogar möglich, automatisch unter jedem Beitrag ein Formular einbauen zu lassen. Die Einstellung hierfür kann man bequem im MAB Menü vornehmen.Übrigens unterstützt MAB auch andere Form-Technologien wie Gravity Forms.
Ein Tipp aus der Praxis: Wenn man eine Action Box mit Bild wählt, dann führt das Bild, wenn es links oder rechts vom Formular steht, auf Smartphones zu suboptimalen Darstellungsergebnissen. Wer das umgehen möchte, kann das Bild entweder oberhalb des Kontaktformulars anzeigen lassen. Oder man greift in das MAB Stylesheet ein bzw. verändert das Template. Das Bild kann etwa bei Darstellung mit dem CSS-Framework Bootstrap mit den Klassen hidden-sm hidden-xs versehen und somit responsiv gemacht werden. Bei geringer Spaltenbreite, so wie in diesem Post, führen seitliche Bilder in der Form generell zu schlechten Layouts. Daher in solchen Szenarien das Image ganz weglassen oder oberhalb des Formulars positionieren.
Bounce Rate niedrig halten
Die Bounce Rate ist ein Kriterium, das Google heranzieht, um die Qualität einer Webseite zu beurteilen. Die Bounce Rate besagt wie viel Prozent der Website Besucher diese ohne weitere Navigation wieder verlassen haben. Das Problem hierbei: Google kann nicht jede Art von Navigation nachverfolgen. Am einfachsten erkennbar ist der Klick auf einen Link, der eine neue Seite aufruft.
Beim Klick auf den Senden-Button eines Formulars verhält sich die Sache aber u.U. anders. Google Analytics erkennt möglicherweise nicht, dass der Anwender eine Navigation angestoßen bzw. auf einen CTA reagiert hat.
Um seine Seite besser in Suchmaschinen ranken zu lassen, hier mein Extratipp: In Contact Form 7 kann man einstellen, dass eine neue Seite angezeigt wird, nachdem die Eingabedaten des Formulars per Email abgeschickt wurden. Das geht ganz einfach, wenn man weiß wie. Im CF7-Editor unter Zusatzeinstellungen (bzw. Additional Settings) folgenden Code einfügen:
on_sent_ok: "location = 'http://www.erfolgsrezepte-online.de/';"
Alle Zeichen so eingeben wie hier angegeben, auch wenn das etwas wild aussieht. Die URL natürlich an die eigene anpassen, außer man möchte Traffic auf diesen Blog lenken ?
Nutzerintention verstehen
Wer noch weiter gehen und verstehen will, warum ein User einen Web Formular verwendet hat, dem empfehle ich, eine Umfrage zu starten.
Am besten baut man die Umfrage auf der Seite ein, wo CF7 über vorigen Tipp angewiesen wurde, weiterzuleiten.
Ein gutes Plugin für Umfragen aller Art ist WP-Polls. Damit ist es ganz einfach, Umfragen mit Multiple Choice Antworten oder solche mit nur einer Antwortmöglichkeit zu definieren.
Der Polls Editor sei am Beispiel eines bereits definierten Surveys veranschaulicht:
Nachdem eine Umfrage definiert wurde, kann sie komfortabel per Shortcode in ein Page / Post eingebunden werden (eckige Klammern am Anfang und Ende ergänzen):
polls id="2"
Die Optik der Buttons und anderer Element sowie die Standardtexte, die das Plugin anzeigt, können übrigens direkt über die Erweiterung auf der Oberfläche angepasst werden.
Pro Eingabeformular empfiehlt sich eine eigene Umfrage. Auch ein zusätzliches Eingabefeld, dass Anregungen oder Verbesserungsvorschläge abfragt, macht hier Sinn.
Den Navigationspfad nachvollziehen
Einen perfekten Durchblick, auf welchem Weg eine Konvertierung stattgefunden hat, bietet das WordPress Plugin LeadIn (früherer Name war LeadOut).
Die Erweiterung zeichnet den Weg auf, den ein Besucher genommen hat, der ein Formular abschickt. Das ist insbesondere wichtig um das Navigationsverhalten der User besser zu verstehen.
Das Ergebnis der Analyse bekommt man als Webmaster oder Blogger direkt in den Posteingang:
Aus Datenschutzgründen sind in diesem Screenshot einige Angaben unkenntlich gemacht.
Seit ein paar Jahren sendet Google den Suchbegriff nicht mehr mit. Das bedeutet, man kann über den Referrer nicht mehr erkennen, wonach ein User gesucht hat, bevor er auf der Website gelandet ist. Allerdings werden in vielen Fällen verschlüsselte Parameter übertragen, die vom Plugin ausgewertet werden:
Der CD-Parameter wurde bereits entschlüsselt. Er gibt die Position des Suchbegriffs im Google Suchergebnis an, der angeklickt wurde. Ebenfalls kann anhand des Source Parameters die Traffic Quelle erkannt werden. Der im Screenshot nicht gezeigte Parameter namens VED erlaubt weitere Auswertungen, die im Kombination mit Google Analytics laufen müssen.
Mit LeadOut kann auch nachvollzogen werden, welcher User nach Abschicken des Kontaktformulars mit seiner Antwort an einer Umfrage teilgenommen hat!
Übrigens setze ich LeadOut ein, den kostenfreien Vorgänger von LeadIn. Letzteres Plugin hat zum Zeitpunkt seiner Markteinführung nämlich weniger geboten als LeadOut!
Ressourcen
Die oben beschriebenen Plugins können hier kostenfrei heruntergeladen werden:
- Contact Form 7
- Magic Action Box
- LeadIn (sowie die Open Source Variante LeadOut). Update: Aufgrund der DSGVO nicht mehr zu empfehlen!
Am einfachsten geht die Installation aber, wenn man in der Admin-Oberfläche von WordPress die Plugins sucht und direkt installiert.
Hier eine Live-Demo von einem Formular mit Magic Action Box auf Basis von Contact Form 7. Wenn Du das Formular ausfüllst und abschickst, gelangst Du wi im Beitrag beschrieben auf eine Umfrageseite.
Viel Spaß beim Ausprobieren!
Mit dem Absenden des Formulars erklärst Du Dich damit einverstanden, dass Deine Daten zu Demonstrationszwecken übertragen und gespeichert werden. Sie werden nicht an Dritte weitergegeben.
Das Formular wurde wegen der DSGVO erst einmal entfernt.
PS: Dies ist ein älterer Beitrag.
Mein Name ist Klaus Meffert. Ich bin promovierter Informatiker und beschäftige mich seit über 30 Jahren professionell und praxisbezogen mit Informationstechnologie. In IT & Datenschutz bin ich auch als Sachverständiger tätig. Mir sind juristische Gegebenheiten nicht fremd. Meine Ergebnisse gewinne ich durch Betrachtung von Technik und Recht. Das scheint mir absolut notwendig, wenn es um digitalen Datenschutz geht. Über Ihre 