1. Wie E-Mail-Vorlagen funktionieren

Easy Form Builder verwendet einen Drag-and-Drop-E-Mail-Vorlagen-Editor, der Designdaten in einer JSON-Struktur namens EFBDATA speichert.
Wenn ein Formular abgeschickt wird, liest das Plugin die EFBDATA, rendert jeden Block in E-Mail-kompatibles HTML (mittels Tabellen, Inline-Styles und VML für Outlook) und versendet das Ergebnis über wp_mail().

Verarbeitungspipeline

2. E-Mail-Block-Referenz

Der E-Mail-Vorlagen-Editor unterstützt die folgenden Blöcke. Jeder Block wird als E-Mail-kompatibles, tabellenbasiertes HTML mit Inline-CSS gerendert.

3. Globale Einstellungen

Globale Einstellungen gelten für die gesamte E-Mail-Vorlage und beeinflussen alle Blöcke.

4. E-Mail-Zustellungsprobleme

❌ Problem: E-Mails werden überhaupt nicht gesendet

Ursache: WordPress verwendet standardmäßig die PHP-Funktion mail(), die auf Ihrem Hosting möglicherweise deaktiviert oder falsch konfiguriert ist.

Lösung:

• Installieren Sie ein SMTP-Plugin wie WP Mail SMTP, Post SMTP oder FluentSMTP.
• Konfigurieren Sie das SMTP-Plugin mit den Einstellungen Ihres E-Mail-Anbieters (Gmail, Outlook, SendGrid usw.).
• Nutzen Sie die Test-E-Mail-Funktion des SMTP-Plugins, um die Zustellung zu überprüfen.
• Prüfen Sie das WordPress-Fehlerprotokoll unter wp-content/debug.log auf PHP-Mail-Fehler.

❌ Problem: E-Mails werden gesendet, kommen aber nicht an

Ursache: Die E-Mail wird von WordPress gesendet, wird aber vom E-Mail-Anbieter des Empfängers abgelehnt oder gefiltert.

Lösung:

• Prüfen Sie den Spam-/Junk-Ordner des Empfängers.
• Stellen Sie sicher, dass Ihre Domain über korrekte SPF-, DKIM– und DMARC-DNS-Einträge verfügt.
• Vermeiden Sie kostenlose E-Mail-Adressen (gmail.com, yahoo.com) als Absenderadresse — verwenden Sie Ihre eigene Domain.
• Kontaktieren Sie Ihren Hosting-Anbieter, um zu bestätigen, dass ausgehende E-Mails nicht auf Port 25/587 blockiert werden.

❌ Problem: E-Mails werden verzögert zugestellt

Ursache: Einige Hosting-Anbieter stellen E-Mails in Warteschlangen oder der SMTP-Server hat Ratenbegrenzungen.

Lösung:

• Verwenden Sie einen dedizierten Transaktions-E-Mail-Dienst (SendGrid, Mailgun, Amazon SES) für zuverlässige und schnelle Zustellung.
• Prüfen Sie, ob Ihr Hosting E-Mail-Versandlimits hat, und passen Sie diese entsprechend an.

5. Darstellung in verschiedenen E-Mail-Clients

Verschiedene E-Mail-Clients haben sehr unterschiedliche HTML/CSS-Unterstützung. Folgendes ist zu erwarten:

6. Probleme mit dem Header-Block

❌ Problem: Header-Farbverlauf wird in Outlook als Vollfarbe angezeigt

Ursache: Microsoft Outlook (Desktop) verwendet die Word-Rendering-Engine, die keine CSS-Farbverläufe unterstützt.

Lösung: Dies ist erwartetes Verhalten. Das Plugin extrahiert automatisch die erste Farbe Ihres Farbverlaufs und verwendet diese als einfarbigen Hintergrund-Fallback für Outlook. Der Farbverlauf wird in Gmail, Apple Mail, Yahoo und webbasierten Clients korrekt angezeigt.

❌ Problem: Header-Hintergrundfarbe wird nicht angezeigt

Ursache: Der Dunkelmodus in E-Mail-Clients kann Hintergrundfarben überschreiben.

Lösung:

• Dies wird vom E-Mail-Client gesteuert und kann vom Absender nicht überschrieben werden.
• Wählen Sie Farben, die sowohl im hellen als auch im dunklen Modus gut lesbar sind.
• Testen Sie Ihre E-Mail, indem Sie eine Vorschau an sich selbst senden und den Dunkelmodus auf Ihrem Handy prüfen.

7. Probleme mit dem Logo-Block

❌ Problem: Logo-Bild wird nicht angezeigt

Ursache: Die Logo-Bild-URL ist nicht öffentlich zugänglich, oder Bilder werden vom E-Mail-Client blockiert.

Lösung:

