Divi 5 Kontaktformular: Schritt für Schritt zur perfekten Kontaktseite

Die wichtigsten Fragen und Antworten in Kürze:

Das Divi 5 Kontaktformular ist eines der wichtigsten Werkzeuge auf Deiner Website. Ein gutes Formular reduziert Reibung, erhöht Anfragen und sorgt dafür, dass Kunden den Weg zu Dir wirklich finden. Hier erkläre ich Dir praxisnah, wie Du das Divi 5 Kontaktformular einrichtest, sicher gegen Spam machst, E-Mails zuverlässig zustellst und das Formular optisch passend gestaltest.

Warum das Divi 5 Kontaktformular so wichtig ist

Ein Kontaktformular ist die Tür zwischen Besucher und Dir. Wenn es zu kompliziert ist, springt der Nutzer ab. Wenn Nachrichten nicht ankommen, verpasst Du Leads. Mit dem Divi 5 Kontaktformular kannst Du beides verhindern: Du gestaltest möglichst einfache Eingaben und sorgst gleichzeitig für zuverlässige Zustellung.

Grundaufbau: So fügst Du das Divi 5 Kontaktformular ein

Die grundlegenden Schritte sind simpel. Kurz und knapp:

• Neue Sektion und Zeile anlegen.
• Kontaktformular-Modul einfügen (Standard: Name, E-Mail, Nachricht).
• Wenige Felder verwenden – Keep it simple.

Wichtig: halte die Hürde für Nutzer so niedrig wie möglich. Telefonnummer, Adresse und zusätzliche Felder packst Du nur dann rein, wenn Du sie wirklich brauchst. Sonst sinkt die Conversion.

Felder anpassen: IDs, Reihenfolge und Beschriftungen

Bei Feldern gibt es zwei Dinge, die Du konsequent machen solltest:

• Feld-IDs immer klein schreiben (z. B. name, email, nachricht). Das vermeidet Probleme beim Einfügen in das spätere Meldungsschema.
• Beschriftungen klar und deutsch halten (z. B. „E-Mail-Adresse“ statt „E-Mail“).

Reihenfolge per Drag & Drop ändern: Betreff über die Nachricht ziehen, Telefonnummer nur anzeigen, wenn sie relevant, usw.

Bedingte Logik: Nur relevante Felder zeigen

Ein richtig cooles Feature im Divi 5 Kontaktformular ist die bedingte Logik. Beispiel: Du fragst „Wie möchtest Du kontaktiert werden?“ als Radio-Button mit Optionen E-Mail, Telefon, WhatsApp. Dann blendest Du das Telefonfeld nur ein, wenn „Telefon“ gewählt wurde.

• Feld „kontakt_art“ anlegen (Radio-Buttons: E-Mail, Telefon, WhatsApp).
• Telefon-Feld anlegen mit ID telefon.
• Bedingte Logik aktivieren: zeige telefon nur, wenn kontakt_art == Telefon.

Das ist super für die Usability: Nutzer sehen nur das, was für sie relevant ist. Außerdem vermeidest Du unnötigen Datenkram.

Divi Meldungsschema und E-Mail-Einstellungen (sehr wichtig)

Das Feld „E-Mail-Adresse“ im Modul bestimmt, wohin die Anfragen gesendet werden. Zusätzlich musst Du ein Meldungsschema definieren, damit Name, E-Mail, Betreff und Nachricht korrekt in der Mail landen. Wenn Du die Feld-IDs sauber klein geschrieben hast, funktioniert das zuverlässig.

Beispiel Meldungsschema

Neue Nachricht von Kontaktformular Startseite:
Name: %%name%%
E-Mail: %%email%%
Betreff: %%betreff%%
Nachricht: %%nachricht%%

Wichtig:

• Nutze die doppelten Prozentzeichen genau so.
• Keine doppelten IDs auf der gesamten Website – sonst geht es schief, wenn Du mehrere Formulare hast.
• Lege eine klare Erfolgsmeldung fest (z. B. „Vielen Dank für Deine Nachricht! Du erhältst in Kürze eine Antwort.“).

Spam-Schutz: Was ist sinnvoll und DSGVO-konform?

Divi bringt ein simples Rechen-Captcha mit, das viele Bots abfängt. Das Google reCAPTCHA in Divi ist effektiv, aber in vielen Fällen nicht DSGVO-konform. Meine Empfehlung: setze auf eine Honeypot-Lösung, die für Menschen unsichtbar ist, aber Bots in die Falle laufen lässt.

Plugin-Tipp: WP Armor (Honeypot). Es ist einfach zu installieren, braucht keine Konfiguration und ist DSGVO-freundlich. Aktiviere das Plugin und Deine Formulare sind deutlich besser gegen Spam geschützt. Du kannst das Divi Captcha zusätzlich deaktivieren, wenn Du die Honeypot-Lösung einsetzt. So vermeidest Du zusätzliche Hürden für Nutzer.

Warum Du SMTP einrichten solltest (Mails kommen sonst nicht an)

WordPress verschickt Mails standardmäßig über eine PHP-Funktion. Das ist oft unzuverlässig: Mails landen im Spam oder kommen gar nicht an. Setze besser auf SMTP über Deinen Mailprovider.

• Empfohlene Plugins: Post SMTP oder Fluent SMTP.
• WP Mail SMTP ist oft installiert, aber ich empfehle Post SMTP wegen integriertem E-Mail-Protokoll (Logging) in der kostenlosen Version.
• Nach der Plugin-Installation musst Du das Plugin mit Deinem E-Mail-Provider verbinden (SMTP-Server, Port, Authentifizierung oder OAuth je nach Anbieter).

