Divi Kontaktformular einrichten – Kompletter Guide (2024)

Divi Kontaktformular einrichten und gestalten
Lukas Fischer

Geschrieben von Lukas Fischer

c

In diesem Artikel wirst du anfängerfreundlich und kompakt alle Informationen bekommen, um das Divi Kontaktformular einzurichten. Du wirst lernen, wie du das Formular in deine Webseite integrierst, wie du verschiedene Arten von Formularfeldern hinzufügst und welche Einstellungen wichtig sind, damit dein Formular fehlerfrei funktioniert.

Darüber hinaus schauen wir uns an, wie du häufig auftretende Fehler bezüglich des Kontaktformulars von Beginn an vermeidest bzw. wie du diese Fehler im Nachhinein behebst. Zudem werfen wir einen Blick darauf, an welchen Stellen das Divi Kontaktformular an seine Grenzen stößt und welche Lösungen es dafür gibt.

Abschließend wirst du lernen, auf was du bezüglich der DSGVO achten muss, damit dein Kontaktformular auch der aktuellen Gesetzeslage entspricht.

Hinweis: Mit Aktivierung des Videos wird YouTube im Erweiterten Datenschutzmodus aktiviert. Mit Aktivierung stimmst du den Datenschutzbestimmungen von YouTube zu.

Divi Kontaktformular in Webseite einbinden

Um dein Kontaktformular in deine Webseite einzubinden, benötigst du kein zusätzliches Plugin. Falls du dieser Anleitung folgen möchtest, füge zunächst eine Reihe mit dieser Spaltenaufteilung durch Klick auf das grüne Pus-Symbol hinzu:

Reihe hinzufügen und Spaltenstruktur auswählen
Reihe hinzufügen und Spaltenstruktur auswählen

Um das Kontaktformular in deine Seite einzubinden, klicke auf das graue Plus-Symbol in der linken Spalte, suche das im Divi Builder bereits integrierte Kontaktformular Modul heraus und füge es der Seite hinzu. Um das Modul schneller zu finden, kannst du die Suchfunktion benutzen.

Divi Kontaktformular in Webseite einbinden
Divi Kontaktformular in Webseite einbinden

Du hast nun das Standardformular eingefügt, bei welchem die Felder Name, E-Mail Adresse und Nachricht sowie das Basic Captcha Feld bereits für dich vorhanden sind. Im nächsten Schritt schauen wir uns an, wie du diese Felder anpasst oder neue hinzufügst.

Formularfelder ins Divi Kontaktformular einfügen

Wichtiger Tipp bevor du startest: Halte dein Kontaktformular immer so einfach wie möglich und verzichte auf unnötig viele Felder. Frage dich: Welche Felder brauchst du wirklich? In den meisten Fällen sollte eine Kombination aus Name, E-Mail Adresse und Nachricht als Pflichtfeld ausreichen.

Diese Vorgehensweise sorgt nachweislich dafür, dass dein Formular häufiger abgesendet wird. Darüber hinaus kannst du natürlich auch Felder hinzufügen, die optional sind (z.B. die Telefonnummer).

Wie das Hinzufügen eines neuen Feldes im Divi Builder funktioniert und welche Feld-Optionen man hat, schauen wir uns am Beispiel eines Formularfeldes für den Betreff an.

Um ein neues Feld hinzuzufügen, fahre mit der Maus über das Kontaktformular Modul und öffne mit Klick auf das Zahnrad die Moduleinstellungen. Du findest nun eine Übersicht deiner bisherigen Felder vor. Klicke unterhalb dieser Liste auf Neues Feld hinzufügen.

Neues Feld im Divi Kontaktformular einfügen
Neues Feld im Divi Kontaktformular einfügen

Jetzt musst du für dein neues Feld noch eine individuelle ID und einen Titel vergeben. Die ID dient der internen Identifikation des Feldes (wozu das wichtig ist mehr im nächsten Schritt) und der Titel wird später oberhalb des Feldes für deinen Webseiten-Besucher angezeigt. Trage hier Folgendes ein:

  • ID: betreff
  • Titel: Betreff