• Stellen Sie sicher, dass das Logo in Ihre WordPress-Mediathek hochgeladen ist (keine externe URL, die blockiert werden könnte).
• Überprüfen Sie, ob die Bild-URL von außerhalb Ihres Netzwerks erreichbar ist — öffnen Sie sie in einem Inkognito-Browserfenster.
• Wenn Ihre Website HTTP (nicht HTTPS) verwendet, blockieren manche E-Mail-Clients das Bild. Verwenden Sie HTTPS.
• Einige E-Mail-Clients blockieren Bilder standardmäßig. Fügen Sie einen beschreibenden Alt-Text hinzu.

❌ Problem: Logo erscheint zu groß oder zu klein

Ursache: Die Breiteneinstellung im Editor stimmt nicht mit den tatsächlichen Bildabmessungen überein.

Lösung: Passen Sie die Breiten-Einstellung in den Logo-Block-Eigenschaften an. Die empfohlene Logo-Breite für E-Mails beträgt zwischen 100px und 200px.

8. Probleme mit Text- & Titel-Blöcken

❌ Problem: Schriftart entspricht nicht der Editor-Vorschau

Ursache: E-Mail-Clients unterstützen keine Web-Schriftarten. Die im Editor sichtbare Schriftart ist möglicherweise auf dem Gerät des Empfängers nicht verfügbar.

Lösung:

• Verwenden Sie systemsichere Schriften: Arial, Verdana, Tahoma, Georgia, Segoe UI, Trebuchet MS.
• Der Fallback-Schriftarten-Stack gewährleistet die Lesbarkeit, auch wenn die primäre Schriftart nicht verfügbar ist.

❌ Problem: Textfarbe sieht im Dunkelmodus anders aus

Ursache: Gmail, Outlook und Apple Mail haben Dunkelmodus-Funktionen, die Text- und Hintergrundfarben invertieren oder verändern können.

Lösung:

• Vermeiden Sie sehr hellen Text auf weißen Hintergründen (wird im Dunkelmodus unsichtbar).
• Verwenden Sie ausreichend Kontrast zwischen Text- und Hintergrundfarben.
• Testen Sie, indem Sie den Dunkelmodus in Ihrem E-Mail-Client aktivieren, bevor Sie an Ihre Benutzer senden.

❌ Problem: RTL-Text wird als LTR angezeigt

Ursache: Die E-Mail-Richtungseinstellung stimmt nicht mit der Inhaltssprache überein.

Lösung: Das Plugin erkennt RTL automatisch aus Ihrer WordPress-Spracheinstellung. Wenn Ihre Inhalte auf Arabisch, Persisch oder Hebräisch sind, stellen Sie sicher, dass WordPress unter Einstellungen > Allgemein > Website-Sprache korrekt konfiguriert ist.

9. Probleme mit dem Nachrichten-Block

❌ Problem: Nachrichten-Block zeigt „shortcode_message“ statt Formulardaten

Ursache: Die Formular-Übermittlungsdaten wurden nicht korrekt an den E-Mail-Renderer übergeben.

Lösung:

• Stellen Sie sicher, dass das Formular mindestens ein Feld enthält (z.B. Name, E-Mail oder Nachricht).
• Vergewissern Sie sich, dass das Formular korrekt gespeichert und veröffentlicht ist.
• Prüfen Sie wp-content/debug.log auf PHP-Fehler im Zusammenhang mit der Formularübermittlung.
• Versuchen Sie, die E-Mail-Vorlage im E-Mail-Vorlagen-Editor erneut zu speichern.

❌ Problem: Formulardaten werden angezeigt, aber ohne Formatierung

Ursache: Der Nachrichten-Block rendert die Formulardaten so wie sie sind. Komplexes HTML in Formularantworten wird möglicherweise nicht gestylt.

Lösung: Der Nachrichten-Block übernimmt die Schriftart-, Farb- und Ausrichtungseinstellungen aus seinem Eigenschaften-Panel. Passen Sie diese Einstellungen im Editor an Ihr Design an.

10. Probleme mit dem Button-Block

❌ Problem: Button hat weißen Hintergrund und weißen Text in Outlook

Ursache: Ältere Versionen des Plugins verwendeten reine CSS-Buttons, die Outlooks Word-basierter Renderer nicht darstellen konnte.

Lösung: Dieses Problem wurde behoben. Das Plugin verwendet jetzt VML (Vector Markup Language) zum Rendern von Buttons in Outlook. Buttons werden in allen Outlook-Versionen mit der korrekten Hintergrundfarbe und Textfarbe angezeigt. Stellen Sie sicher, dass Sie Version 4.0 oder höher verwenden.

❌ Problem: Button-Hintergrundfarbe wird in Gmail entfernt

Ursache: Gmail entfernt CSS-Farbverlauf-Hintergründe von Links.

