Fast alle geschäft­li­chen Web­sites und Blogs ver­fü­gen über ein Kon­takt­for­mu­lar. Das belieb­tes­te Wor­d­Press-Plugin für die Erstel­lung von Kon­takt­for­mu­la­ren ist Con­ta­ct 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 Con­ta­ct Form 7 benö­tigt, fin­det zahl­rei­che Erwei­te­rungs­plugins, von denen ich in die­sem Bei­trag 10 nütz­li­che vor­stel­le.

#1 Contact Form 7 Skins

Mit die­sem Skin-Plugin für Con­ta­ct 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 Plugin bringt schon eini­ge vor­de­fi­nier­te Skins mit.

Contact Form 7 Skins

Con­ta­ct Form 7 Skins: Ein­stel­lungs­be­reich mit Pre­view

Plugin-Down­load: https://​de​.wor​d​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 Con­ta­ct 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 Plugins, wie z. B. Fla­min­go.

Es erfasst unter dem neu­en Punkt “Fla­min­go” im Wor­d­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 abge­spei­chert.

Flamingo Plugin

Fla­min­go: Über­sicht im Nach­rich­ten-Ein­gang

Plugin-Down­load: https://​de​.wor​d​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 Con­ta­ct Form 7 erstell­ten For­mu­la­re alle wie Klo­ne aus. Das Plugin Mate­ri­al Design for Con­ta­ct 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 Plugin 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.

Material Design for Contact Form 7

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 kau­fen.

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

#4 Contact Form 7 Live Preview

Was Con­ta­ct 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 Con­ta­ct Form 7 hin­zu.

Lesen  PayPal-Button in Blog oder Website einbinden - Tutorial

Unter­halb des For­mu­lar­codes wird der Pre­view-Bereich ein­ge­blen­det.

CF7-LivePreview

Con­ta­ct 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.

Plugin-Down­load: https://​wor​d​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

WP Contact SliderMit dem WP Con­ta­ct Sli­der 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-Sli­der ein­fü­gen. Das Sli­dert­ab (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 Plugin-Ein­stel­lun­gen hast du die Mög­lich­keit, die Far­ben der ver­schie­de­nen Sli­der­ele­men­te ein­zu­stel­len, den Sli­der auf mobi­len End­ge­rä­ten aus­zu­schal­ten und zu ent­schei­den, was in dem Sli­der ange­zeigt wer­den soll: Ein mit einem Plugin 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 Plugin kannst du unter­schied­li­che Con­ta­ct Sli­der anle­gen und ein­bin­den.

WP Contact Slider: Einstellungen

WP Con­ta­ct Sli­der: Ein­stel­lun­gen

WP Contact Slider: Formular

WP Con­ta­ct Sli­der: So sieht das von mir erstell­te Sli­der­for­mu­lar aus

Plugin-Down­load: https://​de​.wor​d​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 Plugin 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 wei­ter.

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­larab­sen­der ein­rich­ten will, fin­det mit dem Plugin eine ein­fa­che Lösung.

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

Contact-Form7-Redirection

Con­ta­ct Form 7 Redi­rec­tion: Regis­tertab Redi­rect Set­tings

Plugin-Down­load: https://​wor​d​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 Con­ta­ct Form 7 — PayPal & Stri­pe kannst du sowohl PayPal als auch Stri­pe ein­bin­den. Du benö­tigst sowohl einen eige­nen PayPal- als auch einen eige­nen Stri­pe-Account, um die­se Zah­lungs­wei­sen nut­zen zu kön­nen.

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

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

Auf der For­mu­la­rer­stel­lungs­sei­te ist nun ein wei­te­rer Regis­tertab mit der Beschrif­tung PayPal & Stri­pe hin­zu­ge­kom­men.

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­tertab von PayPal 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ü gene­rierst.

Contact Form 7 – PayPal & Stripe

Con­ta­ct Form 7 – PayPal & Stri­pe: Regis­tertab. 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 PayPal wei­ter­ge­lei­tet wird und den Zah­lungs­pro­zess durch­führt.

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

Lesen  Plugin WooCommerce Germanized: Den Online-Shop rechtssicher machen

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

Willst du nur eine Zah­lungs­wei­se, bei­spiels­wei­se PayPal, ange­ben, dann kannst du eine Check­box ver­wen­den:

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

Contact Form 7 – PayPal & Stripe

Kon­takt­for­mu­lar mit PayPal-Check­box

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

Plugin-Down­load: https://​de​.wor​d​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 Plugin Con­ta­ct 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 Wor­d­Press-Dash­board ab.

Contact Form 7 Database Addon – CFDB7

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.

Plugin-Down­load: https://​wor​d​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 Fiel­ds Plugin 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 Plugin-Instal­la­ti­on fin­dest du im Kon­takt­for­mu­lar-Erstel­lungs­be­reich ein neu­es Regis­tertab mit der Bezeich­nung “Con­di­tio­nal Fiel­ds” 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 fiel­ds 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 ver­schach­teln.

Conditional Fields for Contact Form 7

In die Grup­pen trägst du dann die Beschrif­tun­gen (fiel­dset) 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:

Conditional Fields for Contact Form 7

Dann müs­sen unter dem Regis­tertab “Con­di­tio­nal fiel­ds” die Bedin­gun­gen for­mu­liert wer­den, die so aus­se­hen:
Conditional Fields for Contact Form 7

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 fiel­ds aus, dann wer­den die Basic Fiel­ds mit Name und Mail­adres­se ein­ge­blen­det.

Conditional Fields for Contact Form 7

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

Conditional Fields for Contact Form 7

In den Advan­ced fiel­ds 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.

Conditional Fields for Contact Form 7

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 Durch­blick. :-)

Plugin-Down­load: https://​de​.wor​d​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 Con­ta­ct Form 7 Mul­ti-Steps Form rea­li­sie­ren. Nach der Plugin-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.

Lesen  Affiliate Coupons Plugin: Attraktive Affiliate-Coupons für deine WordPress-Seite

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

Contact Form 7 Multi-Step Forms

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 anpas­sen.

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:

Contact Form 7 Multi-Step Forms

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

Es gibt für die­ses Plugin 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”].

Contact Form 7 Multi-Step Forms

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

Plugin-Down­load: https://​de​.wor​d​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 Plugin Wow Con­ta­ct 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 Plugin 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 Plugin-Instal­la­ti­on fin­dest du das Plugin 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 vor­neh­men:

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

WOW-Style-CF7-Screen

Bild: Plugin-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 anschau­en.

Beispielformular-WOW-Styler-CF7

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

Plugin-Down­load zur kos­ten­lo­sen Ver­si­on: https://​wor​d​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 Plugin 2,99 $, bei jähr­li­cher Bezah­lung 2,42 $.

Zusammenfassung

Neben die­sen 10 vor­ge­stell­ten Plugin-Erwei­te­run­gen für das Kon­takt­for­mu­lar Con­ta­ct 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 Plugins funk­tio­nie­ren nur, wenn auch das Plugin Con­ta­ct Form 7 instal­liert ist.