Nachdem du dies eingetragen hast, kannst du mit den Feld-Optionen weitermachen.

Die verschiedenen Formularfelder und Feld Optionen

Nachdem du dein neues Feld hinzugefügt hast, musst du nun bestimmen, welche Art von Feld du nutzen möchtest. Unter Typ kannst du zwischen verschiedenen Feldarten wählen.

Divi Kontaktformular Feld Optionen
Divi Kontaktformular Feld Optionen

Wann machen die verschiedenen Feldarten Sinn?

  • Eingabefeld: für simple Eingaben wie Vorname, Nachname, Adresse, Betreff; grundsätzlich alles, was als Text selbst eingegeben werden muss und in eine Zeile passt
  • E-Mail-Feld: ausschließlich für E-Mail Adressen nutzen
  • Textarea: wenn der Nutzer Text eingeben soll und eine Zeile nicht ausreicht; für generelle Nachrichten oder die Beantwortung von Fragen geeignet
  • Kontrollkästchen: wenn du eine Checkbox hinzufügen möchtest; kann auch dazu genutzt werden um DSGVO und/oder AGB Zustimmung einzuholen
  • Radio Buttons: bei weniger als 5 Optionen und wenn der Nutzer alle Antwortmöglichkeiten sehen soll
  • Dropdown-Liste: bei mehr als 5 Optionen; wenn es egal ist, ob der Nutzer direkt alle Optionen sieht

Um bei unserem Beispiel eines Formularfeldes für den Betreff einer Nachricht zu bleiben, macht also nur das Eingabefeld Sinn, mit welchem der Nutzer einen kurzen Betreff selbst formulieren kann.

Mindest- und Höchstlänge:
Über Mindest- und Höchstlänge könntest du die Eingaben deiner Nutzer nun beschränken. Bei einem Betreff-Feld würde ich dies allerdings nicht tun. Bei Textarea-Feldern kann dies unter Umständen Sinn ergeben, wenn du möchtest, dass sich die Verfasser der Nachrichten kurz halten sollen.

Erlaubte Symbole:
Mit der Funktion Erlaubte Symbole kannst du bestimmen, welche Zeichen für ein bestimmtes Formularfeld erlaubt sind – und welche wiederum nicht. Dies könnte unter Umständen bei der Abfrage einer Telefonnummer Sinn ergeben. Ich persönlich würde allerdings darauf verzichten, da eine internationale Telefonnummer ja auch ein vorangestelltes Plus-Zeichen enthalten kann. Wenn der Nutzer dieses nicht direkt eingeben kann, könnte es daher zur Verwirrung kommen.

Feld erforderlich machen:
Abschließend kannst du noch per Ja-Nein-Abfrage bestimmen, ob dein Feld verpflichtend sein soll – oder eben nicht. Im Fall eines Betreff-Feldes würde ich dieses als nicht verpflichtend deklarieren. In einem solchen Fall kannst du dies auch über den im vorherigen Schritt definierten Titel kommunizieren und dort Betreff (optional) eintragen.

Bedingte Logik:
Du kannst in deinem Divi Kontaktformular Bedingte Logik einsetzen, um bestimmte Formularfelder nur anzeigen zu lassen, wenn bestimmte Kriterien erfüllt sind. Ein Beispiel: Du fragst in deinem Formular ab, über welche Kontaktart du dich bevorzugt beim Absender der Nachricht zurückmelden sollst.

Du machst diese Abfrage per Radio-Buttons und gibst deinem Besucher die Wahl zwischen Telefon, E-Mail und Instagram, Wählt der Absender Telefon, kannst du mit Hilfe der Bedingten Logik nun ein extra Feld für die Telefonnummer anzeigen lassen, was nur erscheint, wenn der Nutzer Telefon gewählt hat.

Divi Kontaktformular Bedingte Logik einsetzen
Divi Kontaktformular Bedingte Logik einsetzen

Um die Bedingte Logik zu aktivieren, füge zunächst ein neues Feld hinzu, welches nur erscheinen soll, wenn eine bestimmte Bedingung erfüllt ist. In diesem Fall ist dies ein Feld für die Telefonnummer. Klicke dazu in der Feld-Übersicht des Kontaktformulars auf Neues Feld hinzufügen und aktiviere dann bei diesem Feld die Bedingte Logik.

