Vorlagen-Editor

Eine Vorlage ist die E-Mail, die Frontmail rendert und versendet: Betreff, Empfänger, HTML- und Textversion sowie ein Schema der Parameter, die Ihr Formular oder Ihr Code ausfüllt. Diese Seite führt durch die Vorlagenliste und alle Bereiche des Editors. Die Grundlagen dahinter erklären HTML-Vorlagen, Handlebars und Parameter und Typen.

Zum Erstellen und Bearbeiten von Vorlagen brauchen Sie die Rolle Inhaber, Admin oder Entwickler. Betrachter und Mitglieder mit der Rolle Abrechnung öffnen Vorlagen mit Nur Lesezugriff – sie sehen alles und können Exportieren (.json) verwenden, aber nichts ändern oder senden.

Die Vorlagenliste

Öffnen Sie Vorlagen in der Seitenleiste.

Jede Zeile zeigt den Namen (Name, mit der Beschreibung darunter), die Vorlagen-ID (tpl_…, die Sie in Ihrem Code brauchen), die Sprache, die Anzahl der Parameter und wann die Vorlage Geändert wurde, zusammen mit der aktuellen Version (z. B. vor 2 Stunden · v3).

Vorlagenlimit und eingefrorene Vorlagen

Wie viele Vorlagen Sie anlegen können, hängt von Ihrem Tarif ab – Free 3, Starter 10, Pro und Business unlimited. Ist das Limit erreicht, steht über der Liste Sie nutzen 3 von 3 Vorlagen Ihres Tarifs. und die Schaltflächen für neue Vorlagen sind deaktiviert. Inhaber und Mitglieder mit der Rolle Abrechnung sehen direkt dort die Schaltfläche Upgrade.

Nach einem Downgrade werden Vorlagen über dem neuen Limit Eingefroren (diejenigen, die am längsten nicht geändert wurden). Eine eingefrorene Vorlage behält Inhalt und Versionen, aber der Versand damit schlägt fehl, bis Sie wieder upgraden. Siehe Tarifänderungen.

Vorlage erstellen

Über der Liste gibt es drei Schaltflächen.

Neue Vorlage (von Grund auf)

1. Klicken Sie auf Neue Vorlage.
2. Geben Sie unter Name einen Namen ein und wählen Sie die Sprache (z. B. Deutsch).
3. Klicken Sie auf Erstellen.

Diese Sprache wird zur Standardsprache der Vorlage. Sie können sie später unter Einstellungen → Allgemein → Standardsprache auf jede beliebige Sprache umstellen und in der Leiste Sprachen weitere Sprachen hinzufügen.

Die neue Vorlage beginnt als einfache Kontaktformular-E-Mail: Parameter name, email und message, An ist Ihre eigene Adresse und Reply-To ist {{email}}. Das CAPTCHA ist aktiviert, wenn Ihre Organisation ihre Turnstile-Schlüssel hinterlegt hat, sonst ist es zunächst aus. Passen Sie die Vorlage an Ihre Bedürfnisse an.

Aus der Galerie

1. Klicken Sie auf Aus der Galerie.
2. Wählen Sie oben rechts die Sprache und filtern Sie nach Kategorie (Formulare, Geschäftlich, Buchungen, E-Commerce, …).
3. Klicken Sie auf Vorschau, um eine Vorlage in voller Größe zu sehen.
4. Klicken Sie auf Vorlage verwenden. In Ihrer Organisation wird eine Kopie erstellt und im Editor geöffnet.

Galerie-Vorlagen sind responsiv, unterstützen den Dark Mode und bringen Beispieldaten mit. Siehe Vorlagengalerie.

Importieren

1. Klicken Sie auf Importieren.
2. Wählen Sie entweder eine Datei – eine .html-Datei oder eine aus Frontmail exportierte Vorlage (.json) – oder fügen Sie HTML unter Oder HTML einfügen ein. Dateien dürfen bis zu 2 MB groß sein.
3. Prüfen Sie den Namen (Name) und klicken Sie auf Importieren.

Ein .json-Export bringt Inhalt, Parameter, Sprachvarianten und die meisten Einstellungen mit. E-Mail-Dienst, Ersatzdienst und die Vorlage für die automatische Antwort sind nicht Teil des Exports – legen Sie sie unter Einstellungen neu fest. Nach dem Import von reinem HTML öffnen Sie Parameter und klicken auf Aus Vorlage erkennen.

