Inhalte Anzeigen
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 7benötigt, findet zahlreiche Erweiterungsplugins, von denen ich in diesem Beitrag 10 nützliche vorstelle.
#1 Contact Form 7Skins
Mit diesem Skin-Plugin für Contact Form 7kannst 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 Screenshotunten).
Das Plugin bringt schon einige vordefinierte Skinsmit.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (2) WordPress Contact Form 7: 10 + nützliche Erweiterungen (2)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/contact-form7-skins.webp)
Contact Form 7Skins: Einstellungsbereich mit Preview
Plugin-Download: https://de.wordpress.org/plugins/contact-form-7-skins/
#2 Flamingo
Ein Nachteil von Contact Form 7ist 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.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (3) WordPress Contact Form 7: 10 + nützliche Erweiterungen (3)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/wordpress-plugin-flamingo.webp)
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 7kannst 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].
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (4) WordPress Contact Form 7: 10 + nützliche Erweiterungen (4)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/Image-Captcha.webp)
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 Form7
Falls mit dem Formular Contact Form 7ein 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 (Requiredfield).
- 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 Formularein.
So sieht das Dialogfeldaus:
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (5) WordPress Contact Form 7: 10 + nützliche Erweiterungen (5)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/Digitale-Signatur-Dialogfeld-1.webp)
Im Formular sieht das Eingabefeld für die digitale Signatur folgendermaßenaus:
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (6) WordPress Contact Form 7: 10 + nützliche Erweiterungen (6)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/Feld-Digitale-Signatur.webp)
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
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (7) WordPress Contact Form 7: 10 + nützliche Erweiterungen (7)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/wp-contact-slider-tab.webp)
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 erstelltesHTML.
Mit dem Plugin kannst du unterschiedliche Contact Slider anlegen und einbinden.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (8) WordPress Contact Form 7: 10 + nützliche Erweiterungen (8)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/wp-contact-slider-einstellungen.webp)
WP Contact Slider: Einstellungen
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (9) WordPress Contact Form 7: 10 + nützliche Erweiterungen (9)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/wp-contact-slider-formular.webp)
WP Contact Slider: So sieht das von mir erstellte Sliderformularaus
Plugin-Download: https://de.wordpress.org/plugins/wp-contact-slider/
#6 Contact Form 7Redirection
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).
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (10) WordPress Contact Form 7: 10 + nützliche Erweiterungen (10)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/Contact-Form7-Redirection.webp)
Contact Form 7Redirection: 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.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (11) WordPress Contact Form 7: 10 + nützliche Erweiterungen (11)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-paypal-stripe-register.webp)
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”]
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (12) WordPress Contact Form 7: 10 + nützliche Erweiterungen (12)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-paypal-formular.webp)
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 7Database Addon –CFDB7
Eine Alternative zu Flamingo ist das Plugin Contact Form 7Database Addon. Es speichert auch alle über ein oder mehrere Kontaktformulare eingegangenen Mails im WordPress-Dashboardab.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (13) WordPress Contact Form 7: 10 + nützliche Erweiterungen (13)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-database-addon.webp)
CFDB7: Der Zähler zeigt an, dass über das Kontaktformular 1eine 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 undlesen.
Plugin-Download: https://wordpress.org/plugins/contact-form-cfdb7/
#9 Conditional Fields for Contact Form7
Das Conditional Fields Plugin erlaubt komplexere Formularabfragen. So ist es damit möglich, verschiedene Formularfelder anzuzeigen, wenn der User eine bestimmte Auswahl getroffenhat.
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 eintragenkann.
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 anzulegensind.
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.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (14) WordPress Contact Form 7: 10 + nützliche Erweiterungen (14)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-conditionalfields-groups.webp)
In die Gruppen trägst du dann die Beschriftungen (fieldset) und Formularfelder ein. Ich habe ein Tutorialbeispiel aus dem Internet übernommen. Hier derCode:
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (15) WordPress Contact Form 7: 10 + nützliche Erweiterungen (15)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-formularcode.webp)
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ßenaus:
Wählst du im Auswahlfeld Basic fields aus, dann werden die Basic Fields mit Name und Mailadresse eingeblendet.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (17) WordPress Contact Form 7: 10 + nützliche Erweiterungen (17)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-conditionalfields-form1.webp)
Wählst du Advanced fields aus, dann werden die Advanced fields mit den Feldern Betriebssystem und Weiteres angezeigt.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (18) WordPress Contact Form 7: 10 + nützliche Erweiterungen (18)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-conditionalfields-form2.webp)
In den Advanced fields befindet sich eine Untergruppe namens group other, die ein weiteres Textfeld anzeigt, wenn im Auswahlmenü Betriebssystem Other gewählt wird.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (19) WordPress Contact Form 7: 10 + nützliche Erweiterungen (19)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-conditionalfields-form3.webp)
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 7Multi-Step Forms
Umfangreiche Formulare, die über mehrere Seiten gehen, lassen sich mit Contact Form 7Multi-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 (sieheBild).
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (20) WordPress Contact Form 7: 10 + nützliche Erweiterungen (20)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-multistep-tag.webp)
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 aufgebautsein:
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (21) WordPress Contact Form 7: 10 + nützliche Erweiterungen (21)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-multistep-code.webp)
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 eingetragenhat.
Der Tag wird so geschrieben: [multiform “feldname”].
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (22) WordPress Contact Form 7: 10 + nützliche Erweiterungen (22)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/cf7-multistep-formular.webp)
Contact Form 7Multi-Step Forms: Die Formular-Darstellung von oben genanntemCode
Plugin-Download:https://de.wordpress.org/plugins/contact-form-7-multi-step-module/
#11 Wow Style Contact Form7
Mit dem Plugin Wow Contact Form 7lassen sich einfache Kontaktformulare ohne CSS-Kenntnisse ansprechend gestalten, so zum Beispiel mit Hintergrundgrafik, semitransparenten Eingabefeldern, Rahmen, Schatten und einigesmehr.
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
- BenutzerdefiniertesCSS
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (23) WordPress Contact Form 7: 10 + nützliche Erweiterungen (23)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/WOW-Style-CF7-Screen.webp)
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.
![WordPress Contact Form 7: 10 + nützliche Erweiterungen (24) WordPress Contact Form 7: 10 + nützliche Erweiterungen (24)](https://i0.wp.com/www.geld-online-blog.de/wp-content/uploads/Beispielformular-WOW-Styler-CF7.webp)
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 dieDSGVO
Wenn du Contact Form 7sowie 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, Namenetc.
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 7gibt es noch einige mehr. Ich habe die (aus meiner Sicht) besten ausgewählt, was durchaus eine subjektive Entscheidungwar.
Bitte nicht vergessen: Alle hier aufgeführten Plugins funktionieren nur, wenn auch das Plugin Contact Form 7installiertist.
Das könnte dich auch interessieren:
- Plugin-Vorstellung: Kontaktformulare erstellen mit Contact Form7
- Die 10 beliebtesten WordPress-Plugins2019
- Einen Blog erstellen mit WordPress — Teil 3: Mit Plugins die Blog-Funktionalitäten…
- WordPress-Blog zur BuddyPress-Community erweitern – Teil 4: Wichtige BuddyPress-Plugins
- Slideshow-Plugins für WordPress — Premium und Gratis
- Einen Blog erstellen mit WordPress – Teil 8: Fünf beliebte Social-Bookmark-Plugins
- DSGVO: Wie setze ich die Bestimmungen um? 4. WordPress-Plugins und dieDSGVO
- 10 wichtige Datenschutz-Plugins, mit denen du WordPress DSGVO-sicher machst