10+ nütz­li­che Funk­ti­ons­er­wei­te­run­gen für das Plug­in Cont­act Form 7

Fast alle geschäft­li­chen Web­sites und Blogs ver­fü­gen über ein Kon­takt­for­mu­lar. Das belieb­tes­te Word­Press-Plug­in für die Erstel­lung von Kon­takt­for­mu­la­ren ist Cont­act Form 7, das ich vor län­ge­rer Zeit auf mei­nem Blog vor­ge­stellt habe. 

Mit sei­nen Funk­tio­na­li­tä­ten las­sen sich für die meis­ten Ansprü­che anspre­chen­de For­mu­la­re erstel­len. Wer wei­te­re Fea­tures für Cont­act Form 7 benö­tigt, fin­det zahl­rei­che Erwei­te­rungs­plug­ins, von denen ich in die­sem Bei­trag 10 nütz­li­che vorstelle.

#1 Cont­act Form 7 Skins

Mit die­sem Skin-Plug­in für Cont­act Form 7 kannst du die ver­schie­de­nen For­mu­lar­ele­men­te wie das For­mu­lar selbst, Input- und, Text­area-Fel­der, Check­bo­xen, Sub­mit But­ton usw. gestal­ten, indem du ihnen selbst defi­nier­te Hin­ter­grund­far­ben, Schrift­grö­ßen, ‑schnit­te und ‑far­ben, Rah­men, Abstän­de und Posi­tio­nen zuweist.

Auch für den Hover-Zustand kannst du ein indi­vi­du­el­les Erschei­nungs­bild defi­nie­ren und als Lay­out abspei­chern. Die vor­ge­nom­me­nen Anpas­sun­gen kannst du in dem Pre­view-Fens­ter links neben den Ein­stel­lungs­op­tio­nen sehen (sie­he Screen­shot unten).

Das Plug­in bringt schon eini­ge vor­de­fi­nier­te Skins mit.

Cont­act Form 7 Skins: Ein­stel­lungs­be­reich mit Preview

Plug­in-Down­load: https://​de​.word​press​.org/​p​l​u​g​i​n​s​/​c​o​n​t​a​c​t​-​f​o​r​m​-​7​-​s​k​i​ns/

#2 Fla­min­go

Ein Nach­teil von Cont­act Form 7 ist sicher­lich die feh­len­de Archi­vie­rungs­mög­lich­keit der über das For­mu­lar ver­sen­de­ten Nach­rich­ten. Glück­li­cher­wei­se gibt es dafür Plug­ins, wie z. B. Flamingo.

Es erfasst unter dem neu­en Punkt “Fla­min­go” im Word­Press-Dash­board alle ein­ge­hen­den Mails. Außer­dem wer­den die Mail­adres­sen der Absen­der in einem eige­nen Bereich abgespeichert.

Fla­min­go: Über­sicht im Nachrichten-Eingang

Plug­in-Down­load: https://​de​.word​press​.org/​p​l​u​g​i​n​s​/​f​l​a​m​i​n​go/

#3 Image Captcha

Mit dem Image-Captcha-Plug­in für Cont­act Form 7 kannst du dei­nem Kon­takt­for­mu­lar ein SVG-Bild-Captcha hin­zu­fü­gen. Das Captcha ist DSGVO-kon­form und die Ein­bin­dung ver­lang­samt die Web­site nicht mit wei­te­ren Header-Anfragen.

Was ist ein Captcha?

Captcha ist eine Abkür­zung für „Com­plet­ly auto­ma­ted public turing test to tell com­pu­ters and humans apart”. Die Tech­nik unter­schei­det ziem­lich zuver­läs­sig zwi­schen Com­pu­ter und Mensch und wird als Spam­schutz u. a. in Kon­takt­for­mu­la­ren ein­ge­setzt. Die Ver­wen­dung eines Captchas soll ver­hin­dern, dass Spam­bots das glei­che For­mu­lar immer wie­der aus­fül­len und versenden.

Das Image Captcha wird mit­tels Short­code in den For­mu­lare­di­tor des Kon­takt­for­mu­lars ein­ge­bun­den: [cf7ic].

Damit das Captcha in Deutsch ange­zeigt wird, muss die Sprach­ein­stel­lung in Word­Press eben­falls auf Deutsch ste­hen (Ein­stel­lun­gen -> All­ge­mein — > Spra­che der Website).

Wer das Captcha im For­mu­lar aus­blen­den will, bis ein User es aus­füllt, kann es in einem Togg­le ver­ste­cken: [cf7ic “togg­le”]