Lösung: Das Plugin verwendet eine einfarbige background-color statt Farbverläufen für Buttons. Dies gewährleistet eine konsistente Darstellung in Gmail und allen anderen Clients. Wenn Ihr Button immer noch ohne Hintergrund erscheint, speichern Sie die E-Mail-Vorlage erneut.

❌ Problem: Button-Rahmenradius wird in Outlook nicht angezeigt

Ursache: Outlook unterstützt kein CSS border-radius.

Lösung: Der VML-Fallback für Outlook verwendet arcsize, um abgerundete Ecken anzunähern. Das Ergebnis ist möglicherweise nicht pixelgenau im Vergleich zu anderen Clients. Dies ist eine bekannte Outlook-Einschränkung.

❌ Problem: Button-Farbe stimmt nicht mit dem Editor überein

Ursache: Der Button verwendet die globalen Einstellungen für Button-Hintergrund und Textfarbe.

Lösung: Prüfen Sie das Globale Einstellungen-Panel im E-Mail-Vorlagen-Editor. Die Einstellungen „Button-Hintergrundfarbe“ und „Button-Textfarbe“ steuern die Standardfarben für alle Buttons.

11. Probleme mit dem Bild-Block

❌ Problem: Bild wird in der E-Mail nicht angezeigt

Ursache: Die Bild-URL ist nicht öffentlich zugänglich oder der E-Mail-Client blockiert Bilder standardmäßig.

Lösung:

• Laden Sie Bilder in Ihre WordPress-Mediathek hoch. Verwenden Sie keine localhost-URLs — diese sind vom E-Mail-Client des Empfängers nicht erreichbar.
• Stellen Sie sicher, dass Ihre Website HTTPS verwendet. Viele E-Mail-Clients blockieren über HTTP bereitgestellte Bilder.
• Öffnen Sie die Bild-URL in einem privaten Browserfenster, um das Laden zu bestätigen.
• Fügen Sie einen beschreibenden Alt-Text hinzu, damit Benutzer während des Ladens aussagekräftige Informationen sehen.

❌ Problem: Bild ist auf Mobilgeräten zu breit

Ursache: Die Bildbreite überschreitet die Bildschirmgröße auf Mobilgeräten.

Lösung: Das Plugin enthält eine responsive CSS-Regel (max-width: 100%), die Bilder auf Mobilgeräten automatisch verkleinert. Wenn Sie eine prozentuale Breite verwenden (z.B. 100%), passen sich Bilder automatisch an den Container an.

❌ Problem: Bild-Link ist nicht anklickbar

Ursache: Das Link-Feld im Editor ist leer oder enthält eine ungültige URL.

Lösung: Öffnen Sie die Bild-Block-Einstellungen und überprüfen Sie, ob die Link-URL mit https:// beginnt.

12. Probleme mit Trennlinie & Abstand

❌ Problem: Trennlinie (Divider) nicht sichtbar

Ursache: Die Trennlinienfarbe ist der Inhaltshintergrundfarbe zu ähnlich.

Lösung: Ändern Sie die Trennlinienfarbe in den Block-Einstellungen, um mehr Kontrast mit dem Hintergrund zu erzeugen. Prüfen Sie außerdem, ob die Stärke der Trennlinie mindestens 1px beträgt.

❌ Problem: Spacer-Höhe wird in Outlook ignoriert

Ursache: Einige Outlook-Versionen reduzieren leere Tabellenzellen.

Lösung: Das Plugin verwendet ein  -Zeichen in Spacer-Zellen, um das Reduzieren zu verhindern. Wenn der Spacer in Outlook immer noch kürzer als erwartet erscheint, versuchen Sie, die Höhe leicht zu erhöhen.

13. Probleme mit dem Spalten-Block

❌ Problem: Spalten werden in Outlook nicht nebeneinander angezeigt

Ursache: Outlook respektiert manchmal prozentuale Tabellenbreiten nicht korrekt.

Lösung: Das Plugin verwendet ein tabellenbasiertes Layout (48% | 4% Abstand | 48%), das Outlook unterstützt. Wenn Spalten dennoch gestapelt werden, ist der Inhalt in einer Spalte möglicherweise zu breit. Halten Sie den Spalteninhalt kompakt.

❌ Problem: Spalten stapeln sich auf Mobilgeräten

Ursache: Dies ist ein absichtliches responsives Verhalten. Auf Bildschirmen schmaler als 600px werden Spalten für bessere Lesbarkeit vertikal gestapelt.

Lösung: Keine Aktion erforderlich. Dies ist das korrekte Verhalten für Mobilgeräte.

14. Probleme mit dem Social-Block

❌ Problem: Social-Icons werden in E-Mails nicht angezeigt

