Wie du Contact Form 7 für deine WordPress-Seite konfigurierst

Im 2024 ist es sehr wichtig, mit deinem Publikum in Kontakt zu bleiben. Die Einrichtung einer E-Mail-Liste mit einem Service wie MailChimp hilft dir, Inhalte direkt an deine Abonnenten zu liefern.

E-Mail-Listen sind toll, aber was, wenn ein Leser oder potenzieller Kunde direkt mit dir in Kontakt treten will? Hier kommen Kontaktformulare ins Spiel! In diesem Artikel behandeln wir, wie du das beliebte Contact Form 7 Plugin für deine WordPress-Seite konfigurieren kannst.

Wie man Contact Form 7 installiert

Contact Form 7 gibt es seit 2009, und es hat im letzten Jahrzehnt über 5 Millionen Downloads erzielt. Contact Form 7 kann direkt aus dem WordPress-Plugin-Repository installiert werden. Wenn du nach „Contact Form 7“ suchst, kannst du das Plugin zusammen mit einer Vielzahl von Add-ons finden.

Nachdem das Plugin installiert ist, siehst du einen Menüpunkt mit der Bezeichnung „Contact“ in der Sidebar deines WordPress-Dashboards. Hier können alle Einstellungen von Contact Form 7 konfiguriert werden.

Die Vor- und Nachteile, ein Kontaktformular zu haben

Bevor wir uns damit befassen, wie du Contact Form 7 für deine WordPress-Seite konfigurierst, gehen wir kurz die Vor- und Nachteile des Hinzufügens eines Kontaktformulars zu deiner Seite durch.

Vorteile, ein Kontaktformular zu haben

1. Ein Kontaktformular ermöglicht es Lesern, Kunden und Fans, dich direkt zu kontaktieren. Je nach dem Zweck deiner WordPress-Seite kann die Möglichkeit für einen Besucher, mit dir zu kommunizieren, sehr wichtig sein. Wenn man zum Beispiel kein Kontaktformular auf einer E-Commerce-Seite hinzufügt, kann das für dein Geschäft finanziell schädlich sein, weil die Interessenten dich nicht erreichen können, wenn sie Fragen zu deinem Produkt haben.
2. Ein Kontaktformular erhöht die Glaubwürdigkeit deiner WordPress-Seite oder deines Unternehmens. Viele Leute sehen das Vorhandensein eines Kontaktformulars als eine Art Vertrauensfaktor. Der Gedanke, dich, den Besitzer der Seite, erreichen zu können, macht deine Inhalte vertrauenswürdiger.

Nachteile, ein Kontaktformular zu haben

1. Spam kann ein Problem für öffentliche Formulare wie Kommentarfelder und Kontaktformulare sein. Glücklicherweise kannst du mit Contact Form 7 Spam mit reCAPTCHA herausfiltern. Du kannst sogar eine Cloudflare-Seitenregel konfigurieren, um dich noch besser zu schützen. Wie man den Spamschutz im Contact Form 7 einrichtet, werden wir später im Artikel näher erläutern.
2. Nach dem Hinzufügen eines Kontaktformular auf deiner Seite, musst du dir wahrscheinlich Zeit nehmen, um auf Nachrichten zu antworten. Das ist nicht unbedingt eine schlechte Sache, je nachdem wie man es betrachtet. Manche Leute fürchten den Prozess des Antwortens auf E-Mails, während andere ihn wirklich genießen. Unserer Erfahrung nach überwiegen die Beziehungen, die sich durch ein Kontaktformular auf eurer Seite manifestieren, in der Regel die Arbeitskosten, also empfehlen wir euch, diese zu nutzen!

Eine Übersicht über die Einstellungen von Contact Form 7

Ein Kontaktformular mit dem Contact Form 7 Plugin zu erstellen ist super einfach. Um anzufangen, klicke auf Contact > Contact Forms in deiner WordPress Sidebar. Auf dieser Seite kannst du alle deine Kontaktformulare zusammen mit den dazugehörigen Metadaten einsehen.

Wenn das Contact Form 7 zum ersten Mal installiert wird, erstellt es auch ein Beispielformular. Bevor wir uns damit befassen, wie man ein benutzerdefiniertes Kontaktformular erstellt, schauen wir uns zuerst das Beispielformular an, um eine bessere Vorstellung davon zu bekommen, wie das Contact Form 7 funktioniert. Klicke auf Contact Form 1, um die Formulareinstellungen zu sehen.

Die Seite „Edit Contact Form“ ist in vier Abschnitte unterteilt.