Plug­in-Down­load: https://​de​.word​press​.org/​p​l​u​g​i​n​s​/​c​o​n​t​a​c​t​-​f​o​r​m​-​7​-​i​m​a​g​e​-​c​a​p​t​c​ha/

#4 Digi­ta­le Signa­tur für Cont­act Form 7 

Falls mit dem For­mu­lar Cont­act Form 7 ein ver­trags­ähn­li­ches Online-For­mu­lar erstellt wird, bei dem es wich­tig ist, dass der Ver­sen­der es unter­schrie­ben abschickt, kann man mit die­sem Plug­in ein Feld für eine digi­ta­le Signa­tur einbinden.

Nach der Plug­in-Akti­vie­rung fin­dest du im For­mu­lare­di­tor die Funk­ti­on „digital_​signature“. Wenn du dar­auf­klickst, öff­net sich der For­mu­lar-Tag-Gene­ra­tor, in dem du ver­schie­de­ne Ein­stel­lun­gen für das Ein­ga­be­feld für die Signa­tur vor­neh­men kannst:

• Du kannst das Feld zu einem Pflicht­feld machen (Requi­red field).
• Du kannst den Feld­na­men festlegen.
• Du kannst die Stift- bzw. Unter­schrift­far­be definieren.
• Du kannst die Hin­ter­grund­far­be des Ein­ga­be­fel­des auswählen.
• Du kannst die Höhe (height) und Brei­te (width) des Fel­des festlegen.
• CSS-Fort­ge­schrit­te­ne kön­nen auch noch ein ID Attri­but und ein Class Attri­but defi­nie­ren, für die Funk­tio­na­li­tät des Ein­ga­be­fel­des ist dies aber nicht notwendig.
• Über den But­ton „Insert Tag“ fügst du den Short­code in das For­mu­lar ein.

So sieht das Dia­log­feld aus:

Im For­mu­lar sieht das Ein­ga­be­feld für die digi­ta­le Signa­tur fol­gen­der­ma­ßen aus:

Ich habe mit der Maus unter­schrie­ben, was sehr unbe­hol­fen aussieht. 😊

Am bes­ten stellst du vor das Ein­ga­be­feld im For­mu­lar noch eine Erläu­te­rung, wie ich es in dem Bei­spiel getan habe, damit der User weiß, was genau er mit dem Feld machen muss.

Plug­in-Down­load: https://wordpress.org/plugins/digital-signature-for-contact-form‑7/

#5 WP Cont­act Slider

Mit dem WP Cont­act Slider kannst du ent­we­der auf allen Sei­ten dei­ner Web­prä­senz oder auf aus­ge­wähl­ten einen For­mu­lar-Slider ein­fü­gen. Das Slider­tab (klei­nes Bild rechts) ragt ent­we­der rechts oder links in die Web­site rein, klickst du dar­auf, schiebt sich das Kon­takt­for­mu­lar in den Bild­schirm rein.

In den Plug­in-Ein­stel­lun­gen hast du die Mög­lich­keit, die Far­ben der ver­schie­de­nen Slider­ele­men­te ein­zu­stel­len, den Slider auf mobi­len End­ge­rä­ten aus­zu­schal­ten und zu ent­schei­den, was in dem Slider ange­zeigt wer­den soll: Ein mit einem Plug­in erstell­tes Kon­takt­for­mu­lar (dann wird des­sen Short­code ein­ge­bun­den) oder von dir erstell­tes HTML.

Mit dem Plug­in kannst du unter­schied­li­che Cont­act Slider anle­gen und einbinden.

WP Cont­act Slider: Einstellungen

WP Cont­act Slider: So sieht das von mir erstell­te Slider­for­mu­lar aus

Plug­in-Down­load: https://​de​.word​press​.org/​p​l​u​g​i​n​s​/​w​p​-​c​o​n​t​a​c​t​-​s​l​i​d​er/

#6 Cont­act Form 7 Redirection

Die­ses Plug­in lie­fert nur eine klei­ne Funk­ti­on, die durch­aus sinn­voll und nütz­lich sein kann. Nach dem erfolg­rei­chen Absen­den eines Kon­takt­for­mu­lars lei­tet es den User zu einer von dir fest­ge­leg­ten Sei­te weiter.

Das kann eine inter­ne Sei­te sein, aber auch eine exter­ne URL ist mög­lich. Wer eine spe­zi­el­le Dan­ke- oder Info­sei­te für For­mu­lar­ab­sen­der ein­rich­ten will, fin­det mit dem Plug­in eine ein­fa­che Lösung.

