So erstellen Sie ein WordPress Kontaktformular
Lesezeit 18 minuten|Posted on 1. Mai 2019
Eine Unternehmenswebsite verfolgt in der Regel das Ziel, Kunden auf die Produkte und Dienstleistungen des Unternehmens aufmerksam zu machen und näher zu informieren. Diese anonyme Bekanntschaft gilt es im Anschluss in einen persönlichen Kontakt auszubauen.
Eine Möglichkeit dafür: das WordPress Kontaktformular.
1 Welche Vorteile hat ein Kontaktformular?
2 Wo positionieren Sie das Kontaktformular auf Ihrer Website?
3 Welches WordPress Kontaktformular Plugin ist das richtige für Sie?
4 Darauf sollten Sie bei der Einbindung eines Kontaktfeldes achten
1. Welche Vorteile hat ein Kontaktformular?
Über ein Kontaktformular kann der Besucher einer Website seine Kontaktdaten und eine Nachricht direkt online auf der Website eingeben. Damit sind Kontaktformulare besonders nutzerfreundlich: Statt umständlich ein E-Mail-Programm öffnen und eine E-Mail-Adresse eingeben oder kopieren zu müssen, kann der Besucher seine Frage direkt stellen. Das erhöht die Wahrscheinlichkeit, dass der Besucher mit Ihnen in Kontakt tritt.
Natürlich wird es Besucher geben, die Sie lieber anrufen oder direkt per E-Mail anschreiben möchten. Gar kein Problem, herzlich willkommen! Aber über ein Kontaktformular generieren Sie zusätzliche Kontakte, die Ihre Seite sonst vielleicht ohne Kontaktaufnahme wieder verlassen würden.
2. Wo positionieren Sie das Kontaktformular auf Ihrer Website?
Für viele Websites ist es sinnvoll, eine Kontaktseite im Hauptmenü zu platzieren. Wenn Sie als Unternehmen Produkte oder Dienstleistungen anbieten, möchten Sie, dass potentielle Kunden Sie kontaktieren.
Auch diesbezüglich gibt es natürlich Ausnahmen: Bei Spiegel Online steht die Kontaktaufnahme genauso wenig im Vordergrund wie auf tagesschau.de. Und Seiten mit einem Online Shop hoffen auf eine automatische Abwicklung des Verkaufs, so dass sie die Kontaktseite weniger prominent platzieren.
Dennoch: Sofern Sie als Unternehmen Produkte oder Dienstleistungen anbieten, spricht vieles dafür, dass Sie eine eigene Kontaktseite anlegen.
So gehen Sie vor, wenn Sie eine neue Kontaktseite erstellen möchten:</
1. Loggen Sie sich dafür ins Backend Ihrer WordPress Website ein.</
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
2. Klicken Sie in der Menüleiste links zunächst auf SEITEN und dann im Untermenü auf ERSTELLEN.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
3. Geben Sie nun den Seitentitel „Kontakt“ (oder einen ähnlichen Titel) oben in den Gutenberg-Editor ein und klicken Sie auf den VERÖFFENTLICHEN-Button oben rechts.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
4. Wählen Sie anschließend in der Menüleiste den Menüpunkt DESIGN und den Untermenüpunkt Menü aus.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
5. Setzen Sie nun links unter „Menüpunkte hinzufügen“ ein Häkchen unter die Seite, die Sie zu Ihrem Menü hinzufügen möchten. In diesem Fall ist das die Seite Kontakt. Klicken Sie im Anschluss auf ZUM MENÜ HINZUFÜGEN.
6. Der Menüpunkt erscheint nun auf der rechten Seite im Menü. Per Drag&Drop (also durch Verschieben mit dem Mauszeiger) können Sie die Reihenfolge der Menüpunkte ändern.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
7. Klicken Sie abschließend auf den MENÜ SPEICHERN-Button, um die Änderungen am Menü zu speichern.
Manche Unternehmen binden zusätzlich ein Kontaktformular auf jeder Seite im Footer mit ein. Je nachdem, wie Ihre Kunden vorrangig Kontakt zu Ihnen aufnehmen, kann auch diese Möglichkeit für Sie sinnvoll sein.
3. Welches WordPress Kontaktformular Plugin ist das richtige für Sie?
Grundsätzlich stehen Ihnen eine Vielzahl an Plugins zur Verfügung, die ein Kontaktformular in Ihre WordPress-Website einbinden. Wir stellen Ihnen an dieser Stelle mit Jetpack und Contact Form 7 zwei dieser Plugins ausführlicher vor. Im Anschluss präsentieren wir Ihnen eine kurze Liste mit weiteren Plugins.
3.1 Das Jetpack-Kontaktformular
Jetpack ist kein gewöhnliches Plugin, sondern umfasst eine Vielzahl an WordPress-Funktionen, die Sie – sobald Sie Jetpack installiert haben – problemlos in Ihre Seite einbetten können. Entwickelt wurde Jetpack von Automattic, einem Unternehmen, das Matt Mullenweg, der Erfinder und Entwickler von WordPress, gegründet hat. Jetpack umfasst eine Vielzahl an Funktionen wie zum Beispiel Statistiken, Buttons, Bildergalerien – und eben auch ein Kontaktformular.
Eine Anleitung zur Installation von Jetpack finden Sie hier.
So gehen Sie vor, wenn Sie das Kontaktformular-Plugin von Jetpack nutzen möchten:
1. Wählen Sie über den Menüpunkt SEITEN in Ihrem WordPress-Backend die KONTAKT-Seite aus.
2. Klicken Sie im Gutenberg-Editor neben einer leeren Box auf das Plus-Zeichen.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
3. Ihnen wird nun eine Liste mit möglichen Formaten angezeigt, die Sie hinzufügen können.
4. Scrollen Sie über den Balken rechts in der Box nach unten. Klicken Sie auf den kleinen Pfeil neben „Jetpack“.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
5. Klicken Sie nun auf FORM.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
6. Ihnen wird nun ein Formular angezeigt. Tragen Sie ein, an welche E-Mail-Adresse eine Nachricht geschickt werden soll, sobald jemand eine Nachricht über das Kontaktformular hinterlässt. Klicken Sie im Anschluss auf ADD FORM.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
7. Jetpack erstellt nun für Sie ein Kontaktformular.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
8. Per Mausklick können Sie die einzelnen Boxen anwählen.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
9. Wenn Sie mit dem Mauszeiger über das Symbol (das je nach Art der Box verschieden ausfällt) fahren, erscheinen zwei Pfeile und der Schriftzug „Block-Typ ändern“. Klicken Sie, um einen anderen Box-Typ auszuwählen. So könnten Sie zum Beispiel statt der Website die Telefonnummer abfragen (wobei wir es nicht für sinnvoll halten, nach der Telefonnummer zu fragen – dazu später mehr).
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
10. Außerdem können Sie ein Eingabefeld löschen. Klicken Sie dazu auf die drei Punkte über dem Feld. Es wird ein Menü eingeblendet. Klicken Sie hier auf BLOCK ENTFERNEN.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
11. Klicken Sie abschließend auf den AKTUALISIEREN-Button, um das Kontaktformular zu speichern.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
Tatsächlich wird auf Ihrer Kontakt-Seite nun ein Kontaktfeld eingeblendet, das an das Design Ihrer Seite angepasst ist. Eventuell müssen Sie hier etwas nachjustieren – in unserem Beispiel sieht es schon ohne weitere Hilfe sehr gut aus:
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
3.2 Contact Form 7
Das beliebteste WordPress Kontaktformular Plugin ist vermutlich Contact Form 7, das von Takayuki Miyoshi entwickelt wurde. Wenn Sie lediglich ein Kontaktformular benutzen möchten, auf den Rest der Funktionen von Jetpack aber verzichten können, raten wir Ihnen zur Installation dieses Plugins. Auf diese Weise halten Sie Ihre Website schlank und installieren wirklich nur genau jene Funktionen, die Sie wirklich benötigen.
Contact Form 7 ist außerdem hervorragend, wenn Sie verschiedene Variationen von Kontaktformularen auf Ihrer Seite benutzen möchten – oder die Formulare sehr individuell anpassen möchten.
Im Unterschied zum Jetpack-Kontaktformular legen Sie Kontaktformulare zunächst eigenständig an und fügen diese im Anschluss in Ihre Seite ein.
Gehen Sie folgendermaßen vor:
1. Wählen Sie in der Menüleiste des WordPress Backends den Menüpunkt PLUGINS und den Untermenüpunkt INSTALLIEREN aus.
2. Geben Sie „Contact Form 7“ (natürlich ohne die Gänsefüßchen) in die Suchleiste ein.
3. Ihnen werden nun mehrere Plugins angezeigt, darunter auch Contact Form 7. Klicken Sie dort auf den JETZT INSTALLIEREN-Button.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
4. Klicken Sie im Anschluss auf AKTIVIEREN.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
5. Nachdem Sie das Plugin aktiviert haben, finden Sie im Menü nun einen eigenen Menüpunkt mit dem Namen FORMULARE. Klicken Sie darauf.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
6. Wählen Sie nun den Punkt NEU HINZUFÜGEN aus.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
7. Ihnen wird nun ein neues Kontaktformular angezeigt. Wählen Sie zunächst oben einen Namen für das Formular aus. Anschließend können Sie die Felder des Formulars verändern, Felder hinzufügen oder löschen. Dabei ist jedes Feld in den Code „… “ eingebettet. Vorgegeben ist zunächst also ein Kontaktformular mit vier Feldern.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
8. Über die Leiste oben können Sie als nächstes Ihre E-Mail-Einstellungen vornehmen. An welche Adresse soll eine E-Mail mit welchen Informationen geschickt werden, sobald jemand eine Nachricht über das Kontaktformular abschickt? Außerdem können Sie am Ende hinter „Submit“ den Text des Senden-Buttons ändern, indem Sie den Text innerhalb der Anführungszeichen ändern.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
9. Wählen Sie nun den MELDUNGEN-Reiter aus. Hier können Sie Nachrichten eingeben, die dem Besucher nach dem Ausfüllen des Kontaktformulars angezeigt werden.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
10. Klicken Sie abschließend auf SPEICHERN, um das neue Kontaktformular zu sichern oder Änderungen an einem bestehenden Formular zu übernehmen.
11. Sobald Sie das Kontaktformular gespeichert haben, wird Ihnen ein WordPress Shortcode oben auf der Seite angezeigt.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
12. Kopieren Sie diesen und fügen Sie ihn einfach dort ein, wo Sie ein Kontaktformular anlegen möchten. Wir fügen diesen Shortcode einfach auf unserer Kontakt-Seite ein und klicken im Anschluss auf AKTUALISIEREN.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
13. Et voilà – fertig ist das Kontaktformular auf der Website!
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
3.3 Weitere Kontaktformular-Plugins
Neben den vorgestellten gibt es noch weitere Kontaktformular-Plugins, von denen wir Ihnen hier drei in aller Kürze vorstellen möchten:
- Ninja Forms: Einfache und intuitive Nutzung dank Drag & Drop. Besonders praktisch ist die Verknüpfung mit Newsletter-Anbietern wie zum Beispiel Mailchimp.
- Gravity Forms: Viele Funktionen und sehr intuitiver Umgang dank Drag & Drop. Dafür aber kostenpflichtig.
- AntiRobot: Einfach, übersichtlich, leicht zu bedienen. Die schlanke Lösung, die genau das macht, was sie soll.
3.4 Wichtig: testen Sie Ihr Kontaktformular
Für welches Kontaktformular Sie sich auch entschieden haben mögen: wichtig ist, dass Sie das Formular vorab testen. Vielleicht haben Sie Ihre E-Mail-Adresse falsch eingegeben, vielleicht hakt es an anderer Stelle. Was es auch ist: Wenn Ihr Kontaktformular nicht richtig funktioniert, entgehen Ihnen womöglich wichtige Kundenanfragen, ohne dass Sie es merken. Und Ihre Kunden werden Sie für unzuverlässig halten und sich an Ihre Konkurrenz wenden.
Darum: testen Sie das Formular vorab, indem Sie sich selbst eine Nachricht schicken. Probieren Sie dabei verschiedene Browser (Chrome, Firefox, Edge, Safari) aus und prüfen Sie auch, ob das Formular über Mobilgeräte funktioniert.
4. Darauf sollten Sie bei der Einbindung eines Kontaktfeldes achten
Wenn Sie ein Kontaktfeld auf Ihrer Seite einrichten, möchten Sie, dass Besucher Kontakt mit Ihnen aufnehmen – vielleicht wird ja eine Geschäftsbeziehung daraus.
Darum gilt grundsätzlich: Machen Sie es für den Besucher so leicht wie möglich, Ihnen eine Nachricht zuzusenden. Räumen Sie unnötige Hindernisse aus dem Weg. Zerstreuen Sie mögliche Bedenken des Besuchers, die ihn am Ausfüllen des Formulars hindern könnten.
In unserer jahrelangen Arbeit mit WordPress, im Online Marketing und dank unseres Umgangs mit Datenanalyse-Tools konnten wir einige wichtige Erfahrungen gewinnen, wie Kontaktformulare bei WordPress möglichst gut konvertieren.
Die wichtigsten Regeln haben wir hier für Sie zusammengefasst:
4.1 Beschränken Sie die Zahl der Eingabefelder
Ja, selbstverständlich müssen Sie ein paar Informationen vom Besucher einsammeln. Dafür benötigen Sie mindestens zwei Felder: die E-Mail-Adresse und ein Textfeld, in das der Besucher seine Nachricht an Sie eingeben kann. Um eine persönliche Beziehung zu etablieren, empfiehlt es sich auch, den Namen des Besuchers mit abzufragen. Eventuell können Sie auch den Betreff der Nachricht mit abfragen, um die Nachricht intern gut verwalten zu können.
Im Normfall gilt: das war’s. Natürlich können Sie auch die Telefonnummer, die Postanschrift, die Augenfarbe, das Lieblingsessen und die drei Dinge abfragen, die der Besucher mit auf eine einsame Insel nehmen würde.
Zugegeben, die Beispiele sind ein bisschen übertrieben. Aber Sie verstehen das Prinzip: je mehr Informationen Sie abfragen, desto lästiger wird das Ausfüllen für den Besucher. Und zugleich fragt er sich womöglich, wozu Sie all seine Daten überhaupt benötigen – er will Ihnen doch nur eine simple Frage stellen.
Statistiken zeigen, dass die Konversionsrate von Kontaktfeldern bei 3 Feldern am höchsten ist und mit jedem zusätzlichen Feld immer weiter abnimmt.
In anderen Worten: über je mehr Felder Ihr Kontaktformular verfügt, desto weniger Leute werden Sie darüber kontaktieren.
Beschränken Sie wenn möglich also die Zahl der Eingabefelder Ihres WordPress Kontaktformulars auf maximal fünf.
Wir von Rashedi Consulting verwenden vier Kontaktfelder und fragen Name, E-Mail-Adresse, Betreff und die Nachricht des Besuchers ab.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
Übrigens: Wenn Sie wie wir Vor- und Nachname in einem Feld abfragen, sparen Sie sich ein weiteres Eingabefeld. Tricky 😉
4.2 Verzichten Sie darauf, die Telefonnummer abzufragen
Im Prinzip haben wir diesen Tipp bereits im vorigen Punkt mit angeschnitten. Dennoch möchten wir ihn darum nochmal eigens herausstellen: Verzichten Sie darauf, die Telefonnummer der Besucher abzufragen.
Denn würden Sie einer wildfremden Person auf der Straße einfach Ihre Telefonnummer geben?
Vermutlich nicht… also erwarten Sie es auch nicht von den Besuchern Ihrer Website.
Die meisten Personen, die mit Ihnen das erste Mal Kontakt aufnehmen, wissen noch nicht, dass Sie ein vertrauenswürdiges Unternehmen sind, auch wenn sie natürlich die Hoffnung haben.
Es mag Ausnahmen geben, in denen Sie die Telefonnummer tatsächlich benötigen – dann fragen Sie danach. In den allermeisten Fällen besteht dazu aber keine Notwendigkeit.
Warum sollten Sie darauf verzichten? Weil die Eingabe der Telefonnummer zum einen Vertrauen voraussetzt. Zum anderen erhöht sie die Verbindlichkeit des Anliegens. Ein Kunde, der vielleicht nur vorsichtig anfragen will, ob Sie einen bestimmten Service anbieten, hat so schnell das Gefühl, damit eine verpflichtende Geschäftsbeziehung zu etablieren. Und zugleich fürchtet er womöglich, dass Sie ihm fortan telefonisch ungefragt immer wieder Angebote unterbreiten werden.
Keine Sorge – natürlich können Sie mit dem potentiellen Kunden noch früh genug telefonischen Kontakt aufnehmen. Aber warten Sie damit doch einfach, bis Sie ein paar E-Mails hin- und hergeschrieben haben und der Kunde sieht, dass Sie ein seriöser Partner sind. Vielleicht ruft er Sie ja sogar selbst an…
4.3 Verzichten Sie auf Captchas
Ja, es soll tatsächlich Menschen geben, denen es Freude bereitet, schwer leserliche Buchstaben- und Zahlenkombinationen zu entziffern, Mathematikaufgaben zu lösen oder alle Bilder mit Ampeln, Fahrrädern und Spaghetti zu identifizieren.
Wir gehören nicht dazu, und Sie vermutlich auch nicht.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
Captcha ist ein Akronym (also ein aus den Anfangsbuchstaben einer Wortkombination gebildetes neues Wort), das aus der englischen Wortfolge „completely automated public Turing test to tell computers and humans apart“ gebildet wurde. Captchas dienen also dazu, Computer von Menschen zu unterscheiden. Damit schützen Sie Kommentar- und Kontaktfelder vor Spam, der automatisch von Computern eingetragen wird.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
Das Problem: Computer werden immer smarter, also werden die Captchas immer komplizierter, unverständlicher und somit lästiger.
Ja, vielleicht schützen Captchas Ihr Postfach vor Spam. Aber leider springen auch viele Ihrer Besucher ab, weil Sie keine Lust haben, alle Bilder mit einer Sahnetorte, einer Kaffeetasse oder – ja, wirklich – einem Feuerhydranten auszuwählen.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
Nehmen Sie es also lieber in Kauf, ein paar Spameinträge zu erhalten und generieren Sie dafür mehr Kundenkontakte.
4.4 Sorgen Sie dafür, dass sich das Kontaktformular vom Rest der Seite abhebt
Es ist beinahe paradox: Ihr Kontaktformular sollte sich optisch vom Rest der Seite abheben und sich zugleich harmonisch in das bestehende Design einfügen.
Stellen Sie sich vor, die Website ist Ihre Geschäftsfront und das Kontaktformular Ihre Türklingel. Die Klingel sollte deutlich erkennbar sein, damit Kunden es möglichst leicht haben, an der Tür zu läuten.
Zugleich sollte die Klingel aber zu Ihrer Hausfassade passen, damit die Fassade weiterhin harmonisch und die Klingel nicht wie ein Fremdkörper wirkt.
Quelle: pixabay.com
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
An dieser Stelle können wir nicht detailliert auf Design-Fragen eingehen. Aus diesem Grund zeigen wir Ihnen kurz exemplarisch, wie wir dieses Problem auf unserer Homepage gelöst haben.
Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild
Im Gegensatz zu den übrigen Bildelementen ist das Kontaktformular mittig platziert und hebt sich dadurch deutlich ab, ohne selbst zu aufdringlich zu sein. Die Eingabefelder treten durch den grauen Hintergrund besonders hervor – der Hintergrund der restlichen Seite ist nämlich weiß.
4.5 Heben Sie den CTA-Button hervor
Der Call-to-Action-Button (kurz CTA-Button) fordert den Besucher auf, Ihnen die Nachricht über das Kontaktformular zuzusenden. Er kann verschiedene Aufforderungen haben: „Senden“, „Abschicken“, „Kontakt aufnehmen“, … Probieren Sie aus, was für Sie am Besten passt.
Wichtig ist, dass Sie Ihren Besucher an die Hand nehmen und das Augenmerk der Seite auf diesen Button konzentrieren. Verzichten Sie auf blinkende Buttons und verrückte Animationen, aber positionieren Sie den Button dennoch deutlich sichtbar. Wählen Sie eine prägnante Farbe, mit der sich der Button deutlich abhebt, ohne unangenehm aufzufallen. Am besten bewährt hat sich in der Praxis die Farbe Rot. Wir haben uns dennoch für Blau entschieden, weil dies zum Design unserer Seite besser passt.
Wenn Sie eines der hier vorgestellten Plugins verwenden und die fünf Tipps am Ende beachten, sollte bei der Einrichtung Ihres Kontaktformulars nichts mehr schief gehen. Wenn Sie dennoch gerne professionelle Unterstützung hätten, wenden Sie sich gerne an uns – zum Beispiel über unser Kontaktformular 😉
JONAS RASHEDI
Umsetzungsstarker Senior Consultant und Interim Manager mit umfangreicher Erfahrung in der Implementierung digitalisierter Prozesse und Produkte zur Optimierung von Vermarktung und Mediastrukturen sowie agilen Methoden.