Das E-Mail-Protokoll des POST SMTP Plugins ist Gold wert: Du siehst, ob Mails gesendet wurden, und kannst Probleme nachvollziehen, ohne lange zu raten.

Optik: So bekommst Du ein ansprechendes Layout Deines Divi Kontaktformulars

Ein sauberes Layout hilft bei der Conversion. Kleines Rezept für ein modernes Kontaktfeld im Divi 5 Kontaktformular:

• Sektion mit Hintergrundfarbe (z. B. leichtes Grau oder Akzentfarbe) anlegen.
• Das Kontaktformular in eine erste Spalte setzen, Kontaktinfos in die rechte Spalte.
• Formular-Hintergrund weiß setzen, mit Padding 20px und leichtem Box-Shadow der Spalte für Tiefe.
• Ecken abrunden (z. B. 5px) und Button farblich hervorheben (Hintergrundfarbe + Rahmenfarbe + Textfarbe).

Du kannst für Icons im Kontaktinfo-Bereich das Informationstext-Modul verwenden und Icons neben Text platzieren (E-Mail, Telefon, Adresse). Denk daran, Mailto-Links mailto:deine@adresse.de und Tel-Links tel:+49123456789 zu setzen, damit Nutzer mit einem Klick handeln können.

Muss ich eine Checkbox für die Datenschutzerklärung einfügen?

Das ist umstritten. Ich leist keine Rechtsberatung zu diesem Thema und berichte aus meinen persönlichen Erfahrungen als Webdesigner. Demnach reicht ein hinzugefügter Satz wie: „Deinen Daten werden gemäß der Datenschutzerklärung verarbeitet“. Dabei sollte die Datenschutzerklärung verlinkt sein.

Spezialtipps & Fehlerbehebung

• Keine doppelten Feld-IDs: Verwendest Du mehrfach dieselbe ID auf der Seite, kann das zu falschen oder fehlenden Daten in der Mail führen.
• Erfolgstext und Redirects: Du kannst nach dem Absenden auf eine Danke-Seite weiterleiten oder nur eine Erfolgsmeldung anzeigen. Dankeseiten eignen sich für Cross-Selling oder Terminvereinbarungen.
• Barrierefreiheit: Beschriftungen klar halten, Button deutlich benennen („Absenden“), Platz für Fehlermeldungen lassen.
• Google Maps und Cookies: Wenn Du eine Karte einbindest, prüfe Cookie-Compliance. Alternativ einfach einen Link zu Google Maps setzen ( DSGVO-Überlegungen beachten ).

PDF Upload im Divi Kontaktformular

Eine Funktion für das Hochladen von PDF-Dateien oder anderen Datei-Anhängen bietet das Divi Kontaktformular von Haus aus leider nicht. Aber Du kannst zusätzlich den Divi Contact Form Helper nutzen, der diese Funktion unterstützt. Der Divi Contact Form Helper ist mit Divi 5 zu 100% kompatibel.

Funktionen des Plugins sind:

• 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

Praxis-Checkliste für ein funktionierendes Divi 5 Kontaktformular

1. Formular-Modul einfügen und nur notwendige Felder nutzen.
2. Feld-IDs in Kleinbuchstaben anlegen.
3. Meldungsschema mit %%platzhaltern%% einrichten.
4. Spam-Schutz (Honeypot / WP Armor) aktivieren, reCAPTCHA nur mit Datenschutzkonzept einsetzen.
5. SMTP-Plugin (Post SMTP oder Fluent SMTP) installieren und konfigurieren.
6. Optik anpassen: Hintergrund, Padding, Box-Shadow, Button-Farben.
7. Mailto- und tel-Links für Kontaktinfos setzen.
8. Mehrere Formulare: eindeutige IDs sicherstellen.

Beispiele für Meldungsschemas und Texte

Nutze klare und freundliche Texte:

• Erfolgsmeldung: Vielen Dank für Deine Nachricht! Du erhältst in Kürze eine Antwort.
• Meldungsschema (für E-Mail-Body): siehe Beispiel oben.

Neue Nachricht von Kontaktformular Startseite:
Name: %%name%%
E-Mail: %%email%%
Betreff: %%betreff%%
Nachricht: %%nachricht%%

Häufige Probleme und schnelle Lösungen

Divi Kontaktformular Fehler

Typische Stolperfallen beim Divi 5 Kontaktformular:

• Keine Mails? -> SMTP nicht konfiguriert oder Hosting blockiert Mailversand. Lösung: Plugin Post SMTP einrichten oder Host kontaktieren.
• Spamflut trotz Captcha? -> Honeypot-Plugin installieren (z. B. WP Armor).
• Platzhalter erscheinen nicht? -> Feld-IDs nicht exakt oder falsche Schreibweise (Groß-/Kleinschreibung).
• Danke-Seite nicht aufrufbar? -> Redirect-URL prüfen, relative vs. absolute URL beachten.

Abschlussgedanken

Das Divi 5 Kontaktformular bietet alles, was Du brauchst: einfache Felder, bedingte Logiken, Spam-Schutz und Styling-Möglichkeiten. Kombiniert mit einem zuverlässigen SMTP-Plugin und einem Honeypot-Plugin erhältst Du ein Formular, das Anfragen zuverlässig liefert und Kunden nicht abschreckt.

Wenn Du die oben genannten Schritte durchgehst—saubere Feld-IDs, Meldungsschema, SMTP, Honeypot und ein ansprechendes Design—dann läuft Dein Kontaktformular stabil und professionell. Viel Erfolg beim Umsetzen und beim Sammeln guter Anfragen.

Erfahre mehr über Divi, beispielsweise: Divi 5 Reihenfolge von Spalten mobil ändern — schnell per Klick