Plugin-Vorstellung: Kontaktformulare erstellen mit Contact Form 7

Ein sehr belieb­tes Wor­d­Press-Plugin für die Erstel­lung von Online-Kon­takt­for­mu­la­ren ist Con­ta­ct Form 7.

Natür­lich ist es nicht das ein­zi­ge Plugin, um Kon­takt­for­mu­la­re zu erstel­len, aber es ist wohl eines der meist ver­wen­de­ten für die­sen Bereich. Auch ich set­ze es auf mei­nen ver­schie­de­nen Blogs ein.

Wie Sie mit Con­ta­ct Form 7 ein For­mu­lar erstel­len kön­nen, zei­ge ich Ihnen in die­sem Beitrag.

Download und Installation von Contact Form 7

Das Plugin kön­nen Sie unter die­sem Link her­un­ter­la­den und auf die übli­che Art und Wei­se instal­lie­ren. Die ein­fachs­te Art, ein Plugin in Ihre Wor­d­Press-Instal­la­ti­on hoch­zu­la­den und zu akti­vie­ren, geht folgendermaßen:


WERBUNG

Preis­wer­tes SEO-Tool für Blog­ger noch günstiger
SERPBOT PRO dau­er­haft 20 Pro­zent güns­ti­ger – 1. Monat 80 Pro­zent Rabatt
Nut­ze dafür die­sen Gut­schein­code: erfolg-durch-serpbot
Regis­trie­rungs­link: SERPBOT PRO*


Sie gehen im Wor­d­Press-Dash­board in den Bereich Plugins und kli­cken dort auf den Link „Instal­lie­ren“. Auf der nächs­ten Sei­te kli­cken Sie auf den Link „Hoch­la­den“, suchen auf Ihrer Fest­plat­te nach der .zip-Datei des her­un­ter­ge­la­de­nen Plugins und kli­cken dann auf „Instal­lie­ren“. Das Plugin wird anschlie­ßend zu Ihren wei­te­ren Plugins hin­zu­ge­fügt und aktiviert.

Sie kön­nen das Plugin auch über die Plug­in­su­che instal­lie­ren, falls Sie die Plugin-Datei­en nicht her­un­ter­ge­la­den haben. Sie kli­cken unter Plugins instal­lie­ren auf „Suchen“, geben die Plugin-Bezeich­nung „Con­ta­ct Form 7“ in das Feld ein und kli­cken dann auf Plugins suchen.

Schon der ers­te Tref­fer müss­te das ent­spre­chen­de Plugin sein. Unter der Plug­in­be­zeich­nung fin­den Sie den Jetzt-instal­lie­ren-Link, wor­über das Plugin in Ihre Wor­d­Press-Instal­la­ti­on hin­zu­ge­fügt wird.

Sie fin­den anschlie­ßend in der lin­ken Sei­ten­leis­te im Wor­d­Press-Dash­board den Menü­punkt For­mu­lar. Hier­über kön­nen Sie For­mu­la­re erstel­len und abspeichern.

Standardformular von Contact Form 7

Das Plugin bringt stan­dard­mä­ßig schon ein ein­fa­ches Kon­takt­for­mu­lar mit, sodass Sie — falls Sie kei­ne grö­ße­ren Ansprü­che an das For­mu­lar haben — schnell eins in Ihren Blog ein­fü­gen kön­nen, näm­lich das schon existierende.

Standardformular von Contact Form 7

Stan­dard­for­mu­lar von Con­ta­ct Form 7

Das Stan­dard­for­mu­lar hat fünf Fel­der, und zwar eins für den Namen des Absen­ders, die E‑Mail-Adres­se, den Betreff und ein Nach­rich­ten­feld für die eigent­li­che Mit­tei­lung plus den Absen­de­but­ton (der auch als For­mu­lar­feld ange­se­hen wird).

Drei der fünf Fel­der sind als Pflicht­fel­der defi­niert, d. h. sie müs­sen vom Absen­der aus­ge­füllt werden.

