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:
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.
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.
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.
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.
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 gleich → Telefon. Das Ergebnis sieht dann wie folgt aus:
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.
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.
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.
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.
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.
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.
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
Das ist sehr gut erklärt! Vielen Dank!
Wie kann ich beim DIVI Formular (und Helper) einstellen, dass in den Eingabefeldern Umlaute (ü, ö, ä) erlaubt sind? Bei meinem Formular wird das immer als „nicht erlaubtes Zeichen“ angezeigt.
Viele Grüße
Hallo Paul,
vielen Dank für dein positives Feedback, freut mich sehr, dass dir der Guide gefallen hat!
Zu deiner Frage bezüglich der Umlaute: In der Standardkonfiguration von Divi und auch mit dem Divi Helper sollten Umlaute wie „ü, ö, ä“ eigentlich erlaubt sein. Wenn sie in deinem Formular als „nicht erlaubtes Zeichen“ angezeigt werden, dann solltest du mal überprüfen ob deine Website auf UTF 8 eingestellt ist (sollte eigl Standardmäßig so sein). Dazu im Quelltext mal nach „UTF“ oder „UTF-8“ suchen. Falls du es nicht findest, liegt es daran.
Viel Erfolg
Jetzt nachträglich ist mir noch etwas eingefallen, was wahrscheinlicher ist. Vermutlich hast du den Typ der möglichen Eingabe in dem jeweiligen Feld auf nur Text (A-Z oder so) beschränkt. Das solltest du als erstes überprüfen.
Vielen Dank für die Hilfe,
ich konnte das Problem lösen. bei manchen Feldern war A-Z eingestellt. Da gehören Ü, Ö, Ä nicht dazu.
Wie kann ich den Overlay vom Button verändern ? Wenn ich darüber gehe wird es weiß
Hallo Daniel,
wenn das nicht über die Design Einstellungen geht, dann probiere es über den Theme Customizer. Ggfs. hast du globale Button Einstellungen, die den Hover dort regeln.
Grüße
Hallo, wie kann ich denn dein Vorschlag eines Kontaktformular in der Divi Bibliothek so abspeichern das ich es auf Seite und Beiträge einfügen kann ? Das geht irgendwie nicht
Hallo Daniel,
du kannst Sections (blauer Kasten), Reihen (grüner Kasten) oder Module (grauer Kasten) in der Bibliothek speichern, indem du mit der Maus über das jeweilige Element fährst und dann entweder a) auf die drei Punkte klickst und dann auf „In Divi Bibliothek speichern“ oder direkt auf das „In Bibliothek speichern“ Modul klickst. Alternativ funktioniert bei Divi auch Copy und Paste auf verschiedenen Seite. Dazu brauchst du einfach nur ein zweites Browser-Fenster.
Beste Grüße
Lukas