Unter Regeln legst du nun die entsprechende Bedingung fest. In diesem Beispiel wäre das Wie soll ich dich kontaktieren?ist gleichTelefon. Das Ergebnis sieht dann wie folgt aus:

Divi Kontaktformular Feld erscheint nachdem eine bestimmte Bedingung erfüllt ist
Divi Kontaktformular Feld erscheint nachdem eine bestimmte Bedingung erfüllt ist

Um diesen Schritt abzuschließen, kannst du nun alle Felder hinzufügen, die du für dein Formular benötigst.

Kontaktformular richtig einstellen (wichtig)

Nachdem dein Formular nun auf der Seite eingebunden und mit den richtigen Formularfeldern befüllt ist, musst du noch einige wichtige Einstellungen treffen, die dein Formular als solches betreffen. Diese Einstellungen werden dafür sorgen, dass dein Formular ordnungsgemäß funktioniert. Fahre dazu mit der Maus über dein Kontaktformular-Modul und öffne mit Klick auf das Zahnrad-Symbol die Moduleinstellungen.

Divi Kontaktformular Einstellungen öffnen
Divi Kontaktformular Einstellungen öffnen

1. Kontaktformular Moduleinstellungen Text:

In den Einstellungen angekommen findest du nun deine Formularfelder vor. Scrolle etwas herunter bis zu der Option Text. Hier machst du folgende Angaben:

  • Titel: Nur ausfüllen, wenn du möchtest, dass oberhalb deines Formulars ein für den Nutzer sichtbarer Name für dein Formular angezeigt wird; ich persönlich lasse dies immer leer und gestalte die Seite mit dem Kontaktformular selbst.
  • Erfolgsmeldung: Die Erfolgsmeldung wird angezeigt, sobald dein Nutzer das Formular abgesendet hat. Hier solltest du auf jeden Fall immer etwas eintragen. Gerne kannst du meinen Satz kopieren: “Vielen Dank für deine Nachricht! Ich melde mich umgehend bei dir!”
  • Absendebutton: Über diese Einstellung kannst du den Text deines Absendebuttons individualisieren. Ich gebe hier in der Regel das Wort Absenden! ein.

2. Kontaktformular Moduleinstellungen E-Mail-Adresse:

Nachdem du unter Text alle Einstellungen getroffen hast, scrolle etwas herunter und mache weiter mit den Einstellungen unter E-Mail-Adresse. Hier folgt nun mit der Angabe der Ziel-E-Mail-Adresse der wichtigste Part des gesamten Formulars.

E-Mail-Adresse:
Bei E-Mail-Adresse gibst du also nun deine persönliche E-Mail Adresse ein, an welche die Eingaben des Formulars gesendet werden sollen. ACHTUNG: Wenn du das Feld leer lässt, wird keine E-Mail bei dir über dein Kontaktformular ankommen!

Meldungsschema:
Bei Meldungsschema kannst du nun selbst bestimmen, wie die Daten des Formulars an dich übermittelt werden sollen. Ich persönliche schreibe in die erste Zeile einen Satz wie “Neue Nachricht von Kontaktformular XY – über lukas-fischer.de”, damit ich direkt zu Beginn weiß von welcher Webseite die Nachricht stammt und um welches Kontaktformular es sich genau handelt. Dieser Zusatz ist vor allem dann wichtig, wenn du mehr als ein Formular nutzt und dient deiner eigenen statistischen Auswertung.

Danach kannst du dann sämtliche Formularfelder in folgendem Format auflisten, um den Inhalt des Formulars übersichtlich an dich zu übermitteln:

  • Name: %%name%%
  • E-Mail-Adresse: %%email%%
  • Betreff %%betreff%%
  • Nachricht: %%nachricht%%

Bei den Angaben zwischen den Prozentzeichen handelt es sich hierbei um die eindeutige Feld ID, die du in den vorherigen Schritten individuell für jedes Feld vergeben hast. Du findest sie auch nochmal in der Übersicht deiner Formularfelder. Zwischen den Prozentzeichen musst du also zwingend die gleiche Schreibweise verwenden, wie in deiner Feldübersicht dargestellt.