Wenn Sie auf „For­mu­lar“ in der lin­ken Sei­ten­leis­te des Wor­d­Press-Dash­boards kli­cken, kom­men Sie in die For­mu­lar­über­sicht. Dort soll­te das Stan­dard­for­mu­lar auf­ge­führt sein. Spä­ter sehen Sie hier alle von Ihnen ange­leg­ten Formulare.

Kontaktformular erstellen mit Contact Form 7

Kli­cken Sie auf Kon­takt­for­mu­lar 1, kom­men Sie in die Bear­bei­tungs­an­sicht. Dort fin­den Sie ver­schie­de­ne Berei­che vor:

  • Ganz oben auf der Sei­te steht der Short­code, mit dem Sie das For­mu­lar in eine sta­ti­sche Sei­te oder einen Arti­kel ein­fü­gen. Er sieht so aus: (con­ta­ct-for­m‑7 id=“94” title=“Kontaktformular 1”), (ich habe run­de statt kor­rek­te ecki­ge Klam­mern in das Bei­spiel gesetzt, sonst fügt mir Wor­d­Press hier ein For­mu­lar ein :-))
  • dann fol­gen der For­mu­lar- und der Tag­be­reich: Links fin­den Sie die For­mu­lar­fel­der, aus dem sich das aktu­el­le For­mu­lar zusam­men­setzt, rechts kön­nen Sie über Tag gene­rie­ren wei­te­re Fel­der anlegen,
  • dar­un­ter steht der Mail­be­reich, in den Sie wich­ti­ge Anga­ben für den Emp­fän­ger der Mail ein­tra­gen, und der Mail­text, der sich aus den ein­zel­nen Fel­der­va­ria­blen zusammensetzt
  • und dar­un­ter schließt sich der Mel­dun­gen-Bereich an. Auch die­se Mel­dun­gen kön­nen Sie nach Ihren Vor­stel­lun­gen oder Bedürf­nis­sen abwan­deln. Die Mel­dun­gen wer­den bei bestimm­ten Ereig­nis­sen, wie bei­spiels­wei­se beim Absen­den des For­mu­lars oder bei Nicht­aus­fül­len von Pflicht­fel­dern usw. angezeigt.

Wenn Sie das Stan­dard­for­mu­lar ver­wen­den wol­len, brau­chen Sie im Grun­de genom­men kei­ne Ände­run­gen mehr vorzunehmen.

Kontaktformular erstellen mit Contact Form 7

Unter Mail steht sogar schon eine Emp­fän­ger-E-Mail-Adres­se, die das Plugin von den all­ge­mei­nen Wor­d­Press-Ein­stel­lun­gen ent­nom­men hat. Denn bei der Wor­d­Press-Instal­la­ti­on muss man ja eine E‑Mail-Adres­se ein­tra­gen. Wol­len Sie an die­se Mail die abge­sen­de­ten For­mu­la­re bekom­men, dann kön­nen Sie die Adres­se so belas­sen, oder Sie tra­gen eine ande­re E‑Mail-Adres­se ein, falls Sie eine ande­re Emp­fän­ger-E-Mail-Adres­se geplant haben.

Sie müs­sen nur noch den Short­code des For­mu­lars in eine Sei­te ein­fü­gen, übli­cher­wei­se in eine sta­ti­sche Sei­te, die man am bes­ten mit Kon­takt benennt. Sie kön­nen für das Short­code-Ein­fü­gen im visu­el­len Modus des Edi­tors bleiben.

Wei­te­rer Text lässt sich vor und hin­ter den Short­code in die Sei­te einbauen.

Aber wer ein ande­res For­mu­lar möch­te mit wei­te­ren Fel­dern, der kann dies auch mit dem Plugin umset­zen. Außer­dem kön­nen Sie vie­le For­mu­la­re in Ihren Blog mit­hil­fe des Plugins einbauen.

Ein neues Kontaktformular mit Contact Form 7 erstellen