1. Form – Passe deine HTML-Kontaktformularvorlage mit einer Vielzahl von Feldoptionen wie „Text“, „E-Mail“, „Checkboxes“, etc. an. Du kannst auch benutzerdefinierte HTML in der Formularanpassungsbox schreiben.
2. Mail – Passe die E-Mail-Vorlage und die Einstellungen für Benachrichtigungs-E-Mails an.
3. Messages – Passe Nachrichten an, die nach bestimmten Aktionen angezeigt werden. Du kannst zum Beispiel eine einzigartige Nachricht einstellen, die angezeigt wird, nachdem jemand ein Kontaktformular abgeschickt hat.
4. Additional Settings – Spezifiziere Snippets, um zusätzliche Funktionen wie den Nur-Abonnenten-Modus, den Demo-Modus und das Überspringen von E-Mails zu aktivieren.

Schauen wir uns jetzt jeden Abschnitt genauer an und erstellen ein benutzerdefiniertes Kontaktformular!

Wie man ein WordPress Kontaktformular erstellt

Um ein neues Kontaktformular zu erstellen, klicke auf Add New neben „Contact Forms”.

Gib dem neuen Kontaktformular einen Namen und klicke auf „Save“.

In der Sektion „Formular“ fügst du das notwendige HTML für dein Kontaktformular hinzu. Du kannst die verschiedenen voreingestellten Schaltflächen verwenden, um Shortcodes für beliebte Formular-Tags zu generieren. Um es einfacher zu machen, schau dir die Beschreibungen unten für die voreingestellten Formular-Tags an, die mit Contact Form 7 mitgeliefert werden.

• Text – Erstelle einen Formular-Tag für eine einzelne Textzeile. Textfelder sind nützlich für Vornamen, Nachnamen und andere textbasierte Snippets, die nicht mehrere Zeilen benötigen.
• E-Mail – Erstelle einen Formular-Tag für eine E-Mail-Adresse.
• URL – Erstelle einen Formular-Tag für eine URL.
• Tel – Erstelle einen Formular-Tag für eine Telefonnummer.
• Number – Erstelle einen Formular-Tag für eine Nummer. Im Gegensatz zu den Eingabefeldern „Text“ oder „Textbereich“ sind in den Feldern „Nummer“ nur numerische Ziffern erlaubt.
• Date – Erstelle einen Formular-Tag für ein Datum.
• Text Area – Erstelle einen Formular-Tag für einen Textbereich. Anders als das normale „Text“-Eingabefeld, erlaubt ein „Textbereich“-Feld mehrere Textzeilen. Sie sind ideal für die Eingabe des Nachrichtentextes.
• Drop-Down-Menu – Erstelle einen Formular-Tag für ein Drop-Down-Menü.
• Checkboxes – Erstelle einen Formular-Tag für Checkboxen.
• Radio Buttons – Erstelle einen Formular-Tag für Radio-Buttons.
• Acceptance – Erstelle ein Formular-Tag für eine Akzeptanz-Checkbox.
• Quiz – Erstelle einen Formular-Tag für ein Frage-Antwort-Paar.
• File – Erstelle einen Formular-Tag für ein Datei-Upload-Feld.
• Submit – Erstelle einen Form-Tag für einen Submit-Button.

Nun lass uns weitermachen und ein Kontaktformular anpassen. Der Vollständigkeit halber werden wir ein Kontaktformular erstellen, das alle voreingestellten Formular-Tags in Contact Form 7 verwendet.

Das „Text“-Formular-Tag

Wenn du auf einen voreingestellten Formular-Tag in Contact Form 7 klickst, siehst du ein Popup-Menü wie das untenstehende. In diesem Menü kannst du die Einstellungen des Formular-Tags konfigurieren. Unten siehst du einen Shortcode, den du in deine Kontaktformularvorlage einbinden kannst.

Für den „text“-Formular-Tag verwenden wir die Einstellungen unten, um ein Eingabefeld für einen Namen zu erstellen.

• Field Type – Required Field
• Name – text-711 (automatisch generiert)
• Default Value – Dein Name (als Standard-Platzhaltertext verwendet)
• Akismet – Nicht angekreuzt
• ID-Attribute (CSS) – cf7-dein-Name
• Class Attribute (CSS) – cf7-dein-Name

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

Für den Moment klicke einfach auf den Button Insert Tag, um den Formular-Tag in die Kontaktformular-Vorlage einzufügen. Später werden wir weitere HTML-Tags hinzufügen, um das Formular zu strukturieren.

Das „E-Mail“-Formular-Tag

Als nächstes werden wir ein E-Mail-Formular-Tag erstellen, mit dem unser Kontaktformular E-Mail-Adressen sammeln kann.

Für den „E-Mail“-Formular-Tag haben wir die Einstellungen unten konfiguriert.