Divi Kontaktformular Feld IDs nachschauen
Divi Kontaktformular Feld IDs nachschauen

Bei der Vergabe deiner IDs achte darauf, dass diese einzigartig sind und allesamt kleingeschrieben sind. Dies beugt zukünftige Fehler vor. Ebenso kannst du auf diese Weise den häufigen “Fehler” umgehen, dass der Absender der Nachricht nicht angezeigt wird. Mehr zu diesem Fehler findest du über diesen Link auch an späterer Stelle des Artikels.

Hier kannst du dir abschließend noch meinen Text für das Meldungsschema kopieren. Aber Achtung: Du musst diesen natürlich auf deine individuelle Situation bzw. deine Felder anpassen:

Neue Nachricht von Kontaktformular XY - deine-domain.de: 

Name: %%name%%
E-Mail-Adresse: %%email%%
Betreff  %%betreff%%
Nachricht: %%nachricht%%

3. Weiterleitung nach Absenden des Formulars (optional)

Umleiten:
Der Vollständigkeit halber möchte ich an dieser Stelle noch die Option der Weiterleitung nach erfolgreichem Absenden des Formulars erwähnen. Wenn du möchtest, dass dein Besucher nach Absenden des Formulars auf einer anderen Seite landet, kannst du unter Umleiten deine gewünschte Ziel-URL eintragen.

Diese Methode macht vor allem dann Sinn, wenn du deinem Besucher nach Absenden noch weitere Informationen mit auf den Weg geben möchtest.

Google ReCAPTCHA deaktivieren (DSGVO)

Damit dein Kontaktformular DSGVO konform bleibt, sollte der Spamschutzdienst Google ReCAPTCHA bei dir immer deaktiviert sein. Das aktuell größte Problem von ReCAPTCHA ist, dass auch über diesen Dienst Google Fonts geladen werden.

Google Fonts hatten in der Vergangenheit für größere Abmahnwellen gesorgt. Wenn du mehr darüber erfahren möchtest, wie du Divi DSGVO konform nutzt, dann lies gerne auch diesen Artikel.

Um zu überprüfen, ob diese Funktion deaktiviert ist, navigiere in den Modul-Einstellungen des Kontaktformulars zum Unterpunkt Spamschutz.

Divi Kontaktformular DSGVO konform machen und Spamschutz von Google ReCAPTCHA deaktivieren
Spamschutz von Google ReCAPTCHA deaktivieren

Hier wählst du bei “Verwenden Sie einen Spamschutz Dienst” NEIN aus. Falls du diese Option zuvor schon einmal aktiviert hattest, solltest du vor der Deaktivierung einmal schauen, dass du dein ReCAPTCHA Account ebenfalls entfernst. Danach solltest du den Punkt “Verwenden Sie einfaches Captcha” mit JA aktivieren.

Der einfache Spamschutz reicht in den meisten Fällen völlig aus und sorgt dafür, dass das Kontaktformular nur abgesendet werden kann, wenn zuvor eine Rechenaufgabe erfüllt wurde (Keine Sorge, die Aufgaben sind auch mit Mathe-Schwäche gut lösbar).

DSGVO Checkbox im Divi Kontaktformular einfügen

Um dein Kontaktformular über den Spamschutz hinaus DSGVO konform nutzen zu können, solltest du eine kleine Checkbox hinzufügen, mit welcher der Nutzer bestätigt, dass er deine Datenschutzrichtlinie akzeptiert.

Diesbezüglich gab es nach Rechtsanwalt Sören Siebert von erecht24.de zwar bislang keine Abmahnungen, allerdings entschied, dass OLG Köln, dass man über das Kontaktformular in der Datenschutzerklärung aufklären muss (s. Schritt 4 dieses Artikels) und je nach Interpretation des Urteils auch eine Checkbox von Nöten sein kann.

Die Umsetzung einer solchen Checkbox ist aus technischer Sicht ziemlich einfach. Deswegen würde ich dir empfehlen diese Checkbox vorsorglich in dein Formular einzubauen. Denn dann bist du auf der sicheren Seite, falls es zukünftig weitere Urteile hierzu geben wird.

