Plug­in-Vor­stel­lung: Kon­takt­for­mu­la­re erstel­len mit Cont­act Form 7

Ein Kontaktformular mit Contact Form 7 erstellen

Lesedauer: 6 Minuten

Ein sehr belieb­tes Word­Press-Plug­in für die Erstel­lung von Online-Kon­takt­for­mu­la­ren ist Cont­act Form 7.

Natür­lich ist es nicht das ein­zi­ge Plug­in, 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 Cont­act Form 7 ein For­mu­lar erstel­len kön­nen, zei­ge ich Ihnen in die­sem Beitrag.

Down­load und Instal­la­ti­on von Cont­act Form 7

Das Plug­in 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 Plug­in in Ihre Word­Press-Instal­la­ti­on hoch­zu­la­den und zu akti­vie­ren, geht folgendermaßen:

Sie gehen im Word­Press-Dash­board in den Bereich Plug­ins 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 Plug­ins und kli­cken dann auf „Instal­lie­ren“. Das Plug­in wird anschlie­ßend zu Ihren wei­te­ren Plug­ins hin­zu­ge­fügt und aktiviert.

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

Schon der ers­te Tref­fer müss­te das ent­spre­chen­de Plug­in sein. Unter der Plug­in­be­zeich­nung fin­den Sie den Jetzt-instal­lie­ren-Link, wor­über das Plug­in in Ihre Word­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 Word­Press-Dash­board den Menü­punkt For­mu­lar. Hier­über kön­nen Sie For­mu­la­re erstel­len und abspeichern.

Stan­dard­for­mu­lar von Cont­act Form 7

Das Plug­in 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 Cont­act 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 Word­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: (cont­act-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 Word­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 Plug­in von den all­ge­mei­nen Word­Press-Ein­stel­lun­gen ent­nom­men hat. Denn bei der Word­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 Plug­in umset­zen. Außer­dem kön­nen Sie vie­le For­mu­la­re in Ihren Blog mit­hil­fe des Plug­ins einbauen.

Ein neu­es Kon­takt­for­mu­lar mit Cont­act 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 Cont­act 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 Plug­in 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.

Captcha

Für das Ein­fü­gen eines Captchas (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 Plug­in (Real­ly Simp­le Captcha), um die Funk­tio­na­li­tät in Cont­act Form 7 rich­tig nut­zen zu können.

Datei-Upload

Und auch ein Datei-Anhang (bzw. meh­re­re) kann mit dem Plug­in 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 Plug­in Cont­act 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.

Wei­te­re For­mu­lar-Plug­ins für WordPress

Tei­le die­sen Beitrag:


WordPress Cookie Hinweis von Real Cookie Banner