10 nützliche Funktionserweiterungen für das Plugin Contact Form 7

/10 nützliche Funktionserweiterungen für das Plugin Contact Form 7

10 nützliche Funktionserweiterungen für das Plugin Contact Form 7

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

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 Plugin

Flamingo: Übersicht im Nachrichten-Eingang

Plugin-Download: https://de.wordpress.org/plugins/flamingo/

#3 Material Design for Contact Form 7

Fehlen dir Animationseffekte in deinem Formular? Schließlich sehen die mit Contact Form 7 erstellten Formulare alle wie Klone aus. Das Plugin Material Design for Contact Form 7 verleiht dem Formular ein von Google inspiriertes Material Design.

Wenn du in die Input-Felder klickst, wandert die Beschriftung nach oben, verkleinert sich und macht Platz für den Eintrag. Die Umwandlung geht ganz schnell: Ist das Plugin installiert, tauschst du den Standardcode des Formulars gegen den neuen aus, den du in der rechten Spalte vorfindest. Schon hat das Formular einen neuen Look.

Material Design for Contact Form 7

Neuer Look fürs Kontaktformular mit Material Design

Wie ich beim Test gesehen habe, lassen sich mit der kostenlosen Version nur Input, Textarea und Submit umgestalten, für Checkboxen und Radio Buttons muss man die kostenpflichtige Pluginversion kaufen.

Lesen  10 interessante WordPress-Membership-Plugins für den Aufbau einer Mitgliederseite

Plugin-Download: https://wordpress.org/plugins/material-design-for-contact-form-7/

#4 Contact Form 7 Live Preview

Was Contact Form 7 ebenfalls vermissen lässt, ist eine schnelle Vorschau des erstellten Formulars, gerade wenn es etwas länger und komplexer ist. Mit dem Live-Preview kommt dieses Feature in den Erstellungsbereich von Contact Form 7 hinzu.

Unterhalb des Formularcodes wird der Preview-Bereich eingeblendet.

CF7-LivePreview

Contact Form 7 Live Preview: Erleichtert die Formular-Erstellung immens, wenn man gleich weiß, wie es auf der Website aussehen wird.

Plugin-Download: https://wordpress.org/plugins/cf7-live-preview/

#5 WP Contact Slider

WP Contact SliderMit 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: Einstellungen

WP Contact Slider: Formular

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-Form7-Redirection

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.

Lesen  Responsive Layouts: Ein Theme für alle Endgeräte

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

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“]

Contact Form 7 – PayPal & Stripe

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.

Contact Form 7 Database Addon – CFDB7

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.

Lesen  Plugin WooCommerce Germanized: Den Online-Shop rechtssicher machen

Conditional Fields for Contact Form 7

In die Gruppen trägst du dann die Beschriftungen (fieldset) und Formularfelder ein. Ich habe ein Tutorialbeispiel aus dem Internet übernommen. Hier der Code:

Conditional Fields for Contact Form 7

Dann müssen unter dem Registertab „Conditional fields“ die Bedingungen formuliert werden, die so aussehen:
Conditional Fields for Contact Form 7

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.

Conditional Fields for Contact Form 7

Wählst du Advanced fields aus, dann werden die Advanced fields mit den Feldern Betriebssystem und Weiteres angezeigt.

Conditional Fields for Contact Form 7

In den Advanced fields befindet sich eine Untergruppe namens group other, die ein weiteres Textfeld anzeigt, wenn im Auswahlmenü Betriebssystem Other gewählt wird.

Conditional Fields for Contact Form 7

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).

Contact Form 7 Multi-Step Forms

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:

Contact Form 7 Multi-Step Forms

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

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/

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.

2018-04-02T08:34:18+00:00 Kategorien: WordPress|Tags: , |0 Kommentare

Hinterlassen Sie einen Kommentar

Twitter News