• Field Type – Required Field
• Name – email-632 (automatisch generiert)
• Default Value – Deine Email
• Akismet – Nicht angekreuzt.
• ID-Attribute (CSS) – deine-Email
• Class Attribute (CSS) – deine-Email

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[email* email-632 id:email class:email placeholder "Your Email"]

Das „URL“-Formular-Tag

In manchen Fällen möchtest du vielleicht ein Eingabefeld auf deinem Kontaktformular haben, um die Website von jemandem zu sammeln. Obwohl du dafür technisch gesehen einen normalen „Text“-Formular-Tag im Kontaktformular 7 verwenden kannst, empfehlen wir, stattdessen den „URL“-Formular-Tag zu verwenden. Der „URL“-Formular-Tag erzeugt ein Eingabefeld, das URLs validiert, um sicherzustellen, dass sie korrekt formatiert sind.

Für den „url“-Formular-Tag haben wir die Einstellungen unten konfiguriert.

• Name – url-601 (automatisch generiert)
• Default Value – Deine Website
• Akismet – Nicht angekreuzt.
• ID-Attribute (CSS) – cf7-deine-Webseite
• Class Attribute (CSS) – cf7-deine-Webseite

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

Der „Tel“-Formular-Tag

Ähnlich wie bei URLs kannst du auch ein Standard „Text“-Formular-Tag verwenden, um Telefonnummern zu sammeln. Es ist jedoch besser, stattdessen den „tel“-Formular-Tag zu verwenden, um sicherzustellen, dass die Telefonnummer gültig ist.

Für den „tel“-Formular-Tag haben wir die Einstellungen unten konfiguriert.

• Name – tel-842 (automatisch generiert)
• Default Value – Deine Telefonnummer
• ID-Attribute (CSS) – cf7- deine-Telefonnummer
• Class Attribute (CSS) – cf7- deine-Telefonnummer

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

Das „Datum“-Formular-Tag

Mit dem „Datum“-Formular-Tag des Contact Form 7 kannst du eine Datumsauswahl im Kalender-Stil erstellen. Dieses „date“-Eingabefeld ist nützlich für die Angabe von Terminen in einem Kontaktformular.

Für das Formular-Tag „Datum“ haben wir die Einstellungen unten konfiguriert.

• Name – Datum – 389 (automatisch generiert)
• Default Value – Dein Termindatum.
• Range – Unser benutzerdefinierter Datumsbereich.
• ID-Attribute (CSS) – cf7-Termindatum
• Class Attribute (CSS) – cf7-Termindatum

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]

Das “ Textfeld“-Formular-Tag

Mit dem „Textfeld“-Formular-Tag kannst du ein mehrzeiliges Textfeld erstellen, mit dem Besucher längere Nachrichten einreichen können. Textareas sind am nützlichsten, um den Textkörper einer Nachricht zu erfassen.

Für den „Textfeld“-Formular-Tag haben wir die Einstellungen unten konfiguriert.

• Name – textarea-795 (automatisch generiert)
• Default Value – Deine Nachricht
• ID-Attribute (CSS) – cf7-deine Nachricht
• Class Attribute (CSS) – cf7-deine Nachricht

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]

Das „Drop-Down-Menü“-Formular-Tag

Mit dem „Drop-Down-Menü“-Formular-Tag von Contact Form 7 kannst du ein Drop-Down-Menü mit mehreren Optionen erstellen. Drop-Down-Menüs sind nützlich für Situationen, in denen du möchtest, dass ein Besucher eine bestimmte Option auswählt, die er mit dem Formular abschicken kann. Wenn du zum Beispiel eine WordPress-Wartungsfirma betreibst, kannst du ein Drop-Down-Menü konfigurieren, mit dem ein Besucher zwischen den von dir angebotenen Dienstleistungen wählen kann.

Für den „Drop-Down-Menü“-Formular-Tag haben wir die Einstellungen unten konfiguriert.

• Name – menu-24 (automatisch generiert)
• Options – Option 1, Option 2, Option 3, Option 4
• Allow Multiple Selections – Angekreuzt
• Insert a Blank Item as the First Option – Angekreuzt
• ID-Attribute – cf7-Drop-Down-Menü
• Class Attribute – cf7-Drop-Down-Menü

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

Das „Checkbox“-Formular-Tag

Mit dem Checkbox-Form-Tag kannst du HTML-Checkboxen erstellen. Ähnlich wie Drop-Down-Menüs können Checkboxen auch verwendet werden, um vordefinierte Optionen auszuwählen. Abhängig von der Art deines Kontaktformulars können Checkboxen besser funktionieren als Dropdown-Menüs. Wenn du zum Beispiel eine kleine Anzahl von Optionen zur Auswahl hast, reduziert eine Checkbox die Anzahl der Klicks, die für eine Auswahl erforderlich sind. Andererseits, wenn dein Kontaktformular viele Optionen hat, kann ein Drop-Down-Menü besser funktionieren, weil es weniger vertikalen Platz einnimmt.