Um ein neu­es Kon­takt­for­mu­lar anzu­le­gen, kli­cken Sie unter For­mu­lar auf Neu­es For­mu­lar. Dann kli­cken Sie in dem klei­nen Fens­ter wie­der auf Neu­es For­mu­lar, wenn Sie die Stan­dard­spra­che Deutsch ver­wen­den, oder wäh­len erst die ent­spre­chen­de Spra­che aus und kli­cken erst dann auf Neu­es For­mu­lar.

Das neue For­mu­lar ent­hält nun am Anfang die glei­chen Fel­der wie das Stan­dard­for­mu­lar. Ganz oben fin­den Sie in dem gro­ßen Feld „Ohne Titel“. Hier soll­ten Sie dem neu­en Kon­takt­for­mu­lar einen aus­sa­ge­kräf­ti­gen Namen geben.

Um Ihrem For­mu­lar ein neu­es Feld hin­zu­zu­fü­gen, kli­cken Sie unter Tag gene­rie­ren auf den Pfeil. Dann wer­den Ihnen alle mög­li­chen For­mu­lar­ele­men­te, die Sie ein­bau­en kön­nen, angezeigt.

Die ers­ten drei For­mu­lar­fel­der Text, E‑Mail und Text­be­reich ken­nen Sie bereits, denn die­se kom­men im Stan­dard­for­mu­lar schon vor, Text für den Namen und Betreff, E‑Mail für die E‑Mail-Adres­se und Text­be­reich für das Mit­tei­lungs­feld. Und auch der Sen­den-But­ton am Ende der Lis­te ist bekannt.

Was gibt es noch an Formularfeldern?

Aus­wahl­me­nü:

Mit dem Aus­wahl­me­nü stel­len Sie dem For­mu­lar­nut­zer eine klei­ne Aus­wahl­lis­te zur Ver­fü­gung. Sie kön­nen ent­schei­den, ob eine Mehr­fach­aus­wahl an Lis­ten­punk­ten mög­lich ist oder nicht. Sie kön­nen wei­ter­hin fest­le­gen, ob das Feld ein Pflicht­feld sein soll und ob in dem Aus­wahl­me­nü als ers­ter Punkt eine lee­re Zei­le ange­zeigt wird.

Die Menü­punk­te schrei­ben Sie in das Feld Aus­wahl­mög­lich­kei­ten unter­ein­an­der, einen Lis­ten­punkt in eine Zei­le (sie­he Bild unten).

Kontaktformular erstellen mit Contact Form 7

Danach kli­cken Sie auf den Short­code, sodass die­ser aktua­li­siert wird. Die­sen fügen Sie dann links im Feld For­mu­lar an die ent­spre­chen­de Stelle.

Das neue Feld muss noch in den Nach­rich­ten­text ein­ge­fügt wer­den, damit die Anga­ben auch an den E‑Mail-Emp­fän­ger über­mit­telt werden.

Die Fel­der id und class sind optio­nal und kön­nen leer bleiben.

Sie soll­ten auch jedes For­mu­lar­feld in Ihrem Kon­takt­for­mu­lar ent­spre­chend beschrif­ten. Dazu erstel­len Sie ober­halb des ein­ge­füg­ten For­mu­lar­tags eine Bezeich­nung, die Sie mit einem <p>-Tag begin­nen und mit einem <br />-Tag enden. Den schlie­ßen­den </p>-Tag set­zen Sie an das Ende des gene­rier­ten Formular-Tags.

An den Stan­dard­for­mu­lar­fel­dern, die im schon vor­han­de­nen Kon­takt­for­mu­lar von Con­ta­ct Form 7 ein­ge­fügt sind, sehen Sie genau, wie die­ser Schritt durch­ge­führt wird.

Eine Alter­na­ti­ve zum Aus­wahl­me­nü sind die Aus­wahl­bo­xen mit den recht­ecki­gen Check­bo­xen (sie­he Bild unten).

Radio But­ton

