Fast alle geschäftlichen Websites und Blogs verfügen über ein Kontaktformular. Das beliebteste WordPress-Plugin für die Erstellung von Kontaktformularen ist Contact Form 7, das ich vor längerer Zeit auf meinem Blog vorgestellt habe.
Mit seinen Funktionalitäten lassen sich für die meisten Ansprüche ansprechende Formulare erstellen. Wer weitere Features für Contact Form 7 benötigt, findet zahlreiche Erweiterungsplugins, von denen ich in diesem Beitrag 10 nützliche vorstelle.
#1 Contact Form 7 Skins
Mit diesem Skin-Plugin für Contact Form 7 kannst du die verschiedenen Formularelemente wie das Formular selbst, Input- und, Textarea-Felder, Checkboxen, Submit Button usw. gestalten, indem du ihnen selbst definierte Hintergrundfarben, Schriftgrößen, -schnitte und -farben, Rahmen, Abstände und Positionen zuweist.
Auch für den Hover-Zustand kannst du ein individuelles Erscheinungsbild definieren und als Layout abspeichern. Die vorgenommenen Anpassungen kannst du in dem Preview-Fenster links neben den Einstellungsoptionen sehen (siehe Screenshot unten).
Das Plugin bringt schon einige vordefinierte Skins mit.
Contact Form 7 Skins: Einstellungsbereich mit Preview
Plugin-Download: https://de.wordpress.org/plugins/contact-form-7-skins/
#2 Flamingo
Ein Nachteil von Contact Form 7 ist sicherlich die fehlende Archivierungsmöglichkeit der über das Formular versendeten Nachrichten. Glücklicherweise gibt es dafür Plugins, wie z. B. Flamingo.
Es erfasst unter dem neuen Punkt “Flamingo” im WordPress-Dashboard alle eingehenden Mails. Außerdem werden die Mailadressen der Absender in einem eigenen Bereich abgespeichert.
Flamingo: Übersicht im Nachrichten-Eingang
Plugin-Download: https://de.wordpress.org/plugins/flamingo/
#3 Image Captcha
Mit dem Image-Captcha-Plugin für Contact Form 7 kannst du deinem Kontaktformular ein SVG-Bild-Captcha hinzufügen. Das Captcha ist DSGVO-konform und die Einbindung verlangsamt die Website nicht mit weiteren Header-Anfragen.
Was ist ein Captcha?
Captcha ist eine Abkürzung für „Completly automated public turing test to tell computers and humans apart”. Die Technik unterscheidet ziemlich zuverlässig zwischen Computer und Mensch und wird als Spamschutz u. a. in Kontaktformularen eingesetzt. Die Verwendung eines Captchas soll verhindern, dass Spambots das gleiche Formular immer wieder ausfüllen und versenden.
Das Image Captcha wird mittels Shortcode in den Formulareditor des Kontaktformulars eingebunden: [cf7ic].
Damit das Captcha in Deutsch angezeigt wird, muss die Spracheinstellung in WordPress ebenfalls auf Deutsch stehen (Einstellungen -> Allgemein – > Sprache der Website).
Wer das Captcha im Formular ausblenden will, bis ein User es ausfüllt, kann es in einem Toggle verstecken: [cf7ic “toggle”]
Plugin–Download: https://de.wordpress.org/plugins/contact-form-7-image-captcha/
#4 Digitale Signatur für Contact Form 7
Falls mit dem Formular Contact Form 7 ein vertragsähnliches Online-Formular erstellt wird, bei dem es wichtig ist, dass der Versender es unterschrieben abschickt, kann man mit diesem Plugin ein Feld für eine digitale Signatur einbinden.
Nach der Plugin-Aktivierung findest du im Formulareditor die Funktion „digital_signature“. Wenn du daraufklickst, öffnet sich der Formular-Tag-Generator, in dem du verschiedene Einstellungen für das Eingabefeld für die Signatur vornehmen kannst:
- Du kannst das Feld zu einem Pflichtfeld machen (Required field).
- Du kannst den Feldnamen festlegen.
- Du kannst die Stift- bzw. Unterschriftfarbe definieren.
- Du kannst die Hintergrundfarbe des Eingabefeldes auswählen.
- Du kannst die Höhe (height) und Breite (width) des Feldes festlegen.
- CSS-Fortgeschrittene können auch noch ein ID Attribut und ein Class Attribut definieren, für die Funktionalität des Eingabefeldes ist dies aber nicht notwendig.
- Über den Button „Insert Tag“ fügst du den Shortcode in das Formular ein.
So sieht das Dialogfeld aus:
Im Formular sieht das Eingabefeld für die digitale Signatur folgendermaßen aus:
Ich habe mit der Maus unterschrieben, was sehr unbeholfen aussieht. 😊
Am besten stellst du vor das Eingabefeld im Formular noch eine Erläuterung, wie ich es in dem Beispiel getan habe, damit der User weiß, was genau er mit dem Feld machen muss.
Plugin-Download: https://wordpress.org/plugins/digital-signature-for-contact-form-7/
#5 WP Contact Slider
Mit dem WP Contact Slider kannst du entweder auf allen Seiten deiner Webpräsenz oder auf ausgewählten einen Formular-Slider einfügen. Das Slidertab (kleines Bild rechts) ragt entweder rechts oder links in die Website rein, klickst du darauf, schiebt sich das Kontaktformular in den Bildschirm rein.
In den Plugin-Einstellungen hast du die Möglichkeit, die Farben der verschiedenen Sliderelemente einzustellen, den Slider auf mobilen Endgeräten auszuschalten und zu entscheiden, was in dem Slider angezeigt werden soll: Ein mit einem Plugin erstelltes Kontaktformular (dann wird dessen Shortcode eingebunden) oder von dir erstelltes HTML.
Mit dem Plugin kannst du unterschiedliche Contact Slider anlegen und einbinden.
WP Contact Slider: Einstellungen
WP Contact Slider: So sieht das von mir erstellte Sliderformular aus
Plugin-Download: https://de.wordpress.org/plugins/wp-contact-slider/
#6 Contact Form 7 Redirection
Dieses Plugin liefert nur eine kleine Funktion, die durchaus sinnvoll und nützlich sein kann. Nach dem erfolgreichen Absenden eines Kontaktformulars leitet es den User zu einer von dir festgelegten Seite weiter.
Das kann eine interne Seite sein, aber auch eine externe URL ist möglich. Wer eine spezielle Danke- oder Infoseite für Formularabsender einrichten will, findet mit dem Plugin eine einfache Lösung.
Die Redirection-Funktion wird mit einem neuen Registertab in die Formularerstellungsseite eingebunden (siehe Screenshot).
Contact Form 7 Redirection: Registertab Redirect Settings
Plugin-Download: https://wordpress.org/plugins/wpcf7-redirect/
#7 Contact Form 7 – PayPal & Stripe
Willst du in dein Kontaktformular eine Zahlungsoption einfügen? Mit Contact Form 7 – PayPal & Stripe kannst du sowohl PayPal als auch Stripe einbinden. Du benötigst sowohl einen eigenen PayPal- als auch einen eigenen Stripe-Account, um diese Zahlungsweisen nutzen zu können.
Bevor du die Funktion einsetzen kannst, musst du die Einstellungen anpassen (Plugin-Settings), d.h. die Sprache und Währung wählen und für PayPal deine E-Mailadresse eintragen.
Für Stripe benötigst du noch mehr Daten wie den publishable und secret Key. Du findest in dem Registertab einen Link vor, wie du diese Keys in deinem Stripe-Account findest.
Auf der Formularerstellungsseite ist nun ein weiterer Registertab mit der Beschriftung PayPal & Stripe hinzugekommen.
Es bietet sich an, ein Auswahlmenü mit beiden Zahlungsweisen in das Kontaktformular einzubinden. Falls ja, musst du im Registertab von PayPal und Stripe ein Gateway Code eingeben, wie z. B. menu-33, wenn du ein SELECT-MENU für ein Auswahlmenü generierst.
Contact Form 7 – PayPal & Stripe: Registertab. Fülle auch die Item-Felder aus, diese Daten (Produktname, Preis) sieht der Bezahlende, wenn er zu PayPal weitergeleitet wird und den Zahlungsprozess durchführt.
Der in das Kontaktformular eingebundene Code sollte so aussehen:
[select menu-33 “Bezahlen mit PayPal|paypal” “Bezahlen mit Stripe|stripe”]
Willst du nur eine Zahlungsweise, beispielsweise PayPal, angeben, dann kannst du eine Checkbox verwenden:
[checkbox* checkbox-654 “Mit PayPal zahlen|paypal”]
Kontaktformular mit PayPal-Checkbox
Ich habe die Funktion getestet und es klappt wirklich: Ich bin zu PayPal weitergeleitet worden, nachdem ich das Formular verschickt hatte.
Plugin-Download: https://de.wordpress.org/plugins/contact-form-7-paypal-add-on/
#8 Contact Form 7 Database Addon – CFDB7
Eine Alternative zu Flamingo ist das Plugin Contact Form 7 Database Addon. Es speichert auch alle über ein oder mehrere Kontaktformulare eingegangenen Mails im WordPress-Dashboard ab.
CFDB7: Der Zähler zeigt an, dass über das Kontaktformular 1 eine Nachricht eingegangen ist. Wenn du auf die Zahl klickst, wird dir die eingegangene Mail in einer Übersicht angezeigt. Du kannst sie mit einem Klick auf Name, Email, Subject oder Date öffnen und lesen.
Plugin-Download: https://wordpress.org/plugins/contact-form-cfdb7/
#9 Conditional Fields for Contact Form 7
Das Conditional Fields Plugin erlaubt komplexere Formularabfragen. So ist es damit möglich, verschiedene Formularfelder anzuzeigen, wenn der User eine bestimmte Auswahl getroffen hat.
Wird beispielsweise ein Auswahlfeld mit einer Liste von Betriebssystemen dargestellt, wird bei der Wahl von “Anderes Betriebssystem” ein zusätzliches Textfeld eingeblendet, in das der Nutzer sein Betriebssystem eintragen kann.
Nach der Plugin-Installation findest du im Kontaktformular-Erstellungsbereich ein neues Registertab mit der Bezeichnung “Conditional Fields” vor. Dort kannst du die Bedingungen definieren, die als Gruppen anzulegen sind.
Um eine Gruppe anzulegen, in der sich die Felder befinden sollen, klickst du auf “Conditional fields Group”, wo du den Namen der Gruppe eingibst. Über Tag einfügen wird der Code in das Formular übernommen (siehe Bild unten). Du kannst mehrere Gruppen ineinander verschachteln.
In die Gruppen trägst du dann die Beschriftungen (fieldset) und Formularfelder ein. Ich habe ein Tutorialbeispiel aus dem Internet übernommen. Hier der Code:
Dann müssen unter dem Registertab “Conditional fields” die Bedingungen formuliert werden, die so aussehen:
Wenn das Formular in die Seite eingefügt wird, sieht das ganze folgendermaßen aus:
Wählst du im Auswahlfeld Basic fields aus, dann werden die Basic Fields mit Name und Mailadresse eingeblendet.
Wählst du Advanced fields aus, dann werden die Advanced fields mit den Feldern Betriebssystem und Weiteres angezeigt.
In den Advanced fields befindet sich eine Untergruppe namens group other, die ein weiteres Textfeld anzeigt, wenn im Auswahlmenü Betriebssystem Other gewählt wird.
Am Anfang scheint die Umsetzung von solchen Bedingungen bzw. Regeln recht komplex, doch eine intensive Beschäftigung bringt den Durchblick. :-)
Plugin-Download: https://de.wordpress.org/plugins/cf7-conditional-fields/
#10 Contact Form 7 Multi-Step Forms
Umfangreiche Formulare, die über mehrere Seiten gehen, lassen sich mit Contact Form 7 Multi-Steps Form realisieren. Nach der Plugin-Installation findest du im Kontaktformular-Erstellungsbereich neue Felder wie multistep, formfield und previous vor.
Für jede Formularseite ist es notwendig, eine neue Inhaltsseite anzulegen. Deren URLs benötigst du, um die einzelnen Formularseiten bei der Generierung des multistep-Tags einzutragen (siehe Bild).
Für den letzten Schritt (im Beispiel wäre das Schritt 3) brauchst du keine URL einzutragen. Um einen Weiter-Button am Ende einer jeden Formularseite einzubinden, kannst du den Submit-Button verwenden und die Beschriftung dementsprechend anpassen.
Mit dem previous-Tag kannst du einen Zurück-Button in deine mehrseitigen Formulare einbinden. Er leitet dann auf die vorhergehende Formularseite zurück.
Der Code sollte so aufgebaut sein:
Zuerst kommt der Weiter-Button, dann der multistep-Tag mit der Seiten-URL.
Es gibt für dieses Plugin noch das multiform-Tag, mit dem du die von dem User eingegebenen Daten auf der letzten Formularseite nochmals zusammenfassen kannst. So sieht der User, was er alles eingetragen hat.
Der Tag wird so geschrieben: [multiform “feldname”].
Contact Form 7 Multi-Step Forms: Die Formular-Darstellung von oben genanntem Code
Plugin-Download: https://de.wordpress.org/plugins/contact-form-7-multi-step-module/
#11 Wow Style Contact Form 7
Mit dem Plugin Wow Contact Form 7 lassen sich einfache Kontaktformulare ohne CSS-Kenntnisse ansprechend gestalten, so zum Beispiel mit Hintergrundgrafik, semitransparenten Eingabefeldern, Rahmen, Schatten und einiges mehr.
Das Plugin gibt es sowohl kostenlos als auch kostenpflichtig: Mit der Gratis-Version kannst du nur ein Formular gestalten, mit der Premium-Version so viele du willst.
Nach der Plugin-Installation findest du das Plugin im Bereich Formulare mit einem neuen Navigationspunkt: CF7 Styler
Anpassungen zu bestimmten Formularbereichen kannst du in folgenden Tabs vornehmen:
- Formulartext, Links und Labels
- Formularhintergrund und -farbe
- Formularabstände, Rahmen und Schatten
- Eingabefelder
- Checkboxen und Radiobuttons
- Buttons
- Benutzerdefiniertes CSS
Bild: Plugin-Bearbeitungsfläche
In der Mitte des Bildschirms wird dir das zu bearbeitende Kontaktformular angezeigt. Über einen vertikalen Schieber kannst dir die Vorher-Nachher-Darstellung anschauen.
Bild: Beispiel für ein mit WOW Style CF7 umgestaltetes Formular
Plugin-Download zur kostenlosen Version: https://wordpress.org/plugins/cf7-styler/
Den Upgrade-Link findest du in dem Pluginbereich (siehe 1. Bild). Bei monatlicher Bezahlung kostet das Plugin 2,99 $, bei jährlicher Bezahlung 2,42 $.
Hinweis: Beachte die DSGVO
Wenn du Contact Form 7 sowie dessen Erweiterungen auf deinem Blog einsetzt, denke daran, dass du die DSGVO-Regeln berücksichtigst.
Denn die User versenden über das Formular persönliche Daten wie E-Mail-Adresse, Namen etc.
Deshalb solltest du die Kompatibilität deiner Plugins mit deiner Datenschutzerklärung überprüfen, vor allem wenn über das Formular Zahlungen via PayPal oder Stripe erfolgen oder wenn die Kontaktdaten in einer Datenbank abgespeichert werden.
Zusammenfassung
Neben diesen 10 vorgestellten Plugin-Erweiterungen für das Kontaktformular Contact Form 7 gibt es noch einige mehr. Ich habe die (aus meiner Sicht) besten ausgewählt, was durchaus eine subjektive Entscheidung war.
Bitte nicht vergessen: Alle hier aufgeführten Plugins funktionieren nur, wenn auch das Plugin Contact Form 7 installiert ist.