DSGVO-Checkbox einfügen:
Um die DSGVO Checkbox in Divi umzusetzen, öffne die Modul-Einstellungen des Kontaktformulars und füge durch Klick auf Neues Feld hinzufügen ein neues Feld hinzu. Bei den Textoptionen des neuen Feldes gibst du folgendes ein:

  • Feld ID: datenschutz
  • Titel: Datenschutz

Wähle dann unter Feld-Optionen das Kontrollkästchen aus und klicke bei Erforderliches Feld auf JA.

DSGVO Checkbox im Divi Kontaktformular hinzufügen - Schritt 1
DSGVO Checkbox im Divi Kontaktformular hinzufügen – Schritt 1

Als nächstes musst du noch bei den Optionen des Kontrollkästchens einen kurzen Text einfügen sowie deine Datenschutzerklärung verlinken. Als Text schreibst du:

Ich akzeptiere die Datenschutzerklärung.

DSGVO Checkbox im Divi Kontaktformular hinzufügen - Schritt 2
DSGVO Checkbox im Divi Kontaktformular hinzufügen – Schritt 2

Danach klickst du auf das Link-Symbol und fügst dort den Link zu deiner Datenschutzerklärung ein. Kopiere dazu einfach die URL deiner Datenschutz-Seite.

DSGVO Checkbox im Divi Kontaktformular hinzufügen - Schritt 3
DSGVO Checkbox im Divi Kontaktformular hinzufügen – Schritt 3

Klicke abschließend auf den grünen Pfeil und speichere dein neues Feld. Du hast die Checkbox erfolgreich deinem Formular hinzugefügt.

Divi Kontaktformular sendet nicht

Wie bei allen Kontaktformularen kann es auch beim Divi Kontaktformular dazu kommen, dass Fehler entstehen. Aus diesem Grund habe ich dir ein weiteres Video aufgenommen, bei welchem ich die Lösung für die häufigsten Fehler gezeigt habe:

Hinweis: Mit Aktivierung des Videos wird YouTube im Erweiterten Datenschutzmodus aktiviert. Mit Aktivierung stimmst du den Datenschutzbestimmungen von YouTube zu.

Schau zudem gerne auch in meinen Artikel zum Thema Divi Kontaktformular sendet und funktioniert nicht.

Divi Kontaktformular Fehler: Absender wird nicht angezeigt

Falls du vor dem Problem stehen solltest, dass du eine E-Mail über dein Kontaktformular erhalten hast aber die E-Mail Adresse des Absenders nicht angezeigt bekommst, kann ich dich beruhigen: Die Absender E-Mail Adresse ist nicht weg! Denn ohne diese Angabe hätte das Formular ja gar nicht erst abgesendet werden können!

Um die E-Mail Adresse des Absenders deines Divi Kontaktformulars herauszufinden, klicke bei deiner erhaltenen E-Mail einfach auf Antworten. Die Absender-Adresse sollte nun wie gewohnt in der Empfänger-Zeile deines E-Mail Programms zu sehen sein, damit du antworten kannst.

Um diesem “Problem” vorzubeugen, solltest du das Meldungsschema deines Divi Kontaktformulars wie in diesem Artikel bereits hier beschrieben einrichten. Die Absende-Adresse wird dann zusätzlich auch im Klartext der E-Mail an dich übertragen.

Darüber hinaus solltest du generell den E-Mail Versand deiner WordPress-Installation auf SMTP umstellen. Standardmäßig sendet WordPress E-Mails über eine interne PHP-Funktion. Dies könnte auf Dauer dazu führen, dass deine Mails häufiger im Spam Ordner landen. Und das willst du ja nicht.

Eine Anleitung zur Umstellung des Mailversands auf SMTP, welche du in ca. 5 Minuten umsetzen kannst, findest du hier. Vertrau mir, es lohnt sich!

Divi Kontaktformular Fehler: Email kommt nicht an