Das sind run­de Check­bo­xen, die eine Mehr­fach­aus­wahl nicht ermög­li­chen. Sie kön­nen also den Nut­zer immer nur eine Opti­on aus­wäh­len lassen.

Zustim­mung

Sie kön­nen auch ein Zustim­mungs­käst­chen ein­fü­gen, das der User set­zen muss, um bei­spiels­wei­se die AGB zu akzeptieren.

Quiz

Sie kön­nen sogar Quiz­fra­gen mit dem Plugin erstel­len. Dazu fügen Sie in das Feld Quiz zuerst die Fra­ge ein, set­zen danach einen senk­rech­ten Strich dahin­ter und tra­gen dann die Ant­wort ein (Bei­spiel: Wie viel ist 10 x 20?|200). Im For­mu­lar wird dann neben der Quiz­fra­ge ein Text­feld ein­ge­fügt, wo der User die Ant­wort ein­tra­gen kann.

Cap­t­cha

Für das Ein­fü­gen eines Cap­t­chas (will­kür­li­che Zah­len-Buch­sta­ben-Kom­bi­na­ti­on, die vom User in ein Feld ein­ge­ge­ben wer­den muss) benö­ti­gen Sie ein zusätz­li­ches Plugin (Real­ly Simp­le Cap­t­cha), um die Funk­tio­na­li­tät in Con­ta­ct Form 7 rich­tig nut­zen zu können.

Datei-Upload

Und auch ein Datei-Anhang (bzw. meh­re­re) kann mit dem Plugin in ein For­mu­lar ein­ge­baut wer­den. Sie kön­nen noch die akzep­tier­ten Datei­ty­pen und die maxi­ma­le Datei­grö­ße für den Upload fest­le­gen. Außer­dem müs­sen Sie den gene­rier­ten For­mu­lar­feld-Code in das Datei-Anhang-Feld ein­fü­gen und nicht in den Nach­rich­ten­text wie die ande­ren Felder.

Auf dem Bild unten sehen Sie noch­mals die hier vor­ge­stell­ten For­mu­lar­fel­der (außer das Captcha):

Kontaktformular erstellen mit Contact Form 7

Haben Sie Ihr Kon­takt­for­mu­lar erstellt, dann set­zen Sie den Short­code in die ent­spre­chen­de Sei­te oder in einen Blog­ar­ti­kel und tes­ten Sie das For­mu­lar, ob es auch rich­tig funktioniert.

Manch­mal ver­gisst man die Tags in den Nach­rich­ten­text ein­zu­bin­den und dann wer­den aus­ge­füll­te Fel­der nicht über­mit­telt oder man hat ver­ges­sen, den Datei-Upload-Tag in das rich­ti­ge Feld ein­zu­fü­gen, sodass man den Datei-Anhang in der ver­sen­de­ten Test­mail nicht erhält.

Außer­dem soll­ten Sie nichts an der Syn­tax der ein­zel­nen Tags ver­än­dern, denn dies führt auch zu Funktionsausfällen.

Und den­ken Sie dar­an, alle Ände­run­gen an dem Kon­takt­for­mu­lar abzu­spei­chern. Das ver­gisst man ab und zu auch.

Fazit

Wie Sie sehen, lässt sich mit dem Plugin Con­ta­ct Form 7 mehr als nur ein klas­si­sches Kon­takt­for­mu­lar erstel­len. Ich fin­de das Ein­fü­gen von neu­en Fel­der sehr intui­tiv und ein­fach, dass es wirk­lich sehr schnell von stat­ten geht, ein etwas grö­ße­res For­mu­lar zu erstel­len und in sei­nen Blog einzubinden.

Weitere Formular-Plugins für WordPress


WERBUNG

Real Coo­kie Ban­ner 20 Pro­zent günstiger

Bist du auf der Suche nach einem ein­fach zu bedie­nen­den Coo­kie-Ban­ner-Plugin? Und über DSGVO- und ePri­va­cy Richt­li­nie kon­for­me Ein­wil­li­gungs­mög­lich­kei­ten soll­te es auch verfügen?

