E-Mail-Template-Editor (WYSIWYG) im Detail

E-Mail-Template-Editor: Benachrichtigungs-Mails visuell gestalten

Der E-Mail-Template-Editor von Funnelforms ist ein WYSIWYG-Editor (what you see is what you got), mit dem du Benachrichtigungs-E-Mails an dich (Admin) oder an den ausfüllenden Kunden (User) gestaltest. Du kannst Überschriften, Listen und Formatierungen visuell setzen, Formularfeld-Variablen einfügen, Bilder und Links einbinden und bei Bedarf in einen HTML-Modus wechseln. Dieser Artikel zeigt dir alle Funktionen Schritt für Schritt.

Voraussetzungen

Du befindest dich im Funnelforms-Formular-Editor.
Unter Einstellungen → E-Mail-Service ist ein Versandweg ausgewählt und gespeichert. Ohne aktiven Versandweg wird beim Live-Submit keine Mail rausgehen.

Wo finden

E-Mail-Admin-Benachrichtigung mit markiertem Visuellen Editor im HTML-Modus

Formular-Editor → Benachr. → Tab E-Mail-Benachrichtigungen → eine Admin- oder User-Mail aktivieren und öffnen. Der Editor-Bereich erscheint direkt unter Betreff und Empfänger-Konfiguration.

Funktionen

Visuelle Bearbeitung mit Toolbar: Überschriften H1, H2, H3, H4, Absätze, Listen (geordnet und ungeordnet), Fett, Kursiv, Unterstrichen.
Ausrichtung: links, zentriert, rechts.
Formularfeld-Variablen: über das Panel Formularfeld-Variablen rechts neben dem Editor — ein Klick auf eine Variable fügt sie an der aktuellen Cursor-Position ein.
Links und Bilder über einen Dialog einfügen — entweder per URL oder direkt aus dem Datei-Upload.
Tabellen mit frei wählbarer Zeilen- und Spaltenanzahl.
Textfarbe über einen Hex-Code festlegen.
HTML-Modus zum direkten Bearbeiten des Markups, wenn der visuelle Editor an Grenzen stößt.
Aktiver Block (z. B. H2) wird in der Toolbar markiert, damit du deine aktuelle Stelle im Dokument schnell erkennst.
Undo und Redo über die Toolbar.

Schritt-für-Schritt: E-Mail-Template gestalten

Im Tab E-Mail-Benachrichtigungen die gewünschte Mail (Admin oder User) aktivieren.
Betreff und Empfänger setzen.
Im Editor-Bereich den Cursor in den Body klicken und Text eingeben.
Über die Toolbar Überschriften, Listen oder Hervorhebungen setzen.
Im Panel Formularfeld-Variablen rechts neben dem Editor auf die gewünschte Variable klicken — sie wird an der aktuellen Cursor-Position als Platzhalter eingefügt.
Bei Bedarf den Link- oder Bild-Dialog öffnen und URL/Datei wählen.
Für eigene Layouts in den HTML-Modus wechseln und das Markup direkt bearbeiten.
Speichern und eine Test-Submission ausführen, um das Ergebnis im realen Posteingang zu prüfen.

Wann visueller Editor, wann HTML-Modus?

Der visuelle Editor reicht für 90 % der Fälle: Begrüßung, Antwort-Übersicht, kurze CTA. Schalte erst dann in den HTML-Modus, wenn du ein präzises Layout (z. B. zweispaltige Tabelle, eigene Inline-Styles) brauchst. HTML aus Dritt-Tools wie Newsletter-Buildern kann oft nur eingeschränkt übernommen werden, weil viele E-Mail-Clients fortgeschrittenes CSS ignorieren.

Best Practices

Pro Mail nur ein Thema: kürzere E-Mails werden zuverlässiger gelesen als lange Wall-of-Text-Mails.
Variablen erst füllen, dann formatieren: erst {{name}}, {{email}} setzen, dann Fett/Kursiv vergeben — vermeidet leere Formatierungen.
Bilder extern hosten: stabile URLs (eigene Domain oder etablierter Hoster) statt temporärer Links.
Inline-Styles statt externer CSS-Dateien: viele E-Mail-Clients ignorieren externe Styles vollständig.
HTML-Modus nur, wenn nötig: der visuelle Editor ist langfristig leichter zu pflegen.

Häufige Stolpersteine

Eine Variable wird nicht ersetzt: der Variablen-Name muss exakt einem Formularfeld-Namen entsprechen (Groß-/Kleinschreibung beachten). Über das Panel Formularfeld-Variablen rechts neben dem Editor wird der Name automatisch korrekt eingefügt.
Formatierung sieht in Outlook anders aus als in Gmail: bekannter Effekt — Outlook interpretiert CSS deutlich enger. Im Zweifel auf Inline-Styles und einfache Tabellen ausweichen.
Datums-Variable erscheint als ISO-String: Datumswerte werden in Funnelforms standardmäßig als DD.MM.YYYY ausgegeben. Wenn doch ein ISO-Format auftaucht, prüfe das betroffene Formularfeld auf benutzerdefinierte Logik.
HTML-Modus löscht meine Formatierung: nur in den HTML-Modus wechseln, wenn du das Markup wirklich bearbeiten willst. Beim Zurückwechseln können nicht standardisierte Inline-Styles entfernt werden.

Tipps & Hinweise

Sende dir nach jeder Änderung eine echte Test-Submission. Test-Versand im Editor zeigt das Layout nicht so zuverlässig wie ein echter Posteingang.
Halte Bilder unter ~600 px Breite — die meisten Mail-Clients zeigen Mails im 600-px-Layout an.
Die Variable {{all_responses}} liefert automatisch alle Formularantworten als saubere Tabelle (im HTML-Body) oder als Liste (im Plain-Text-Body).

Häufige Fragen

Kann ich dasselbe Template für mehrere Formulare nutzen? Templates werden heute pro Formular gepflegt. Du kannst den Inhalt aber per Copy & Paste in andere Formulare übernehmen.

Welche HTML-Tags unterstützt der Editor? Alle gängigen E-Mail-tauglichen Tags: h1–h4, p, strong, em, u, ul/ol/li, a, img, table/tr/td, blockquote. Exotische Tags werden beim Rendern verworfen.

Werden Inline-Styles in allen Mail-Clients dargestellt? Die meisten ja. Outlook (vor allem in der Windows-App) ignoriert manche Properties — vor dem Live-Gang in den Zielclients testen.

Wo finde ich die Variablen-Liste? Rechts neben dem Editor zeigt das Panel Formularfeld-Variablen alle verfügbaren Variablen aus den Formularfeldern des aktuellen Formulars. Ein Klick fügt die Variable an der Cursor-Position ein.