Ursache: Social-Icons werden als PNG-Bilder gerendert, die auf Ihrem Server gehostet werden. Wenn der Server nicht öffentlich zugänglich ist (z.B. localhost, Staging hinter einer Firewall), kann der E-Mail-Client die Bilder nicht laden.

Lösung:

• Stellen Sie sicher, dass Ihre WordPress-Website öffentlich über das Internet zugänglich ist (nicht localhost).
• Überprüfen Sie, ob die Plugin-Dateien vollständig sind. Die Icon-Dateien befinden sich unter: public/assets/images/social/.
• Vergewissern Sie sich, dass das Verzeichnis wp-content/uploads/ beschreibbar ist (das Plugin speichert dort umgefärbte Icons).
• Senden Sie nach dem Speichern der Social-Icons im Editor eine Test-E-Mail an sich selbst, um das Erscheinen zu überprüfen.

❌ Problem: Social-Icons zeigen falsche Farbe

Ursache: Die Icon-Farbe wurde im Editor geändert, aber das gecachte farbige Icon wurde nicht neu generiert.

Lösung:

• Das Plugin generiert automatisch eine farbspezifische Version jedes Icons und speichert sie in wp-content/uploads/efb-icons/.
• Wenn Icons die falsche Farbe zeigen, löschen Sie den Ordner wp-content/uploads/efb-icons/. Das Plugin regeneriert die Icons beim nächsten E-Mail-Versand.

❌ Problem: Einige Social-Icons fehlen, andere werden korrekt angezeigt

Ursache: Eine bestimmte PNG-Datei fehlt möglicherweise aus dem Plugin-Verzeichnis.

Lösung:

• Prüfen Sie, ob die Datei public/assets/images/social/{icon-name}.png für das fehlende Icon vorhanden ist.
• Installieren Sie das Plugin neu oder aktualisieren Sie es, um fehlende Icons wiederherzustellen.
• Wenn nur ein einzelnes Icon fehlt, zeigt die E-Mail stattdessen einen textbasierten Emoji-Fallback.

Unterstützte Social-Icons

15. Probleme mit dem Footer-Block

❌ Problem: Footer-Text abgeschnitten oder fehlend

Ursache: Einige E-Mail-Clients (insbesondere Gmail) kürzen E-Mails, die ungefähr 102 KB überschreiten.

Lösung:

• Halten Sie Ihre E-Mail-Vorlage kompakt. Vermeiden Sie übermäßig große HTML-Blöcke.
• Wenn Gmail „[Nachricht gekürzt] Gesamte Nachricht anzeigen“ anzeigt, hat die HTML-Gesamtgröße das Limit überschritten.
• Entfernen Sie unnötige Blöcke oder reduzieren Sie den Textumfang, um die Größe unter das Limit zu bringen.

❌ Problem: Footer-Hintergrundfarbe stimmt nicht überein

Ursache: Der Footer-Block hat seine eigene bgColor-Einstellung. Wenn diese nicht explizit gesetzt ist, wird standardmäßig der globale contentBgColor verwendet.

Lösung: Öffnen Sie die Footer-Block-Einstellungen im Editor und setzen Sie die Hintergrundfarbe explizit.

16. Probleme mit dem HTML-Block

❌ Problem: Benutzerdefiniertes HTML wird nicht korrekt gerendert

Ursache: E-Mail-Clients haben im Vergleich zu Webbrowsern eine sehr begrenzte HTML/CSS-Unterstützung.

Lösung:

• Verwenden Sie ausschließlich tabellenbasierte Layouts anstatt div, flexbox oder grid.
• Verwenden Sie ausschließlich Inline-CSS (style="..."). E-Mail-Clients entfernen <style>-Blöcke und externe Stylesheets.
• Verwenden Sie keine <script>-Tags — JavaScript wird von allen E-Mail-Clients entfernt.
• Verwenden Sie keine SVG-Bilder oder base64-kodierte Bilder — Gmail und Outlook zeigen diese nicht an.
• Verwenden Sie absolute URLs für alle Bilder (z.B. https://ihredomain.de/bild.png).

Sichere HTML-Tags für den HTML-Block

17. E-Mails landen im Spam

❌ Problem: E-Mails landen konsequent im Spam-Ordner

Ursache: Mehrere Faktoren können Spam-Filter auslösen.

Lösung: Prüfen und beheben Sie jeden der folgenden Punkte:

18. Debugging-Checkliste

Verwenden Sie diese Checkliste bei der Fehlerbehebung von E-Mail-Problemen:

🐛 WordPress-Debug-Protokollierung aktivieren

Fügen Sie Folgendes zu Ihrer wp-config.php-Datei hinzu (vor der Zeile „That’s all, stop editing!“):

Schicken Sie nach der Aktivierung ein Formular ab und prüfen Sie die Protokolldatei unter wp-content/debug.log auf Fehler.