Im 2021 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.

Installiere das Contact Form 7 Plugin aus dem WordPress Plugin Repository

Installiere das Contact Form 7 Plugin aus dem WordPress Plugin Repository

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.

Passe die Einstellungen von Contact Form 7 an.

Passe die Einstellungen von Contact Form 7 an.

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.

Kontaktformular in Contact Form 7.

Kontaktformular in Contact Form 7.

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.

Konfiguriere dein WordPress Kontaktformular.

Konfiguriere dein WordPress Kontaktformular.

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!

Du weißt, was sie sagen - halte deine Freunde nah bei dir, und dein Publikum näher... oder so ähnlich. 😉 Bleib mit den Besuchern der Seite verbunden, dank dieses beliebten Plugins 👇Click to Tweet

Wie man ein WordPress Kontaktformular erstellt

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

Erstelle ein neues Kontaktformular in Contact Form 7.

Erstelle ein neues Kontaktformular in Contact Form 7.

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

Speicher dein neues WordPress-Kontaktformular.

Speicher dein neues WordPress-Kontaktformular.

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.

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.

Ein “Text"-Formular-Tag in Contact Form 7

Ein “Text“-Formular-Tag in Contact Form 7

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

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.

Ein "E-Mail"-Formular-Tag in Contact Form 7.

Ein „E-Mail“-Formular-Tag in Contact Form 7.

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

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.

Ein "URL"-Formular-Tag in Contact Form 7.

Ein „URL“-Formular-Tag in Contact Form 7.

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

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.

Ein "Tel"-Formular-Tag in Contact Form 7.

Ein „Tel“-Formular-Tag in Contact Form 7.

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

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.

Ein "Datum"-Formular-Tag in Contact Form 7.

Ein „Datum“-Formular-Tag in Contact Form 7.

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

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.

Ein " Textfeld"-Formular-Tag in Contact Form 7.

Ein “ Textfeld“-Formular-Tag in Contact Form 7.

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

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.

Ein "Drop-Down-Menü"-Formular-Tag in Contact Form 7.

Ein „Drop-Down-Menü“-Formular-Tag in Contact Form 7.

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

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.

Ein "Checkbox"-Formular-Tag in Contact Form 7.

Ein „Checkbox“-Formular-Tag in Contact Form 7.

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

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.

Ein "Radio Buttons"-Formular-Tag in Contact Form 7.

Ein „Radio Buttons“-Formular-Tag in Contact Form 7.

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

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.

Ein "Akzeptieren"-Formular-Tag in Contact Form 7.

Ein „Akzeptieren“-Formular-Tag in Contact Form 7.

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

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.

Ein "Quiz"-Formular-Tag in Contact Form 7.

Ein „Quiz“-Formular-Tag in Contact Form 7.

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

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.

Ein "Datei"-Formular-Tag in Contact Form 7.

Ein „Datei“-Formular-Tag in Contact Form 7.

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

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.

Ein "Abschicken"-Formular-Tag in Contact Form 7.

Ein „Abschicken“-Formular-Tag in Contact Form 7.

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

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.

Fügt ein Kontaktformular mit dem contact-form-7 shortcode ein.

Fügt ein Kontaktformular mit dem contact-form-7 shortcode ein.

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

Füge den Shortcode von Contact Form 7 zu einem Beitrag oder einer Seite hinzu.

Füge den Shortcode von Contact Form 7 zu einem Beitrag oder einer Seite hinzu.

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

Benutze Contact Form 7 mit dem WordPress Classic Editor.

Benutze Contact Form 7 mit dem WordPress Classic Editor.

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.

Ein Kontaktformular erstellt mit Contact Form 7.

Ein Kontaktformular erstellt mit Contact Form 7.

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.

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

Bist du langsame Hoster leid? Kinsta wurde mit Geschwindigkeit und Performance im Hinterkopf gebaut. Schau dir unsere Pläne an!

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

Füge ein Label zum Formular-Tag in Contact Form 7 hinzu.

Füge ein Label zum Formular-Tag in Contact Form 7 hinzu.

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.

Füge den Checkboxen, Radio-Buttons und Dropdown-Menüs in Contact Form 7 ein Label hinzu.

Füge den Checkboxen, Radio-Buttons und Dropdown-Menüs in Contact Form 7 ein Label hinzu.

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:

Ein Kontaktformular mit Label.

Ein Kontaktformular mit Label.

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

Einstellungen für den Mailversand in Contact Form 7.

Einstellungen für den Mailversand in Contact Form 7.

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.

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
Passe den Nachrichtentext für die Benachrichtigungs-E-Mails des Contact Form 7 an.

Passe den Nachrichtentext für die Benachrichtigungs-E-Mails des Contact Form 7 an.

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.

Füge Dateianhänge in die Benachrichtigungs-E-Mails des Contact Form 7 ein.

Füge Dateianhänge in die Benachrichtigungs-E-Mails des Contact Form 7 ein.

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.

Situationsbezogene Nachrichten in Contact Form 7 anpassen.

Situationsbezogene Nachrichten in Contact Form 7 anpassen.

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.

Registriere eine neue Seite für die Integration von reCAPTCHA.

Registriere eine neue Seite für die Integration von reCAPTCHA.

Geh das Anmeldeformular durch, um dein reCAPTCHA zu erstellen.

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.

Google reCAPTCHA Seite und Sicherheitsschlüssel.

Google reCAPTCHA Seite und Sicherheitsschlüssel.

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.

Konfiguriere reCAPTCHA im Contact Form 7.

Konfiguriere reCAPTCHA im Contact Form 7.

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.

WordPress Kontaktformular geschützt durch reCAPTCHA V3.

WordPress Kontaktformular geschützt durch reCAPTCHA V3.

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

Schütze dein Kontaktformular mit Cloudflare.

Schütze dein Kontaktformular mit Cloudflare.

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

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.

Lass dein Publikum nicht nur lesen. 👀 Nimm direkten Kontakt mit deinen Lesern und potentiellen Kunden über das Contact Form 7 Plugin auf ⬇️Click to Tweet

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!


Spare Zeit, Kosten und maximiere die Leistung deiner Seite mit:

  • Schnelle Hilfe von WordPress Hosting Experten, 24/7.
  • Cloudflare Enterprise Integration.
  • Globale Reichweite mit 28 Rechenzentren weltweit.
  • Optimierung mit unserem integrierten Application Performance Monitoring.

All das und noch viel mehr, in einem Plan ohne langfristige Verträge, betreute Migrationen und eine 30-Tage-Geld-zurück-Garantie. Schau Dir hier unsere Pakete an oder sprich mit dem Vertrieb, um den richtigen Tarif für dich zu finden.