Für den „Checkbox“-Formular-Tag haben wir die Einstellungen unten konfiguriert.

• Name – checkbox-948 (automatisch generiert)
• Options – Option 1, Option 2, Option 3
• Wrap Each Item with Label Element – Angekreuzt
• ID-Attribute – cf7-checkbox
• Class Attribute – cf7-checkbox

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

Das „Radio Buttons“-Formular-Tag

Mit dem Formular-Tag „Radiobuttons“ kannst du Radiobuttons mit mehreren Optionen erstellen. Im Gegensatz zu Checkboxen und Drop-Down-Menüs kannst du mit Radio-Buttons nur eine einzige Option auswählen.

Für den Formular-Tag „Radio-Buttons“ haben wir die Einstellungen unten konfiguriert.

• Name – radio-708 (automatisch generiert)
• Options – Option 1, Option 2, Option 3
• Wrap Each Item with Label Element – Angekreuzt
• ID-Attribute – cf7-radio
• Class Attribute – cf7-radio

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]

Das „Akzeptieren“-Formular-Tag

Das “ Akzeptieren“-Formular-Tag des Kontaktformulars 7 kann verwendet werden, um eine einzelne Checkbox zu generieren, mit der die Allgemeinen Geschäftsbedingungen akzeptiert werden können. Mit den Einstellungen des Formular-Tags „Akzeptieren“ kannst du festlegen, welche Nachricht angezeigt werden soll.

Für den Formular-Tag “ Akzeptieren“ haben wir die Einstellungen unten konfiguriert.

• Name – acceptance-545 (automatisch generiert)
• Condition – Aktiviere dieses Kästchen, um die Bedingungen zu akzeptieren.
• ID-Attribute – cf7-acceptance
• Class Attribute – cf7-acceptance

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]

Der „Quiz“-Formular-Tag

Das „Quiz“-Formular-Tag kann verwendet werden, um grundlegende Frage- und Antwortquizzes in deinem Kontaktformular zu erstellen. Um eine Quizfrage zu erstellen, benutze das folgende Format, um die Frage und die Antwort zu trennen – Frage|Antwort. Auf dem Screenshot unten ist unsere Frage „In welchem Jahr wurde WordPress veröffentlicht?„, und die Antwort (durch ein „|“-Zeichen getrennt) ist 2003.

Für den „Quiz“-Formular-Tag haben wir die Einstellungen unten konfiguriert.

• Name – quiz-461 (automatisch generiert)
• Condition – Aktiviere dieses Kästchen, um die Bedingungen zu akzeptieren.
• ID-Attribute – cf7-Quiz
• Class Attribute – cf7-Quiz

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]

Das „Datei“-Formular-Tag

Mit dem „file“-Formular-Tag von Contact Form 7 kannst du die Funktion zum Hochladen von Dateien zu einem Kontaktformular hinzufügen. Dies ist nützlich für Situationen, in denen du möchtest, dass ein Besucher ein Bild oder eine PDF-Datei hochladen kann, um sie mit dem Formular abzuschicken. Wenn du zum Beispiel einen Fotoblog betreibst, in dem du Gästebeiträge veröffentlichst, kannst du eine Datei-Upload-Funktionalität hinzufügen, mit der Leute Bilder hochladen können.

In den Formular-Tag-Einstellungen kannst du eine Reihe von Einstellungen vornehmen, um dein Formular zu sichern. Wir empfehlen, immer ein Limit für die Dateigröße festzulegen, um zu verhindern, dass böswillige Benutzer große Dateien hochladen. In ähnlicher Weise hilft dir die Angabe von „akzeptablen Dateitypen“ dabei, dein Formular auf Dateiformate zu beschränken, die du willst und erwartest. Mit dem Fotoblog-Beispiel im Hinterkopf möchtest du vielleicht die Dateigröße auf 1 MB (1024 KB) und akzeptable Dateitypen nur auf bekannte Bildformate wie JPG und PNG beschränken.

Für den „Datei“-Formular-Tag haben wir die Einstellungen unten konfiguriert.

• Name – file-658 (automatisch generiert)
• File Size Limit – 1024kb
• Acceptable File Types – jpg|png|gif
• ID-Attribute – cf7-Datei
• Class Attribute – cf7-Datei

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]

Das „Abschicken“-Formular-Tag