Wenn eine E-Mail, die über das Divi Kontaktformular losgeschickt wurde, nicht bei dir ankommt solltest du folgende Dinge kontrollieren:

  • Hast du in deinem Formular die korrekte Zieladresse eingetragen? Um dies zu überprüfen, schaue in den Modul-Einstellungen deines Kontaktformulars unter E-Mail-Adresse nach, ob hier die korrekte Ziel E-Mail Adresse ohne Rechtschreib- und Zeichenfehler steht
  • Hast du die E-Mail Versandmethode deiner WordPress-Installation umgestellt? Falls nein, solltest du dies jetzt nachholen. Eine Anleitung samt Video findest du hier (sonst könnten deine Nachrichten eher im Spam Ordner landen).
  • Hast du ein Caching-System aktiv, was ggfs. für Probleme sorgt? Deaktiviere es vorübergehend und schaue, ob E-Mails danach wieder ordnungsgemäß bei dir ankommen

Divi Kontaktformular kann nicht abgesendet werden

Wenn dein Kontaktformular nicht abgesendet werden kann, liegt es in den meisten Fällen an diesen zwei Gründen:

  • You must be human to submit this form Fehler:
    Dieser Fehler liegt in den Spamschutz-Einstellungen deines Formulars begründet. Mögliche Ursachen könnten hierbei sein, dass dein ReCAPTCHA Account falsch hinterlegt oder erst gar kein Account ausgewählt wurde. Ebenso kann eine Kombination aus Spamschutzdienst UND einfacher Captchaabfrage für Probleme sorgen.

    Die Lösung:
    Falls du Google ReCAPTCHA als Spamschutz aktiviert hast, empfehle ich dir diese Einstellung zu deaktivieren, da Google ReCAPTCHA aus Sicht der DSGVO sowieso kritisch ist. Aktiviere stattdessen lediglich das Einfache Captcha.
  • Formular kann generell nicht abgesendet werden:
    Falls dein Formular nicht abgesendet werden kann, obwohl du die Spamschutzeinstellungen wie hier beschrieben getroffen hast, liegt es vermutlich an deinem Caching-Tool. Caching-Tools haben bei meinen Divi Kontaktformularen schon oft für Probleme gesorgt, weshalb ich diese auf meiner Kontakt-Seite immer deaktiviere. Die meisten Caching-Tools bieten die Option bestimmte Seiten vom Caching auszuschließen.

Kontaktformular um fehlende Funktionen erweitern

Mit dem Divi Contact Form Helper* von Pee-Aye Creative kannst du dein Divi Kontaktformular um unzählige Funktionen erweitern, die es von Haus aus bei Divi nicht gibt. Dazu zählen unter anderem:

  • Datei Uploads (individuelle Gestaltung möglich)
  • Bestätigungsemail
  • Datums- und Zeit Auswahl
  • Export von Einträgen in Datenbank
  • Betreff ändern
  • SMTP Verknüpfung
  • Mehr integrierte Designmöglichkeiten

Mit * gekennzeichnete Links sind Empfehlungslinks. Wenn du über diesen Link einen Kauf tätigst, erhalte ich ein bisschen Geld für meinen nächsten Kaffee ☕

Für dich verändert sich der Preis dadurch natürlich nicht und du unterstützt damit kostenlos meinen Blog/YouTube Kanal. Selbstverständlich empfehle ich nur Produkte, die ich selbst nutze und getestet habe.

Lukas Fischer

Hey, ich bin Lukas Fischer und auf meinem Blog schreibe ich über WordPress und das Divi Theme! Vielen Dank, dass du da bist!

27. September 2023

YouTube Kanal

Auf meinem YouTube Kanal findest du zu jedem meiner Artikel das entsprechende Video sowie zusätzliche Inhalte.

Borlabs Cookie Gutschein Code LUKASFISCHER

Spare 5% auf Borlabs Cookie – Das beste Cookie Consent Tool auf dem Markt

Top 11 Divi Plugins - E-Book von Lukas Fischer
Lukas Fischer Newsletter Anmeldung

Bleib in Kontakt und trage dich in meinen Newsletter ein:

Abonniere gerne meinen 0€ Newsletter und erhalte Tipps zu WordPress, Divi, Webdesign und der DSGVO.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert