10+ nützliche Funktionserweiterungen für das Plugin Contact 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 Contact 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 Flamingo

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 Material Design for Contact Form 7

Feh­len dir Ani­ma­ti­ons­ef­fek­te in dei­nem For­mu­lar? Schließ­lich sehen die mit Cont­act Form 7 erstell­ten For­mu­la­re alle wie Klo­ne aus. Das Plug­in Mate­ri­al Design for Cont­act Form 7 ver­leiht dem For­mu­lar ein von Goog­le inspi­rier­tes Mate­ri­al Design.

Wenn du in die Input-Fel­der klickst, wan­dert die Beschrif­tung nach oben, ver­klei­nert sich und macht Platz für den Ein­trag. Die Umwand­lung geht ganz schnell: Ist das Plug­in instal­liert, tauschst du den Stan­dard­code des For­mu­lars gegen den neu­en aus, den du in der rech­ten Spal­te vor­fin­dest. Schon hat das For­mu­lar einen neu­en Look.

Neu­er Look fürs Kon­takt­for­mu­lar mit Mate­ri­al Design

Wie ich beim Test gese­hen habe, las­sen sich mit der kos­ten­lo­sen Ver­si­on nur Input, Text­area und Sub­mit umge­stal­ten, für Check­bo­xen und Radio But­tons muss man die kos­ten­pflich­ti­ge Plug­in­ver­si­on kaufen.

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

#4 Contact Form 7 Live Preview

Was Cont­act Form 7 eben­falls ver­mis­sen lässt, ist eine schnel­le Vor­schau des erstell­ten For­mu­lars, gera­de wenn es etwas län­ger und kom­ple­xer ist. Mit dem Live-Pre­view kommt die­ses Fea­ture in den Erstel­lungs­be­reich von Cont­act Form 7 hinzu.

Unter­halb des For­mu­lar­codes wird der Pre­view-Bereich eingeblendet.

Cont­act Form 7 Live Pre­view: Erleich­tert die For­mu­lar-Erstel­lung immens, wenn man gleich weiß, wie es auf der Web­site aus­se­hen wird.

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

#5 WP Contact 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 Contact 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 Contact Form 7 – PayPal & 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 Contact Form 7 Database 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 Conditional Fields for Contact 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 Contact Form 7 Multi-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 Contact 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 $.

Hinweis: Beachte 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.

Zusammenfassung

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.