Zu guter Letzt ist Contact Form 7 mit dem Formular-Tag „Abschicken“ versehen. Wie du vielleicht schon erraten hast, kannst du mit diesem Formular-Tag einen Absende-Button für ein Kontaktformular generieren.

Für den Formular-Tag „Abschicken“ haben wir die Einstellungen unten konfiguriert.

• Label – Abschicken
• ID-Attribute – cf7-submit
• Class Attribute – cf7-submit

Diese Einstellungen erzeugen den untenstehenden Shortcode.

[submit id:cf7-submit class:cf7-submit "Submit"]

Wie man ein Kontaktformular mit Formular-Tags strukturiert

Jetzt, wo wir alle unsere Formular-Tags eingerichtet haben, ist es an der Zeit, das Kontaktformular zu erstellen. Zu diesem Zeitpunkt sollten deine Einstellungen für das Kontaktformular wie im Screenshot unten aussehen. Achte auf alle Formular-Tags, die wir oben erstellt haben. Wenn die Formular-Tags eingerichtet sind, kannst du den [contact-form-7] Shortcode verwenden, um das Formular in einen WordPress-Beitrag oder eine WordPress-Seite einzubetten.

Im WordPress-Editor fügst du den Shortcode in einen leeren Block ein.

Wenn du den WordPress Classic Editor benutzt, kannst du den Shortcode überall im Inhaltseditor einfügen.

Du solltest jetzt in der Lage sein, das Kontaktformular auf der Seite zu sehen, auf der du den Shortcode für Contact Form 7 hinzugefügt hast. So sieht unser Kontaktformular mit den oben genannten Einstellungen aus. Wie du sehen kannst, wandelt Contact Form 7 automatisch Formular-Tags in gültiges HTML um, das mit den standardmäßigen CSS styles deines WordPress-Themas gerendert wird.

Unser Kontaktformular in seinem jetzigen Zustand ist ein guter Ausgangspunkt, aber es fehlt noch eine Schlüsselfunktion. Formular-Tags wie „Text“, „E-Mail“ und „URL“ unterstützen Platzhalter, aber andere Elemente wie „Checkboxen“ und „Radio-Buttons“ nicht. Ohne richtige Bezeichnungen sind die Checkboxen und Radio-Buttons für Besucher nicht sehr nützlich, da sie keinen Kontext haben. Glücklicherweise ist das Hinzufügen von Labels in Contact Form 7 sehr einfach!

Wie man Formular-Tag-Etiketten in Contact Form 7 hinzufügt

Es gibt zwei Möglichkeiten, Etiketten zu den Formular-Tag in Contact Form 7 hinzuzufügen. Für die untenstehenden Formular-Tags kannst du das Formular-Tag einfach mit einem Tag umhüllen.

• Text
• Email
• URL
• Tel
• Number
• Date
• Text Area
• Acceptance
• Quiz
• File

Wirf einen Blick auf das Beispiel „Text“ Formular-Tag unten.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

Um diesem Formular-Tag ein Label hinzuzufügen, können wir den Formular-Tag durch den untenstehenden Snippet ersetzen. Beachte die zusätzliche Instanz von “Your Name“ direkt nach dem öffnenden Tag <label>.

<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>

So sieht diese Änderung auf unserem Kontaktformular aus. In diesem Fall dient das neu erstellte Label dem gleichen Zweck wie der Platzhalter. Wenn wir jedoch keinen Platzhalter innerhalb des Formular-Tags angeben wollten, dann würde das Label helfen, den Zweck eines bestimmten Eingabefeldes zu identifizieren.

Bei Formular-Tags, die mehrere Formular-Steuerelemente wie Checkboxen, Radio-Buttons und Dropdown-Menüs darstellen, führt das Umhüllen des Formular-Tags mit einem </label>-Tag zu einem Fehler. Dies passiert, weil ein <label>-Tag nur mit einem einzelnen Formular-Element verwendet werden sollte. Die Natur von Checkboxen, Radio-Buttons und Dropdown-Menü-Optionen beinhalten mehrere Formular-Steuerelemente, daher sind sie mit der Standard-Labeling-Lösung inkompatibel.

Für Checkboxen, Radio-Buttons und Dropdown-Menüs musst du einen use_label_element Parameter innerhalb des Shortcode hinzufügen. Wirf einen Blick auf das Checkbox-Form-Tag-Beispiel unten, wo use_label_element fett gedruckt ist.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

Sobald der use_label_element Parameter hinzugefügt wurde, kannst du ein Label direkt über dem Formular-Tag im Kontaktformular-Editor hinzufügen.

Der Vollständigkeit halber haben wir alle Formularanhänger in unserem Kontaktformular mit Etiketten versehen. Für eine Produktionsstätte brauchst du das wahrscheinlich nicht zu tun, da einige Formular-Tags bereits Platzhalter enthalten. Trotzdem wollten wir zeigen, wie Labels funktionieren.

Hier ist, wie unser Kontaktformular aussieht:

Mail-Einstellungen im Contact Form 7 konfigurieren

Nachdem wir nun die Struktur unseres Kontaktformulars konfiguriert haben, ist es an der Zeit, einen Blick auf die Einstellungen für den Mailversand in Contact Form 7 zu werfen. Obwohl die Standardeinstellungen für den Mailversand für die meisten Sites problemlos funktionieren sollten, ist es dennoch wichtig, die verschiedenen Einstellungen zu verstehen, falls deine Site oder dein Anwendungsfall eine spezielle Konfiguration erfordert.

Um auf die Einstellungen für den Mailversand zuzugreifen, gehe in den Kontaktformular-Editor und wähle den Tab „Mail“.

In den Einstellungen für den Mailversand von Contact Form 7 kannst du die Vorlagen und Parameter anpassen, die verwendet werden, um eine Benachrichtigung zu generieren und an dich zu senden, nachdem jemand ein Formular abgeschickt hat. Wenn du falsche Einstellungen verwendest, ist es möglich, dass du nicht über das Absenden eines Formulars benachrichtigt wirst. Daher ist es wichtig, dass du nach dem Erstellen eines Kontaktformulars und dem Ändern von Einstellungen die Formularzustellung testest.

Contact Form 7 lässt dich die folgenden Einstellungen für den Mailversand konfigurieren.

• To – die E-Mail-Adresse, an die eine Benachrichtigung gesendet werden soll.
• From – die E-Mail-Adresse, von der aus eine Benachrichtigung verschickt werden soll.
• Subject – der Betreff der Benachrichtigungs-E-Mail.
• Additional Headers – zusätzliche E-Mail-Header wie „reply-to“ angeben.
• Message Body – der Textkörper der Benachrichtigungs-E-Mail.
• File Attachments – gib alle Anhänge an, die der Benachrichtigungs-E-Mail beigefügt werden sollen.

Gehen wir nun die einzelnen Einstellungen durch, um ein besseres Verständnis dafür zu bekommen, wie sie sich auf den Mailversand in Contact Form 7 auswirken können.

Das Feld „To“

Achte darauf, dass du eine echte E-Mail-Adresse für die „An“-Einstellung angibst. Standardmäßig ordnet Contact Form 7 die mit deinem WordPress-Benutzerkonto verbundene E-Mail-Adresse der „An“-Einstellung zu. Wenn deine WordPress-E-Mail-Adresse nicht gültig ist, aktualisiere sie in deinen Profileinstellungen und ändere auch die E-Mail-Adresse in Contact Form 7.

Das Feld „From“

Die „Von“-Einstellung sollte das folgende Format verwenden – Your Name. Für unsere Kontaktformular-Mail-Einstellungen verwenden wir kinstalife <[email protected]>.

Standardmäßig wird Contact 7 dieses Feld mit [email protected] ausfüllen. Du solltest sicherstellen, dass diese E-Mail-Adresse gültig ist, da einige WordPress Hosts ausgehende E-Mails an ungültige Adressen blockieren. Es gibt mehrere Möglichkeiten, diese E-Mail-Adresse gültig zu machen. Du kannst entweder ein eigenes E-Mail-Konto für  [email protected] einrichten oder die Catch-All-Funktionalität bei deinem E-Mail-Dienstleister aktivieren. Wenn Sie diese E-Mail-Adresse nicht einrichten können, empfehlen wir Ihnen, sie in eine gültige E-Mail-Adresse umzuwandeln, um Zustellungsprobleme zu vermeiden.

Das Feld „Subject“

Die Einstellung für „Betreff“ kann verwendet werden, um eine Betreffzeile für Benachrichtigungsmails anzugeben. Standardmäßig legt Contact Form 7 den Betreff als Site Name “[your-subject]” fest –der Name des Betreffs in der Standardformularvorlage von Contact Form 7.

Wenn du keinen Formular-Tag mit dem Namen “[your-subject]” in Ihrem Formular hast, ändere ihn unbedingt in etwas anderes. Wenn du beispielsweise nur ein Formular-Tag zur Erfassung des Namens eines Besuchers (z.B. [your-name]) hast, kannst du die Betreffzeile in You’ve Received a Message from [your-name] ändern.

Das Feld „Additional Headers“

Unter „Zusätzliche Kopfzeilen“ kannst E-Mail-Kopfzeilen wie reply-to, CC und BCC angeben. Standardmäßig fügt Contact Form 7 die folgende Kopfzeile hinzu – Reply-To: [your-email]. Mit diesem Header kannst du an die E-Mail-Adresse antworten, die in einem eingereichten Kontaktformular angegeben ist.