Der Editor im Überblick

Die Kopfzeile zeigt den Namen der Vorlage, ihre Version (z. B. v3) und Kennzeichnungen: Ungespeicherte Änderungen, solange Sie Änderungen haben, sowie Eingefroren und Nur Lesezugriff, wenn das zutrifft. Rechts finden Sie:

• Test senden – siehe Test-E-Mails,
• Speichern – siehe Speichern,
• Weitere Aktionen (⋯) – Exportieren (.json), HTML ersetzen und Löschen.

Unter der Kopfzeile folgt die Leiste Sprachen, darunter vier Tabs: Inhalt, Einstellungen, Snippets und Versionen.

Sprachen

Die Leiste Sprachen zeigt die Standardsprache der Vorlage (gekennzeichnet mit Standard) und je einen Chip pro Übersetzung. Klicken Sie auf eine Sprache, um sie zu bearbeiten; alles in den Tabs darunter bezieht sich dann auf diese Sprache. Eine Übersetzung kann die Kennzeichnungen Veraltet (die Standardsprache wurde seit ihrem Speichern geändert) oder Maschinell (maschinell übersetzt) tragen.

• Sprache hinzufügen – fügt eine Übersetzung hinzu: als Kopie der Standardsprache, als maschinelle Übersetzung mit dem eigenen API-Schlüssel Ihrer Organisation oder leer.
• Bei ausgewählter Übersetzung: Neu übersetzen, Als aktuell markieren (bei einer veralteten) und Sprache löschen.

Übersetzt werden nur Betreff, HTML, Text und Absendername – Empfänger, Parameter und Einstellungen gelten für alle Sprachen. Siehe Übersetzungen von Vorlagen.

Inhalt

Links bearbeiten Sie, rechts sehen Sie die Live-Vorschau und die Prüfungen. Oben steht das Feld Betreff, darunter gibt es fünf Unter-Tabs.

HTML

