Ein sehr beliebtes WordPress-Plugin für die Erstellung von Online-Kontaktformularen ist Contact Form 7.
Natürlich ist es nicht das einzige Plugin, um Kontaktformulare zu erstellen, aber es ist wohl eines der meist verwendeten für diesen Bereich. Auch ich setze es auf meinen verschiedenen Blogs ein.
Wie Sie mit Contact Form 7 ein Formular erstellen können, zeige ich Ihnen in diesem Beitrag.
Download und Installation von Contact Form 7
Das Plugin können Sie unter diesem Link herunterladen und auf die übliche Art und Weise installieren. Die einfachste Art, ein Plugin in Ihre WordPress-Installation hochzuladen und zu aktivieren, geht folgendermaßen:
Sie gehen im WordPress-Dashboard in den Bereich Plugins und klicken dort auf den Link „Installieren“. Auf der nächsten Seite klicken Sie auf den Link „Hochladen“, suchen auf Ihrer Festplatte nach der .zip-Datei des heruntergeladenen Plugins und klicken dann auf „Installieren“. Das Plugin wird anschließend zu Ihren weiteren Plugins hinzugefügt und aktiviert.
Sie können das Plugin auch über die Pluginsuche installieren, falls Sie die Plugin-Dateien nicht heruntergeladen haben. Sie klicken unter Plugins installieren auf „Suchen“, geben die Plugin-Bezeichnung „Contact Form 7“ in das Feld ein und klicken dann auf Plugins suchen.
Schon der erste Treffer müsste das entsprechende Plugin sein. Unter der Pluginbezeichnung finden Sie den Jetzt-installieren-Link, worüber das Plugin in Ihre WordPress-Installation hinzugefügt wird.
Sie finden anschließend in der linken Seitenleiste im WordPress-Dashboard den Menüpunkt Formular. Hierüber können Sie Formulare erstellen und abspeichern.
Standardformular von Contact Form 7
Das Plugin bringt standardmäßig schon ein einfaches Kontaktformular mit, sodass Sie – falls Sie keine größeren Ansprüche an das Formular haben – schnell eins in Ihren Blog einfügen können, nämlich das schon existierende.
Standardformular von Contact Form 7
Das Standardformular hat fünf Felder, und zwar eins für den Namen des Absenders, die E-Mail-Adresse, den Betreff und ein Nachrichtenfeld für die eigentliche Mitteilung plus den Absendebutton (der auch als Formularfeld angesehen wird).
Drei der fünf Felder sind als Pflichtfelder definiert, d. h. sie müssen vom Absender ausgefüllt werden.
Wenn Sie auf „Formular“ in der linken Seitenleiste des WordPress-Dashboards klicken, kommen Sie in die Formularübersicht. Dort sollte das Standardformular aufgeführt sein. Später sehen Sie hier alle von Ihnen angelegten Formulare.
Klicken Sie auf Kontaktformular 1, kommen Sie in die Bearbeitungsansicht. Dort finden Sie verschiedene Bereiche vor:
- Ganz oben auf der Seite steht der Shortcode, mit dem Sie das Formular in eine statische Seite oder einen Artikel einfügen. Er sieht so aus: (contact-form-7 id=”94″ title=”Kontaktformular 1″), (ich habe runde statt korrekte eckige Klammern in das Beispiel gesetzt, sonst fügt mir WordPress hier ein Formular ein :-))
- dann folgen der Formular- und der Tagbereich: Links finden Sie die Formularfelder, aus dem sich das aktuelle Formular zusammensetzt, rechts können Sie über Tag generieren weitere Felder anlegen,
- darunter steht der Mailbereich, in den Sie wichtige Angaben für den Empfänger der Mail eintragen, und der Mailtext, der sich aus den einzelnen Feldervariablen zusammensetzt
- und darunter schließt sich der Meldungen-Bereich an. Auch diese Meldungen können Sie nach Ihren Vorstellungen oder Bedürfnissen abwandeln. Die Meldungen werden bei bestimmten Ereignissen, wie beispielsweise beim Absenden des Formulars oder bei Nichtausfüllen von Pflichtfeldern usw. angezeigt.
Wenn Sie das Standardformular verwenden wollen, brauchen Sie im Grunde genommen keine Änderungen mehr vorzunehmen.
Unter Mail steht sogar schon eine Empfänger-E-Mail-Adresse, die das Plugin von den allgemeinen WordPress-Einstellungen entnommen hat. Denn bei der WordPress-Installation muss man ja eine E-Mail-Adresse eintragen. Wollen Sie an diese Mail die abgesendeten Formulare bekommen, dann können Sie die Adresse so belassen, oder Sie tragen eine andere E-Mail-Adresse ein, falls Sie eine andere Empfänger-E-Mail-Adresse geplant haben.
Sie müssen nur noch den Shortcode des Formulars in eine Seite einfügen, üblicherweise in eine statische Seite, die man am besten mit Kontakt benennt. Sie können für das Shortcode-Einfügen im visuellen Modus des Editors bleiben.
Weiterer Text lässt sich vor und hinter den Shortcode in die Seite einbauen.
Aber wer ein anderes Formular möchte mit weiteren Feldern, der kann dies auch mit dem Plugin umsetzen. Außerdem können Sie viele Formulare in Ihren Blog mithilfe des Plugins einbauen.
Ein neues Kontaktformular mit Contact Form 7 erstellen
Um ein neues Kontaktformular anzulegen, klicken Sie unter Formular auf Neues Formular. Dann klicken Sie in dem kleinen Fenster wieder auf Neues Formular, wenn Sie die Standardsprache Deutsch verwenden, oder wählen erst die entsprechende Sprache aus und klicken erst dann auf Neues Formular.
Das neue Formular enthält nun am Anfang die gleichen Felder wie das Standardformular. Ganz oben finden Sie in dem großen Feld „Ohne Titel“. Hier sollten Sie dem neuen Kontaktformular einen aussagekräftigen Namen geben.
Um Ihrem Formular ein neues Feld hinzuzufügen, klicken Sie unter Tag generieren auf den Pfeil. Dann werden Ihnen alle möglichen Formularelemente, die Sie einbauen können, angezeigt.
Die ersten drei Formularfelder Text, E-Mail und Textbereich kennen Sie bereits, denn diese kommen im Standardformular schon vor, Text für den Namen und Betreff, E-Mail für die E-Mail-Adresse und Textbereich für das Mitteilungsfeld. Und auch der Senden-Button am Ende der Liste ist bekannt.
Was gibt es noch an Formularfeldern?
Auswahlmenü:
Mit dem Auswahlmenü stellen Sie dem Formularnutzer eine kleine Auswahlliste zur Verfügung. Sie können entscheiden, ob eine Mehrfachauswahl an Listenpunkten möglich ist oder nicht. Sie können weiterhin festlegen, ob das Feld ein Pflichtfeld sein soll und ob in dem Auswahlmenü als erster Punkt eine leere Zeile angezeigt wird.
Die Menüpunkte schreiben Sie in das Feld Auswahlmöglichkeiten untereinander, einen Listenpunkt in eine Zeile (siehe Bild unten).
Danach klicken Sie auf den Shortcode, sodass dieser aktualisiert wird. Diesen fügen Sie dann links im Feld Formular an die entsprechende Stelle.
Das neue Feld muss noch in den Nachrichtentext eingefügt werden, damit die Angaben auch an den E-Mail-Empfänger übermittelt werden.
Die Felder id und class sind optional und können leer bleiben.
Sie sollten auch jedes Formularfeld in Ihrem Kontaktformular entsprechend beschriften. Dazu erstellen Sie oberhalb des eingefügten Formulartags eine Bezeichnung, die Sie mit einem <p>-Tag beginnen und mit einem <br />-Tag enden. Den schließenden </p>-Tag setzen Sie an das Ende des generierten Formular-Tags.
An den Standardformularfeldern, die im schon vorhandenen Kontaktformular von Contact Form 7 eingefügt sind, sehen Sie genau, wie dieser Schritt durchgeführt wird.
Eine Alternative zum Auswahlmenü sind die Auswahlboxen mit den rechteckigen Checkboxen (siehe Bild unten).
Radio Button
Das sind runde Checkboxen, die eine Mehrfachauswahl nicht ermöglichen. Sie können also den Nutzer immer nur eine Option auswählen lassen.
Zustimmung
Sie können auch ein Zustimmungskästchen einfügen, das der User setzen muss, um beispielsweise die AGB zu akzeptieren.
Quiz
Sie können sogar Quizfragen mit dem Plugin erstellen. Dazu fügen Sie in das Feld Quiz zuerst die Frage ein, setzen danach einen senkrechten Strich dahinter und tragen dann die Antwort ein (Beispiel: Wie viel ist 10 x 20?|200). Im Formular wird dann neben der Quizfrage ein Textfeld eingefügt, wo der User die Antwort eintragen kann.
Captcha
Für das Einfügen eines Captchas (willkürliche Zahlen-Buchstaben-Kombination, die vom User in ein Feld eingegeben werden muss) benötigen Sie ein zusätzliches Plugin (Really Simple Captcha), um die Funktionalität in Contact Form 7 richtig nutzen zu können.
Datei-Upload
Und auch ein Datei-Anhang (bzw. mehrere) kann mit dem Plugin in ein Formular eingebaut werden. Sie können noch die akzeptierten Dateitypen und die maximale Dateigröße für den Upload festlegen. Außerdem müssen Sie den generierten Formularfeld-Code in das Datei-Anhang-Feld einfügen und nicht in den Nachrichtentext wie die anderen Felder.
Auf dem Bild unten sehen Sie nochmals die hier vorgestellten Formularfelder (außer das Captcha):
Haben Sie Ihr Kontaktformular erstellt, dann setzen Sie den Shortcode in die entsprechende Seite oder in einen Blogartikel und testen Sie das Formular, ob es auch richtig funktioniert.
Manchmal vergisst man die Tags in den Nachrichtentext einzubinden und dann werden ausgefüllte Felder nicht übermittelt oder man hat vergessen, den Datei-Upload-Tag in das richtige Feld einzufügen, sodass man den Datei-Anhang in der versendeten Testmail nicht erhält.
Außerdem sollten Sie nichts an der Syntax der einzelnen Tags verändern, denn dies führt auch zu Funktionsausfällen.
Und denken Sie daran, alle Änderungen an dem Kontaktformular abzuspeichern. Das vergisst man ab und zu auch.
Fazit
Wie Sie sehen, lässt sich mit dem Plugin Contact Form 7 mehr als nur ein klassisches Kontaktformular erstellen. Ich finde das Einfügen von neuen Felder sehr intuitiv und einfach, dass es wirklich sehr schnell von statten geht, ein etwas größeres Formular zu erstellen und in seinen Blog einzubinden.