Die Standard-Kopfzeile Reply-to ist in Ordnung, wenn du das Standard-E-Mail-Formular-Tag von Contact Form 7 verwendest. Wenn dies nicht der Fall ist, stelle sicher, dass er mit dem Namen Ihres E-Mail-Formular-Tags übereinstimmt. Für unser Kontaktformular lautet der Name des E-Mail-Formular-Tags „email-632“, so dass der Reply-to-Formular-Tag in Reply-To: [email-632] geändert werden müsste.

Der „Message Body“

Als nächstes kommt der „Message Body“, der den Inhalt der Benachrichtigungs-E-Mail bestimmt. Die Standardvorlage von Contact Form 7 verwendet die Formular-Tags [your-name], [your-email], [your-subject] und [your-message] und sieht wie folgt aus:

From: [your-name] 
Subject: [your-subject]
Message Body:
[your-message]
-- 
This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)

Achte darauf, diese Formular-Tags zu ändern, wenn du sie nicht in deiner Kontaktformular-Vorlage verwendest. Da das Kontaktformular, das wir erstellt haben, eine Menge Informationen sammelt, können wir den Nachrichtentext mit zusätzlichen Formular-Tags so einrichten:

Hello Brian, you’ve received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795

Contact Form 7 Mail-Einstellungen – Dateianhänge

Wenn dein Kontaktformular das Hochladen einer Datei beinhaltet, kannst du die Datei der Benachrichtigungs-E-Mail beifügen. In unserem Kontaktformular haben wir einen Datei-Upload-Formular-Tag namens „[Datei-658]“. So können wir diesen Formular-Tag unter „Dateianhänge“ hinzufügen, um sicherzustellen, dass die Datei in der E-Mail-Benachrichtigung enthalten ist.

Contact Form 7 Probleme bei der Postzustellung

Wenn du feststellst, dass das Contact Form 7 keine E-Mails verschickt, kannst du ein paar Dinge überprüfen, bevor du einen WordPress-Entwickler um Hilfe bittest.

1. Überprüfe, ob dein Server andere Arten von E-Mails sendet. Um dies zu testen, kannst du eine weitere E-Mail-Zustellungsaktion auslösen, indem du einen Testkommentar zu einem Blog-Eintrag abgibst oder auf deiner WordPress-Login-Seite eine Anfrage zur Passwort-Rücksetzung stellst. Wenn du nach Durchführung einer dieser Aktionen eine E-Mail erhältst, dann hängt das Problem wahrscheinlich mit der Konfiguration von Contact Form 7 zusammen. Wenn du keine E-Mails erhälst, wende dich sich an das Support-Team Ihres Gastgebers und teile ihm mit, dass du ein Problem mit der E-Mail-Zustellung hast.
2. Vergewissere dich, dass die Felder „An“ und „Von“ in den Einstellungen für den E-Mail-Versand deines Kontaktformulars richtig konfiguriert sind. Damit das Contact Form 7 richtig funktioniert, sollten diese beiden Felder mit echten E-Mail-Adressen ausgefüllt sein.

Contact Form 7 Formulareinreichungsnachrichten

Mit Contact Form 7 kannst du eine Vielzahl von Formulareinreichungsnachrichten anpassen. Diese Nachrichten werden angezeigt, wenn eine bestimmte Bedingung erfüllt ist. Wenn ein Besucher zum Beispiel vergisst, ein Pflichtfeld auszufüllen, wird Contact Form 7 die Nachricht „Das Feld ist erforderlich“ anzeigen. Für die meisten Anwendungsfälle sollten die Standardnachrichten einwandfrei funktionieren. Wenn du die Nachrichten jedoch anpassen möchtest, kannst du dies tun, indem du im Kontaktformular-Editor auf den Tab „Messages“ klickst.

Wie man dein Kontaktformular sichert

Da automatisierte Bots im Laufe der Jahre immer intelligenter und durchdringender geworden sind, ist Spam zu einem großen Problem für Kontaktformulare geworden. Da Kontaktformulare normalerweise für das öffentliche Internet zugänglich sind, ist es für Web-Scraper relativ einfach, sie zu erkennen und Spam-Nachrichten in den Posteingang abzufeuern. Glücklicherweise gibt es verschiedene Möglichkeiten, Spammer abzuwehren und dein Kontaktformular zu schützen.

Sichere dein Contact Form 7 mit reCAPTCHA

Wenn du schon einmal ein Formular im Internet abgeschickt hast, kennst du wahrscheinlich schon reCAPTCHA, eine von Google entwickelte Technologie zur Erkennung von automatisiertem Bot-Verhalten. Ältere Versionen von reCAPTCHA (V2) verlangten von den Nutzern, ein Rätsel oder eine Herausforderung zu bestehen.

Die neueste Version von reCAPTCHA (V3) erfordert keine Interaktion der Nutzer. Stattdessen überwacht es transparent die Benutzeraktivitäten im Hintergrund, um zwischen menschlichen und Bot-Besuchern zu unterscheiden. Da Kontaktformular 7 reCAPTCHA V3 unterstützt, empfehlen wir die Verwendung dieser neuesten Version, da sie eine bessere Benutzererfahrung für Besucher bietet.

Um reCAPTCHA einzurichten, musst du zuerst einen API-Schlüssel generieren. Dazu loggst du dich in dein Google-Konto ein und gehst zur reCAPTCHA-Einrichtungsseite.

Geh das Anmeldeformular durch, um dein reCAPTCHA zu erstellen.

• Label – Gib ein Label deiner Wahl an.
• reCAPTCHA Type – Kontaktformular 7 unterstützt reCAPTCHA v3, also wähle diese Version.
• Domains – Wenn deine Seite eine Root-Domain verwendet, füge die nicht-wwww und www-Version deiner Domain hinzu. Wenn deine Site eine Subdomain verwendet, füge einfach die Subdomain hinzu.
• Owners – Die mit deinem Google-Konto verknüpfte E-Mail-Adresse wird standardmäßig als Besitzer hinzugefügt. Du kannst bei Bedarf weitere E-Mail-Adressen hinzufügen.

Nachdem du alle Optionen ausgefüllt hast, klicke auf Submit. Daraufhin werden dir dein seitenspezifischer „Site-Key“ und dein „Secret Key“ angezeigt. Bewahre diese Schlüssel an einem sicheren Ort auf, denn du musst sie zum Contact Form 7 hinzufügen.

Als nächstes klickst du auf „Contact“ in der Sidebar deines WordPress-Dashboards und klickst auf Integration. Wähle die reCAPTCHA-Option und füge deinen Seitenschlüssel und deinen geheimen Schlüssel in die entsprechenden Felder ein. Klicke abschließend auf Save Changes, um die reCAPTCHA-Integration abzuschließen.

Nachdem du reCAPTCHA in Contact Form 7 konfiguriert hast, siehst du ein reCAPTCHA Logo in der unteren rechten Ecke deiner Kontaktformularseite. Das bedeutet, dass reCAPTCHA aktiv ist und dein Kontaktformular vor Spam-Beiträgen schützt.

Sichere dein Kontaktformular mit Cloudflare (Optional)

Wenn du Cloudflare verwendest, um deine Seite zu schützen, kannst du eine spezielle Seitenregel für deine Kontaktformularseite aufstellen, um Spam beim Einreichen von Kontaktformularen zu reduzieren

Um eine Seitenregel hinzuzufügen, klicke auf den Reiter „Seitenregeln“ und verwende die folgenden Einstellungen, um deine Kontaktseite zu sichern.

• If the URL Matches – *deine-domain.com/deine-contact-page/*
• Browser Integrity Check – Ein
• Security Level – Hoch

Cloudflare’s „Browser Integrity Check„-Funktion analysiert HTTP-Header. Wenn es einen HTTP Header entdeckt, der üblicherweise von automatisierten Bot und Spammern verwendet wird, lehnt es die Anfrage an deine Seite ab. Wenn du die „Sicherheitsstufe“ auf hoch setzt, werden alle Besucher herausgefordert, die sich in den letzten zwei Wochen bösartig verhalten haben.

Indem du diese Einstellungen mit der URL-Übereinstimmungsregel auf deine Kontaktseite beschränkst, werden andere Seiten auf deiner Site von diesen Seitenregeln nicht beeinflusst. Wir empfehlen diese Konfiguration, da normale „Nur-Lesen“-Seiten auf deiner Site normalerweise keine erhöhte Sicherheitsstufe erfordern.

Zusammenfassung

Contact Form 7 ist das beliebteste Kontaktformular-Plugin und das aus gutem Grund! Mit ihm kann man alles erstellen, von einfachen Kontaktformularen über Frage-Antwort-Quiz bis hin zu komplexen Formularen, die Dateianhänge und Dropdown-Menüs unterstützen.

Und das Beste daran ist, dass es mit integrierter reCAPTCHA-Unterstützung geliefert wird, um dein Kontaktformular gegen Spammer zu schützen.

Benutzt du Contact Form 7 auf deiner WordPress-Seite? Wenn nicht, was ist deine bevorzugte Wahl? Lass es uns in den Kommentaren unten wissen!