Die Redi­rec­tion-Funk­ti­on wird mit einem neu­en Regis­ter­tab in die For­mu­la­rer­stel­lungs­sei­te ein­ge­bun­den (sie­he Screenshot).

Cont­act Form 7 Redi­rec­tion: Regis­ter­tab Redi­rect Settings

Plug­in-Down­load: https://​word​press​.org/​p​l​u​g​i​n​s​/​w​p​c​f​7​-​r​e​d​i​r​e​ct/

#7 Cont­act Form 7 – Pay­Pal & Stripe

Willst du in dein Kon­takt­for­mu­lar eine Zah­lungs­op­ti­on ein­fü­gen? Mit Cont­act Form 7 — Pay­Pal & Stri­pe kannst du sowohl Pay­Pal als auch Stri­pe ein­bin­den. Du benö­tigst sowohl einen eige­nen Pay­Pal- als auch einen eige­nen Stri­pe-Account, um die­se Zah­lungs­wei­sen nut­zen zu können.

Bevor du die Funk­ti­on ein­set­zen kannst, musst du die Ein­stel­lun­gen anpas­sen (Plug­in-Set­tings), d.h. die Spra­che und Wäh­rung wäh­len und für Pay­Pal dei­ne E‑Mailadresse eintragen.

Für Stri­pe benö­tigst du noch mehr Daten wie den publisha­ble und secret Key. Du fin­dest in dem Regis­ter­tab einen Link vor, wie du die­se Keys in dei­nem Stri­pe-Account findest.

Auf der For­mu­la­rer­stel­lungs­sei­te ist nun ein wei­te­rer Regis­ter­tab mit der Beschrif­tung Pay­Pal & Stri­pe hinzugekommen.

Es bie­tet sich an, ein Aus­wahl­me­nü mit bei­den Zah­lungs­wei­sen in das Kon­takt­for­mu­lar ein­zu­bin­den. Falls ja, musst du im Regis­ter­tab von Pay­Pal und Stri­pe ein Gate­way Code ein­ge­ben, wie z. B. menu-33, wenn du ein SELECT-MENU für ein Aus­wahl­me­nü generierst.

Cont­act Form 7 – Pay­Pal & Stri­pe: Regis­ter­tab. Fül­le auch die Item-Fel­der aus, die­se Daten (Pro­dukt­na­me, Preis) sieht der Bezah­len­de, wenn er zu Pay­Pal wei­ter­ge­lei­tet wird und den Zah­lungs­pro­zess durchführt.

Der in das Kon­takt­for­mu­lar ein­ge­bun­de­ne Code soll­te so aussehen:

[sel­ect menu-33 “Bezah­len mit PayPal|paypal” “Bezah­len mit Stripe|stripe”]

Willst du nur eine Zah­lungs­wei­se, bei­spiels­wei­se Pay­Pal, ange­ben, dann kannst du eine Check­box verwenden:

[check­box* check­box-654 “Mit Pay­Pal zahlen|paypal”]

Kon­takt­for­mu­lar mit PayPal-Checkbox

Ich habe die Funk­ti­on getes­tet und es klappt wirk­lich: Ich bin zu Pay­Pal wei­ter­ge­lei­tet wor­den, nach­dem ich das For­mu­lar ver­schickt hatte.

Plug­in-Down­load: https://​de​.word​press​.org/​p​l​u​g​i​n​s​/​c​o​n​t​a​c​t​-​f​o​r​m​-​7​-​p​a​y​p​a​l​-​a​d​d​-​on/

#8 Cont­act Form 7 Data­ba­se Addon – CFDB7

Eine Alter­na­ti­ve zu Fla­min­go ist das Plug­in Cont­act Form 7 Data­ba­se Addon. Es spei­chert auch alle über ein oder meh­re­re Kon­takt­for­mu­la­re ein­ge­gan­ge­nen Mails im Word­Press-Dash­board ab.

CFDB7: Der Zäh­ler zeigt an, dass über das Kon­takt­for­mu­lar 1 eine Nach­richt ein­ge­gan­gen ist. Wenn du auf die Zahl klickst, wird dir die ein­ge­gan­ge­ne Mail in einer Über­sicht ange­zeigt. Du kannst sie mit einem Klick auf Name, Email, Sub­ject oder Date öff­nen und lesen.

Plug­in-Down­load: https://​word​press​.org/​p​l​u​g​i​n​s​/​c​o​n​t​a​c​t​-​f​o​r​m​-​c​f​d​b7/