Dann ist Real Coo­kie Ban­ner genau das rich­ti­ge Plugin. Ich set­ze es eben­falls auf mei­nem Blog hier ein und fin­de die Fea­tures mehr als gelungen.

Die Sin­gle-Lizenz kos­tet 49 Euro pro Jahr. Gib beim Plugin-Kauf den Code „GELDONLINEBLOG“ ein und du erhältst Real Coo­kie Ban­ner für nur 39,20 Euro.

Real Coo­kie Ban­ner kaufen*



8 Gedanken zu „Plugin-Vorstellung: Kontaktformulare erstellen mit Contact Form 7“

  1. Hal­lo Admin. Beim goo­geln bin ich auf die­sen Arti­kel gestos­sen da beim erstel­len eines con­ta­ct form 7 For­mu­lars das Aus­wahl­me­nü im End­be­reich nicht ange­zeigt wird.
    Die Aus­wahl ist zwar vor­han­den. wird aber nicht ange­zeigt und über­nom­men. Getes­tet mit Safa­ri und FF. Ist mein Plugin beschä­digt oder wor­an kanns liegen.
    Tag sieht so aus:
    Anrei­se Tag(erforderlich)
    [select* menu-261 “1” “2” “3” “4” “5”]
    Viel­leicht kannst Du mir hel­fen? Jens

  2. @Jens Sp.: Der Short­code [select* menu-261 “1” “2” “3” “4” “5”] ist soweit kor­rekt und müss­te auch im For­mu­lar ange­zeigt werden.

    Damit der Wert auch im For­mu­lar beim Ver­sen­den ange­nom­men wird, muss er auch im Bereich Nach­rich­ten­text ein­ge­fügt wer­den, und zwar so: Anrei­se Tag: [menu-261]

  3. Span­nend .. danke … 

    Kann man das auch so ein­stel­len, dass jemand nach dem Aus­fül­len des Kon­takt­for­mu­lar eine Datei run­ter­la­sen kann ? 

    Grü­ße
    Bernhard

  4. @Bernhard
    Ja, das geht. Dafür muss man einen Autore­spon­der auf der Regis­ter­kar­te E‑Mail ein­rich­ten. Der Bereich fin­det sich ganz unten bei E‑Mail (2). Über die auto­ma­ti­sche Ant­wort-E-Mail kann man auch einen Datei­an­hang versenden.

  5. Guten Tag,
    ich habe eine Web­site im Ent­wurf erstellt (www2​.ak​-dmaw​.de, WP The­me: Ceno­te) und hier­in ein For­mu­lar (unter Aktu­el­les, ers­ter Bei­trag). Die­ses ver­sen­det wun­der­bar vom Rech­ner aus, aber nicht von mei­nem Smart­pho­ne (Iphone6s, iOS 11.4.1). Hier bleibt das Sys­tem dann nach “Sen­den” ein­fach ste­hen, es dreht sich die “Fort­schritt­schlei­fe” und nichts pas­siert. Ich dach­te erst, ich müss­te auf SMTP umstel­len, habe das auch mit dem PlugIn Post SMTP gemacht… auch das funk­tio­niert vom Rech­ner, aber nicht vom Smartphone.
    Kann mir jemand helfen?
    Vie­le Grü­ße, Achim

  6. Hal­lo Achim,

    da kann ich dir lei­der nicht wei­ter hel­fen. Ich habe ein Android-Smart­pho­ne und da klappt der Ver­sand. Ich habe es gera­de auf dei­nem Kon­takt­for­mu­lar pro­biert. Die Mail ging raus.

  7. Guten Tag,
    ich habe das Pro­blem, dass der Sen­den-But­ton nicht ange­zeigt wird, obwohl der Short­code ein­ge­fügt ist.
    Wo muss ich nach dem Pro­blem suchen?
    Über Hil­fe wäre ich sehr dankbar.

Schreibe einen Kommentar

WordPress Cookie Hinweis von Real Cookie Banner