Ein vollwertiger Code-Editor für den HTML-Inhalt mit Handlebars-Hervorhebung. Tippen Sie {{, um Vorschläge für Ihre Parameter, Helper wie #if und #each sowie Systemvariablen zu erhalten. Siehe den Handlebars-Leitfaden.

Visuell

Ein einfacher Rich-Text-Editor für Vorlagen, die hauptsächlich aus Text bestehen: Fett, Kursiv, Überschrift 1, Überschrift 2, Listen, Zitat, Link, Rückgängig/Wiederholen und Parameter einfügen. Er bearbeitet nur den Inhalt von <body>; Head und Styles bleiben unverändert.

Viele Vorlagen sind dafür zu aufwendig. Verwendet das HTML Layout-Tabellen, Inline-Styles, divs oder Bilder, Handlebars-Blöcke (#if, #each) oder CSS-Klassen, sehen Sie Diese Vorlage ist für den visuellen Editor zu komplex mit den Gründen. Sie haben zwei Möglichkeiten:

• Weiter im HTML bearbeiten – zurück zum Code-Editor (empfohlen),
• Trotzdem bearbeiten (vereinfachen) – öffnet den visuellen Editor; beim Speichern von dort geht das Layout verloren und nur einfache Formatierung bleibt erhalten.

Text

Die Nur-Text-Version, die zusammen mit dem HTML gesendet wird. Standardmäßig wird sie automatisch aus dem HTML erzeugt (Die Textversion wird automatisch aus dem HTML erzeugt.). Klicken Sie auf Selbst schreiben, um sie von Hand zu bearbeiten – der aktuell erzeugte Text dient als Ausgangspunkt. Die automatische Erzeugung schalten Sie unter Einstellungen → Nachricht → Textversion automatisch erzeugen wieder ein.

Beispieldaten

Ein aus Ihren Parametern erzeugtes Formular. Die Werte werden für die Vorschau und für Test-E-Mails verwendet – mit echten E-Mails werden sie nie gesendet. Listen haben Eintrag hinzufügen, Nach oben, Nach unten und Eintrag entfernen. Verletzt ein Wert eine Regel (zu lang, falscher Typ, fehlender Pflichtwert), zeigt das Feld den Fehler an – genau wie die API.

Parameter

Das Parameterschema: Name, Typ jedes Parameters und ob er ein Pflichtfeld ist.

Parameter aus der Vorlage erkennen

1. Verwenden Sie Ihre Parameter im HTML, im Betreff oder bei den Empfängern, z. B. {{name}}.
2. Klicken Sie auf Aus Vorlage erkennen.

Frontmail fügt jeden gefundenen Parameter hinzu und meldet, wie viele neu waren (2 neue Parameter gefunden.). Den Typ leitet Frontmail aus dem Namen und der Verwendung ab (ein Parameter in {{#each}} wird zum Beispiel eine Liste) – prüfen Sie Typen und Regeln anschließend.

Parameter hinzufügen oder bearbeiten

1. Klicken Sie auf Parameter hinzufügen oder auf den Stift neben einem vorhandenen Parameter.
2. Füllen Sie aus:
   • Name – Buchstaben, Ziffern, _ und -, muss eindeutig sein,
   • Typ – Text (einzeilig), Text (mehrzeilig), E-Mail, URL, Zahl, Ja / Nein, Datum, Auswahl, HTML (bereinigt) oder Liste,
   • Bezeichnung und Beschreibung – werden im Beispieldaten-Formular angezeigt,
   • Pflichtfeld,
   • Regeln für den Typ: Min. Länge, Max. Länge und Muster (Regex) für Texttypen, Minimum/Maximum für Zahlen, Erlaubte Werte für eine Auswahl (durch Kommas getrennt), Felder der Einträge und Min. Einträge/Max. Einträge für Listen (z. B. name:string!, qty:number – ! bedeutet Pflichtfeld),
   • Standardwert und Beispielwert (JSON für Listen).
3. Klicken Sie auf Speichern.

Einen Parameter entfernen Sie mit dem Papierkorb-Symbol. Typen und Regeln erklärt Parameter und Typen.

Live-Vorschau

Die Vorschau rendert die Vorlage während des Tippens genau so wie der Versand – mit Ihren Beispieldaten. Darüber können Sie umschalten:

• Desktop / Mobil – die Breite der Vorschau,
• Hell / Dunkel – simuliert ein E-Mail-Programm im Dark Mode (Ihre prefers-color-scheme-Styles),
• HTML / Text – die HTML-Version oder die Nur-Text-Version.

Über der E-Mail sehen Sie den gerenderten Betreff, An und Reply-To. Lässt sich die Vorlage nicht rendern (zum Beispiel wegen eines nicht geschlossenen {{#if}}), erscheint Die Vorlage kann nicht gerendert werden mit dem Fehler. Im Free-Tarif enthält die Vorschau die Fußzeile Gesendet mit Frontmail – genau wie echte E-Mails. Mehr dazu unter Vorschau und Testversand.

Prüfungen

Unter der Vorschau listet Prüfungen Probleme schon beim Tippen auf – zum Beispiel verwendete, aber nicht definierte Parameter, definierte, aber unbenutzte Parameter, ungültiges Handlebars, fehlende alt-Texte oder eine zu große E-Mail. Jeder Eintrag ist ein Fehler oder eine Warnung, oft mit Zeilennummer. Der Tab Inhalt zeigt die Anzahl der Probleme als Badge. Alles in Ordnung. bedeutet, dass es nichts zu beheben gibt.

Fehler verhindern das Speichern von Inhaltsänderungen (Beheben Sie vor dem Speichern die Fehler in den Prüfungen.), Warnungen nicht.

Einstellungen

Allgemein

• Name und Beschreibung – für Sie und Ihr Team.
• Standardsprache – die Sprache des Hauptinhalts. Sie wird versendet, wenn der Absender keine Sprache angibt oder eine, die die Vorlage nicht hat. Jede Sprache ist möglich. Sie bestimmt außerdem das Format von Datum und Zahlen sowie die Fußzeile im Free-Tarif für E-Mails in dieser Sprache.

Nachricht

Alle Felder können Parameter enthalten, z. B. {{name}}.

• Betreff (dasselbe Feld wie auf dem Tab Inhalt).
• An – mehrere Adressen trennen Sie durch Kommas.
• Absendername und Absenderadresse – der Absender muss einer sein, den Ihr E-Mail-Dienst verwenden darf. Lassen Sie Absenderadresse leer, um den Standardabsender des Dienstes zu verwenden.
• Reply-To, CC, BCC.
• CSS beim Speichern inline setzen – verschiebt Styles in style-Attribute, weil viele E-Mail-Programme <style> ignorieren.
• Textversion automatisch erzeugen – empfohlen; die Textversion wird bei jedem Speichern aus dem HTML erzeugt.

Zustellung

• Dienst – welcher E-Mail-Dienst diese Vorlage versendet. Standarddienst folgt dem Dienst, der gerade als Standard eingestellt ist.
• Ersatzdienst – wird automatisch verwendet, wenn der Hauptdienst ausfällt. Wählen Sie Keiner, wenn Sie keinen Ersatz möchten. Siehe Ersatzdienst.
• Vorlage für automatische Antwort – eine weitere Vorlage, die nach dem Versand dieser E-Mail an die Person geht, die das Formular abgeschickt hat. Siehe Automatische Antwort.

Schutz

• CAPTCHA verlangen (Turnstile) – empfohlen für öffentliche Formulare; stoppt Bots, bevor sie Sie Credits kosten. Bei neuen Vorlagen ist es aktiv, sobald Ihre Organisation eigene Turnstile-Schlüssel unter Sicherheit → Bot-Schutz (Turnstile) hinterlegt hat. Ohne Schlüssel lässt sich der Schalter nicht aktivieren und ein Hinweis verlinkt auf die Seite Sicherheit. Ist Mobile Apps erlauben aktiv, können Sie ihn trotzdem einschalten – der Editor warnt dann, dass mobile Apps funktionieren (sie verwenden den gemeinsamen Schlüssel von Frontmail), Anfragen von Websites aber mit captcha_not_configured fehlschlagen, bis Sie Schlüssel hinterlegen. Siehe Turnstile.
• Dynamischen Empfänger erlauben – Parameter dürfen An/CC/BCC festlegen. Mit dem öffentlichen Schlüssel ist der Inhalt einer solchen Vorlage gesperrt: CAPTCHA ist Pflicht, Absenderadresse, Absendername und Reply-To müssen fest sein, HTML-Parameter werden nicht angenommen, Texte sind auf 500 Zeichen begrenzt und Links dürfen nur auf erlaubte Domains zeigen. Ohne CAPTCHA zeigt der Editor eine Warnung mit einem Link zur Einrichtung von Turnstile – oder Sie senden die Vorlage mit einem privaten Schlüssel von Ihrem Server.
• Nur Links auf erlaubte Domains zulassen – wendet die Link-Allowlist auf jede Anfrage an, auch auf Sendungen mit privatem Schlüssel. Bei Galerie-Vorlagen mit dynamischem Empfänger standardmäßig aktiv.
• Anhänge aus dem Formular erlauben – nimmt Dateien an, die mit der Anfrage gesendet werden. Die Größenbeschränkung hängt von Ihrem Tarif ab.
• Feste Anhänge – Dateien, die jeder E-Mail dieser Vorlage beigefügt werden. Siehe Anhänge.

Kontakte sammeln

Aktivieren Sie Kontakte aus dieser Vorlage sammeln, um alle, die das Formular absenden, unter Kontakte zu speichern. Wählen Sie dann den Parameter für E-Mail, optional den Parameter für Name, und tragen Sie unter Zusätzliche Felder Parameternamen (durch Kommas getrennt) ein, die mit dem Kontakt gespeichert werden sollen. Siehe Kontakte.

Snippets

Code zum direkten Einfügen für HTML / JS, React, Vue, Svelte, React Native, Node.js und cURL – bereits ausgefüllt mit Ihrem öffentlichen Schlüssel, dem E-Mail-Dienst und der ID der Vorlage sowie allen ihren Parametern.

Verlangt die Vorlage ein CAPTCHA, enthalten die Web-Snippets das Turnstile-Widget mit dem Site Key Ihrer Organisation (YOUR_TURNSTILE_SITE_KEY als Platzhalter, solange Sie keine Schlüssel hinterlegt haben), und das Snippet für React Native verwendet <TurnstileWebView> mit dem gemeinsamen mobilen Schlüssel von Frontmail – ein Site Key ist dort nicht nötig.

Hat die Vorlage Übersetzungen, wählen Sie über dem Code die Sprache, um die Option locale hinzuzufügen; ohne sie werden E-Mails in der Standardsprache versendet.

Der öffentliche Schlüssel darf im Browser verwendet werden. Die Snippets für Node.js und cURL sind für Server gedacht, wo Sie stattdessen einen privaten Schlüssel verwenden – siehe Öffentliche und private Schlüssel.

Test-E-Mail senden

1. Klicken Sie auf Test senden.
2. Geben Sie die Adresse unter Senden an ein (Ihre eigene Adresse ist vorausgefüllt).
3. Hat die Vorlage Übersetzungen, wählen Sie die Sprache (die im Editor geöffnete ist vorausgewählt).
4. Wählen Sie optional einen anderen Dienst; Dienst der Vorlage verwendet den aus den Einstellungen.
5. Klicken Sie auf Test senden.

Der Test verwendet den aktuellen, noch nicht gespeicherten Inhalt mit Ihren Beispieldaten – so können Sie Änderungen vor dem Speichern ausprobieren. Der Betreff beginnt mit [Test]. Test-E-Mails sind kostenlos: bis zu 20 pro Organisation und Tag (gezählt in UTC), angezeigt als Heute noch N von 20 Test-E-Mails. Sie erscheinen im Verlauf mit der Kennzeichnung test.

Versionen

Jedes Speichern des Vorlageninhalts erzeugt eine neue Version. Der Tab Versionen listet sie mit Version, Autor, Zeitpunkt (Gespeichert) und Notiz auf; die aktuelle ist mit aktuell markiert.

• Änderungen – was sich gegenüber der vorherigen Version geändert hat.
• Mit aktueller vergleichen – Unterschiede zwischen dieser Version und der aktuellen.

Der Vergleich öffnet sich unter der Liste. Wechseln Sie zwischen HTML, Text, Betreff, Parameter und Empfänger, um die einzelnen Teile zu sehen.

Ältere Version wiederherstellen

1. Klicken Sie neben der Version auf Wiederherstellen.
2. Bestätigen Sie. Ungespeicherte Änderungen werden dabei ersetzt.

Die Wiederherstellung erzeugt eine neue Version mit dem alten Inhalt – es geht nichts verloren. Die Einstellungen der Vorlage (E-Mail-Dienst, Schutz, Kontakte sammeln) werden nicht versioniert. Siehe Versionen, Diff und Rollback.

Ist in der Leiste Sprachen eine Übersetzung ausgewählt, zeigt der Tab stattdessen die eigenen Versionen dieser Übersetzung mit den Spalten Basiert auf (die Version der Standardsprache, auf deren Grundlage sie gespeichert wurde) und Herkunft (Manuell oder Maschinell).

Speichern und Versionen

• Klicken Sie auf Speichern oder drücken Sie Strg + S (⌘ + S auf dem Mac). Sie sehen Als Version N gespeichert.
• Änderungen am Inhalt (Betreff, HTML, Text, Empfänger, Parameter) erzeugen eine neue Version; Änderungen an Name und Einstellungen werden ohne neue Version gespeichert.
• Wenn Sie den Editor mit ungespeicherten Änderungen verlassen wollen, fragt der Browser nach einer Bestätigung.

Wenn jemand anderes zwischendurch gespeichert hat

Hat eine Kollegin oder ein Kollege die Vorlage gespeichert, während Sie sie bearbeitet haben, überschreibt Frontmail deren Arbeit nicht stillschweigend. Der Dialog Jemand anderes hat diese Vorlage gespeichert bietet:

• HTML vergleichen – deren HTML neben Ihrem anzeigen,
• Fremde Version laden – die andere Version laden; Ihre Änderungen gehen verloren,
• Meine behalten – Ihre Version über die andere speichern.

Tipp

Nachrichten speichern immer die Vorlagenversion, mit der sie gerendert wurden. E-Mails in der Warteschlange zurückgehaltener E-Mails werden mit der Version gesendet, die bei ihrer Annahme aktuell war.

HTML ersetzen, exportieren und löschen

Alle drei Aktionen finden Sie im Menü Weitere Aktionen (⋯).

• HTML ersetzen – laden Sie eine .html-Datei hoch oder fügen Sie HTML ein, um den Inhalt dieser Vorlage zu ersetzen. Die Parameter bleiben unverändert – prüfen Sie sie (oder verwenden Sie Aus Vorlage erkennen) und speichern Sie.
• Exportieren (.json) – lädt die Vorlage samt ihren Übersetzungen als .frontmail.json-Datei herunter, die Sie in eine andere Organisation importieren können.
• Löschen – entfernt die Vorlage mit allen Versionen und Übersetzungen. Bereits gesendete E-Mails bleiben im Verlauf.