#9 Con­di­tio­nal Fields for Cont­act Form 7

Das Con­di­tio­nal Fields Plug­in erlaubt kom­ple­xe­re For­mu­lar­ab­fra­gen. So ist es damit mög­lich, ver­schie­de­ne For­mu­lar­fel­der anzu­zei­gen, wenn der User eine bestimm­te Aus­wahl getrof­fen hat.

Wird bei­spiels­wei­se ein Aus­wahl­feld mit einer Lis­te von Betriebs­sys­te­men dar­ge­stellt, wird bei der Wahl von “Ande­res Betriebs­sys­tem” ein zusätz­li­ches Text­feld ein­ge­blen­det, in das der Nut­zer sein Betriebs­sys­tem ein­tra­gen kann.

Nach der Plug­in-Instal­la­ti­on fin­dest du im Kon­takt­for­mu­lar-Erstel­lungs­be­reich ein neu­es Regis­ter­tab mit der Bezeich­nung “Con­di­tio­nal Fields” vor. Dort kannst du die Bedin­gun­gen defi­nie­ren, die als Grup­pen anzu­le­gen sind.

Um eine Grup­pe anzu­le­gen, in der sich die Fel­der befin­den sol­len, klickst du auf “Con­di­tio­nal fields Group”, wo du den Namen der Grup­pe ein­gibst. Über Tag ein­fü­gen wird der Code in das For­mu­lar über­nom­men (sie­he Bild unten). Du kannst meh­re­re Grup­pen inein­an­der verschachteln.

In die Grup­pen trägst du dann die Beschrif­tun­gen (fieldset) und For­mu­lar­fel­der ein. Ich habe ein Tuto­ri­al­bei­spiel aus dem Inter­net über­nom­men. Hier der Code:

Dann müs­sen unter dem Regis­ter­tab “Con­di­tio­nal fields” die Bedin­gun­gen for­mu­liert wer­den, die so aussehen:

Wenn das For­mu­lar in die Sei­te ein­ge­fügt wird, sieht das gan­ze fol­gen­der­ma­ßen aus:

Wählst du im Aus­wahl­feld Basic fields aus, dann wer­den die Basic Fields mit Name und Mail­adres­se eingeblendet.

Wählst du Advan­ced fields aus, dann wer­den die Advan­ced fields mit den Fel­dern Betriebs­sys­tem und Wei­te­res angezeigt.

In den Advan­ced fields befin­det sich eine Unter­grup­pe namens group other, die ein wei­te­res Text­feld anzeigt, wenn im Aus­wahl­me­nü Betriebs­sys­tem Other gewählt wird.

Am Anfang scheint die Umset­zung von sol­chen Bedin­gun­gen bzw. Regeln recht kom­plex, doch eine inten­si­ve Beschäf­ti­gung bringt den Durchblick. :-)

Plug­in-Down­load: https://​de​.word​press​.org/​p​l​u​g​i​n​s​/​c​f​7​-​c​o​n​d​i​t​i​o​n​a​l​-​f​i​e​l​ds/

#10 Cont­act Form 7 Mul­ti-Step Forms

Umfang­rei­che For­mu­la­re, die über meh­re­re Sei­ten gehen, las­sen sich mit Cont­act Form 7 Mul­ti-Steps Form rea­li­sie­ren. Nach der Plug­in-Instal­la­ti­on fin­dest du im Kon­takt­for­mu­lar-Erstel­lungs­be­reich neue Fel­der wie mul­tistep, form­field und pre­vious vor.

Für jede For­mu­lar­sei­te ist es not­wen­dig, eine neue Inhalts­sei­te anzu­le­gen. Deren URLs benö­tigst du, um die ein­zel­nen For­mu­lar­sei­ten bei der Gene­rie­rung des mul­tistep-Tags ein­zu­tra­gen (sie­he Bild).

Für den letz­ten Schritt (im Bei­spiel wäre das Schritt 3) brauchst du kei­ne URL ein­zu­tra­gen. Um einen Wei­ter-But­ton am Ende einer jeden For­mu­lar­sei­te ein­zu­bin­den, kannst du den Sub­mit-But­ton ver­wen­den und die Beschrif­tung dem­entspre­chend anpassen.

Mit dem pre­vious-Tag kannst du einen Zurück-But­ton in dei­ne mehr­sei­ti­gen For­mu­la­re ein­bin­den. Er lei­tet dann auf die vor­her­ge­hen­de For­mu­lar­sei­te zurück.

Der Code soll­te so auf­ge­baut sein:

Zuerst kommt der Wei­ter-But­ton, dann der mul­tistep-Tag mit der Seiten-URL.

Es gibt für die­ses Plug­in noch das mul­ti­form-Tag, mit dem du die von dem User ein­ge­ge­be­nen Daten auf der letz­ten For­mu­lar­sei­te noch­mals zusam­men­fas­sen kannst. So sieht der User, was er alles ein­ge­tra­gen hat.

Der Tag wird so geschrie­ben: [mul­ti­form “feld­na­me”].

Cont­act Form 7 Mul­ti-Step Forms: Die For­mu­lar-Dar­stel­lung von oben genann­tem Code

Plug­in-Down­load: https://​de​.word​press​.org/​p​l​u​g​i​n​s​/​c​o​n​t​a​c​t​-​f​o​r​m​-​7​-​m​u​l​t​i​-​s​t​e​p​-​m​o​d​u​le/

#11 Wow Style Cont­act Form 7

Mit dem Plug­in Wow Cont­act Form 7 las­sen sich ein­fa­che Kon­takt­for­mu­la­re ohne CSS-Kennt­nis­se anspre­chend gestal­ten, so zum Bei­spiel mit Hin­ter­grund­gra­fik, semi­trans­pa­ren­ten Ein­ga­be­fel­dern, Rah­men, Schat­ten und eini­ges mehr.

Das Plug­in gibt es sowohl kos­ten­los als auch kos­ten­pflich­tig: Mit der Gra­tis-Ver­si­on kannst du nur ein For­mu­lar gestal­ten, mit der Pre­mi­um-Ver­si­on so vie­le du willst.

Nach der Plug­in-Instal­la­ti­on fin­dest du das Plug­in im Bereich For­mu­la­re mit einem neu­en Navi­ga­ti­ons­punkt: CF7 Sty­ler

Anpas­sun­gen zu bestimm­ten For­mu­lar­be­rei­chen kannst du in fol­gen­den Tabs vornehmen:

• For­mu­lar­text, Links und Labels
• For­mu­lar­hin­ter­grund und ‑far­be
• For­mu­lar­ab­stän­de, Rah­men und Schatten
• Ein­ga­be­fel­der
• Check­bo­xen und Radiobuttons
• But­tons
• Benut­zer­de­fi­nier­tes CSS

Bild: Plug­in-Bear­bei­tungs­flä­che 

In der Mit­te des Bild­schirms wird dir das zu bear­bei­ten­de Kon­takt­for­mu­lar ange­zeigt. Über einen ver­ti­ka­len Schie­ber kannst dir die Vor­her-Nach­her-Dar­stel­lung anschauen.

Bild: Bei­spiel für ein mit WOW Style CF7 umge­stal­te­tes Formular

Plug­in-Down­load zur kos­ten­lo­sen Ver­si­on: https://​word​press​.org/​p​l​u​g​i​n​s​/​c​f​7​-​s​t​y​l​er/

Den Upgrade-Link fin­dest du in dem Plug­in­be­reich (sie­he 1. Bild). Bei monat­li­cher Bezah­lung kos­tet das Plug­in 2,99 $, bei jähr­li­cher Bezah­lung 2,42 $.

Hin­weis: Beach­te die DSGVO

Wenn du Cont­act Form 7 sowie des­sen Erwei­te­run­gen auf dei­nem Blog ein­setzt, den­ke dar­an, dass du die DSGVO-Regeln berücksichtigst.

Denn die User ver­sen­den über das For­mu­lar per­sön­li­che Daten wie E‑Mail-Adres­se, Namen etc.

Des­halb soll­test du die Kom­pa­ti­bi­li­tät dei­ner Plug­ins mit dei­ner Daten­schutz­er­klä­rung über­prü­fen, vor allem wenn über das For­mu­lar Zah­lun­gen via Pay­Pal oder Stri­pe erfol­gen oder wenn die Kon­takt­da­ten in einer Daten­bank abge­spei­chert werden.

Zusam­men­fas­sung

Neben die­sen 10 vor­ge­stell­ten Plug­in-Erwei­te­run­gen für das Kon­takt­for­mu­lar Cont­act Form 7 gibt es noch eini­ge mehr. Ich habe die (aus mei­ner Sicht) bes­ten aus­ge­wählt, was durch­aus eine sub­jek­ti­ve Ent­schei­dung war.

Bit­te nicht ver­ges­sen: Alle hier auf­ge­führ­ten Plug­ins funk­tio­nie­ren nur, wenn auch das Plug­in Cont­act Form 7 instal­liert ist.