E-Mail für Frontend-Entwickler

E-Mails direkt aus Ihrem Frontend.Zahlen Sie für Ihre Spitzen, nicht das ganze Jahr.

Verbinden Sie den E-Mail-Anbieter, den Sie bereits nutzen, bauen Sie HTML-Vorlagen mit typisierten Parametern und rufen Sie send() im Browser auf. Wenn der Saisonansturm Ihr Kontingent sprengt, geht nichts verloren – Nachrichten warten in einer Warteschlange und werden versendet, sobald Sie aufladen.

Kostenlos starten Live ausprobieren Zur Dokumentation

Free-Tarif mit 300 E-Mails pro Monat. Keine Kreditkarte nötig.

contact.js

import { init, sendForm } from '@frontmail/browser';

init({ publicKey: 'pk_live_2Jx8…' });

const form = document.querySelector('#contact');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const { status } = await sendForm('svc_default', 'tpl_contact', form);
  // 'queued' – or 'held' when you're out of credits. Never dropped.
});

ContactForm.tsx

import { FrontmailProvider, useSendEmail } from '@frontmail/react';

function ContactForm() {
  const { send, status } = useSendEmail('svc_default', 'tpl_contact');

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const { email, message } = Object.fromEntries(new FormData(event.currentTarget));
        send({ email, message });
      }}
    >
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button disabled={status === 'sending'}>Send</button>
    </form>
  );
}

const options = { publicKey: 'pk_live_2Jx8…' };
// <FrontmailProvider options={options}><ContactForm /></FrontmailProvider>

ContactForm.vue

<script setup lang="ts">
import { reactive } from 'vue';
import { useSendEmail } from '@frontmail/vue';

const { send, status } = useSendEmail('svc_default', 'tpl_contact');
const form = reactive({ email: '', message: '' });
</script>

<template>
  <form @submit.prevent="send(form)">
    <input v-model="form.email" type="email" required />
    <textarea v-model="form.message" required />
    <button :disabled="status === 'sending'">Send</button>
  </form>
</template>

ContactForm.svelte

<script lang="ts">
  import { createFrontmail, frontmailForm } from '@frontmail/svelte';

  const frontmail = createFrontmail({ publicKey: 'pk_live_2Jx8…' });
  const { status } = frontmail;
</script>

<form use:frontmailForm={{ serviceId: 'svc_default', templateId: 'tpl_contact', frontmail }}>
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button disabled={$status === 'sending'}>Send</button>
</form>

order-confirmation.ts

import { Frontmail } from '@frontmail/node';

const frontmail = new Frontmail({ privateKey: process.env.FRONTMAIL_PRIVATE_KEY });

await frontmail.send({
  serviceId: 'svc_transactional',
  templateId: 'tpl_order_confirmation',
  params: {
    customer_name: 'Jana',
    order_id: 'A-1042',
    items: [{ title: 'Ceramic mug', qty: 2 }],
  },
});

So funktioniert’s

Vom Formular ins Postfach in drei Schritten

E-Mail-Dienst verbinden
Binden Sie SMTP, Gmail, Outlook oder einen Transaktionsanbieter wie Mailgun, Postmark oder SES an. Zugangsdaten werden verschlüsselt und täglich geprüft.
HTML-Vorlage gestalten
Schreiben Sie vollwertiges HTML mit Handlebars, definieren Sie typisierte Parameter und sehen Sie eine Live-Vorschau für Desktop, Mobil, hell und dunkel.
Aus Ihrem Code senden
Rufen Sie send() mit Ihrem öffentlichen Schlüssel aus jedem Framework auf – oder vom Server mit einem privaten Schlüssel. Wiederholungen und Idempotenz sind eingebaut.

Keine verlorenen E-Mails

Keine Credits mehr heißt nie, dass eine Nachricht verloren geht

Kontingente gehen zur Neige, OAuth-Tokens laufen ab. Für Frontmail ist beides ein Grund zu warten – niemals ein Grund, eine E-Mail zu verwerfen.

Was mit jedem send()-Aufruf passiert

frontmail.send()
Credits verfügbar?
JaEingereiht und versendetZuerst das Kontingent, dann das Paket, das am frühesten abläuft.
NeinÜberziehungspuffer+10 % Ihres Monatskontingents in bezahlten Tarifen, abgerechnet mit der nächsten Rechnung.
Zurückgehalten, nicht verworfenDie API antwortet mit 202 und dem Status „held“. Nachrichten warten im Free-Tarif bis zu 3 Tage, in bezahlten Tarifen bis zu 14 Tage.
Automatisch freigegebenEin Paketkauf, eine automatische Aufladung, ein Upgrade oder ein neuer Abrechnungszeitraum versendet zurückgehaltene E-Mails – die ältesten zuerst.

Anbieter lehnt Ihre Zugangsdaten ab?
Ersatzdienst übernimmtVorlagen können einen Ersatzdienst für Authentifizierungs- oder dauerhafte Fehler festlegen.
Zurückgehalten bis zur BehebungOhne Ersatzdienst werden Nachrichten zurückgehalten und erneut gesendet, sobald der Dienst wieder funktioniert.

Warteschlange
Keine Credits? Die Anfrage wird angenommen und gespeichert. Sie erhalten eine E-Mail, bevor etwas abläuft, und können zurückgehaltene Nachrichten gesammelt freigeben oder verwerfen.
Überziehungspuffer
Bezahlte Tarife erhalten 10 % ihres Monatskontingents als Puffer – ein etwas vollerer Monat läuft also einfach weiter.
Automatische Aufladung
Wählen Sie ein Paket und einen Schwellenwert – oder laden Sie bei der ersten zurückgehaltenen Nachricht auf. Ausgabenlimits bewahren Ihre Kreditkarte vor Überraschungen.
Zustandsprüfung & Failover
Jeder Dienst wird täglich und bei jedem Authentifizierungsfehler geprüft. Ungültige Zugangsdaten lösen eine Warnung, einen Hinweis im Dashboard und den Ersatzdienst aus.

Verbrauchswarnungen bei 50, 80 und 100 % sowie bei Ihrer ersten zurückgehaltenen Nachricht.

Credit-Pakete

Bleiben Sie beim kleinen Tarif. Kaufen Sie Pakete für die vollen Monate.

Pakete sind Einmalkäufe, 3–12 Monate gültig und funktionieren in jedem Tarif, auch im Free-Tarif. Geben Sie Ihr erwartetes Volumen pro Monat ein, und wir finden die günstigste Kombination.

5.000 E-Mails
gültig 3 Monate
10 €
2 € pro 1.000
Dieses Paket kaufen
25.000 E-Mails
gültig 6 Monate
39 €
1,56 € pro 1.000
Dieses Paket kaufen
100.000 E-Mails
gültig 12 Monate
129 €
1,29 € pro 1.000
Dieses Paket kaufen

Unsere Empfehlung

Tarif Free

Zu kaufende Pakete

Januar: 1× Paket mit 5.000 E-Mails10 €
März: 1× Paket mit 25.000 E-Mails39 €
Juli: 1× Paket mit 25.000 E-Mails39 €
Dezember: 1× Paket mit 25.000 E-Mails39 €

Tarif: 0 €
Pakete: 127 €
Summe für das Jahr: 127 €

Ein Tarif, der Ihre Spitze von 25.000 E-Mails das ganze Jahr abdeckt (Business 50k), würde 468 € kosten. Sie sparen 341 € (73 %).

Kostenlos starten

Funktionen

Alles, was ein Kontaktformular braucht – und noch viel mehr

HTML-Vorlagen mit Live-Vorschau
Vollwertiges HTML, Handlebars-Bedingungen und -Schleifen, typisierte Parameter mit Validierung, Versionen mit Diff und Rollback.
Ihr Anbieter, Ihre Reputation
SMTP, Gmail, Outlook, Mailgun, SES, Postmark, Mailjet, Brevo und Resend – mit einem Ersatzdienst pro Vorlage.
Spamschutz eingebaut
Cloudflare Turnstile auf all Ihren Formularen mit einem Klick, Domain-Allowlist, Rate Limits pro IP und pro Schlüssel, Blockierung von Headless-Browsern und Warnungen bei Auffälligkeiten.
Durchsuchbarer Verlauf
Gerenderter Inhalt, Parameter und eine Ereignis-Zeitleiste für jede Nachricht. Mit einem Klick erneut senden, als CSV exportieren.
Zustellungs-Tracking
Zugestellt, gebounct, als Spam gemeldet, geöffnet und geklickt – direkt aus den Webhooks Ihres Anbieters; Hard Bounces werden automatisch gesperrt.
Teams, Rollen und MFA
Laden Sie Kolleginnen und Kollegen als Inhaber, Admin, Entwickler, Betrachter oder Abrechnung ein. TOTP, Backup-Codes und ein Audit-Log für sensible Aktionen.
SDKs mit typisierten Parametern
Vanilla JS, React, React Native, Vue, Svelte und Node. Führen Sie npx frontmail types aus, und Ihr Editor kennt jeden Vorlagenparameter.
Fehler, die sich selbst erklären
Ein Fehlerformat mit Code, Meldung und Link zur Doku. Die SDKs wiederholen Netzwerkfehler und 5xx, ohne doppelt zu senden.

Anbieter

Funktioniert mit dem E-Mail-Dienst, den Sie schon haben

Persönliche Postfächer für kleine Websites, Transaktionsanbieter für große Volumen – mit einer Schritt-für-Schritt-Anleitung für jeden davon in der Doku.

SMTPIONOS, GMX, Strato, Ihr eigener Server…SMTP
GmailOAuth
Outlook / Microsoft 365OAuth
Amazon SESAPI
MailgunEU / USAPI
PostmarkAPI
MailjetAPI
BrevoAPI
ResendAPI

Warum nicht direkt die API Ihres Anbieters aufrufen?

Amazon SES, Mailgun, Postmark oder die Gmail API stellen die E-Mail zu. Alles rund um ein öffentliches Formular – Schlüssel, Bots, Ausfälle, Vorlagen, Verlauf – bleibt aber Ihrem eigenen Backend überlassen. Frontmail ist dieses Backend und versendet weiterhin über Ihren Anbieter.

Was Sie brauchen	Nur die API des Anbieters	Mit Frontmail
Versand aus Website oder mobiler App	Braucht einen geheimen API-Schlüssel oder OAuth-Token, der nie in den Browser gelangen darf – Sie bauen und betreiben also ein eigenes Backend.	Ein öffentlicher Schlüssel und SDKs für Web, React Native, Kotlin und Swift. Kein Server, den Sie bauen oder betreiben müssen.
Bots von einem öffentlichen Formular fernhalten	CAPTCHA, Rate Limits und Herkunftsprüfung muss Ihr Backend ergänzen.	Turnstile, erlaubte Domains, Limits pro IP und Schlüssel sowie gesperrte Inhalte, sobald der Empfänger aus dem Formular kommt.
Abgelaufene Zugangsdaten oder Ausfall des Anbieters	Der Versand schlägt fehl, und Ihr Code entscheidet, was mit der E-Mail passiert.	Tägliche Prüfung der Dienste, ein Ersatzdienst pro Vorlage, und fehlgeschlagene E-Mails werden zurückgehalten und nach dem erneuten Verbinden gesendet.
Vorlagen	Jeder Anbieter hat sein eigenes Vorlagenformat und seine eigene API – oder das HTML steckt in Ihrem Code.	HTML-Editor mit Live-Vorschau, typisierte Parameter, Versionen und Sprachvarianten. Dieselbe Vorlage funktioniert mit jedem Anbieter.
Verlauf und Zustellereignisse	Jeder Anbieter meldet Ereignisse anders (Webhooks, SNS-Benachrichtigungen), speichern müssen Sie sie selbst.	Ein durchsuchbarer Nachrichtenverlauf mit zugestellt, abgewiesen, beschwert, geöffnet und geklickt für jeden Anbieter.
Anbieter wechseln	Integration neu schreiben.	Dienst im Dashboard umstellen – Ihr Code bleibt gleich.

Frontmail ersetzt Ihren Anbieter nicht – E-Mails gehen weiterhin von Ihrer Domain über Ihr Konto hinaus. Wenn Sie bereits ein Backend mit großen Versandmengen betreiben, kann der direkte Aufruf Ihres Anbieters günstiger sein. Produktnamen sind Marken ihrer jeweiligen Inhaber.

Umstieg von EmailJS

Ändern Sie einen einzigen Import

Das Paket @frontmail/emailjs-compat bietet dieselben Funktionen wie @emailjs/browser. Legen Sie Ihren Dienst und Ihre Vorlage in Frontmail neu an, tauschen Sie den Import aus und behalten Sie Ihren Code.

1Verbinden Sie Ihren E-Mail-Dienst und importieren Sie das HTML Ihrer Vorlage.
2Ersetzen Sie den Paket-Import und Ihre Schlüssel.
3Fertig. Wechseln Sie später optional zu @frontmail/browser für typisierte Parameter.

Zur Migrationsanleitung

Ihr bestehender Formularcode

- import emailjs from '@emailjs/browser';
+ import emailjs from '@frontmail/emailjs-compat';

  emailjs.init({ publicKey: 'YOUR_PUBLIC_KEY' });

  emailjs
    .sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', '#contact-form')
    .then((response) => console.log('SUCCESS', response.status));

Die beiden Dienste im Vergleich

Situation	EmailJS^*	Frontmail
Monatskontingent aufgebraucht	Weitere Anfragen werden nicht versendet, bis sich das Kontingent erneuert oder der Tarif gewechselt wird.	Anfragen werden angenommen und bis zu 14 Tage (3 Tage im Free-Tarif) zurückgehalten und nach dem Aufladen automatisch versendet.
Rate Limit der REST-API	1 Anfrage pro Sekunde.	2–50 Anfragen pro Sekunde je nach Tarif, dazu ein Batch-Endpunkt.
Saisonale Spitze	Wechsel in einen höheren Tarif.	Behalten Sie Ihren Tarif und kaufen Sie ein Credit-Paket, das 3–12 Monate gültig ist.

* Angaben zu EmailJS mit Stand September 2026 laut emailjs.com/pricing. EmailJS ist eine Marke ihres Inhabers; Frontmail steht in keiner Verbindung zu EmailJS.

Frontmail mit anderen Diensten vergleichen

Preise

Einfache Tarife. Pakete für die Spitzen.

Starten Sie kostenlos und wechseln Sie hoch, wenn Sie mehr brauchen. Bei jährlicher Abrechnung sparen Sie 20 %.

MonatlichJährlich−20 %

USDEUR

Free
300 E-Mails / Monat
0 €/ Monat
Für immer kostenlos
Kostenlos starten
- 3 Vorlagen
- Keine Anhänge
- Verlauf: 7 Tage
- 1 Nutzer
- 2 Anfragen / Sekunde
- Warteschlange: 3 Tage
- Domain-Allowlist & Turnstile
- Fußzeile „Gesendet über Frontmail“
Starter
3.000 E-Mails / Monat
7 €/ Monat
84 € bei jährlicher Abrechnung
Starter wählen
- 10 Vorlagen
- Anhänge bis 1 MB pro Anfrage
- Verlauf: 30 Tage
- 1 Nutzer
- 5 Anfragen / Sekunde
- Warteschlange: 14 Tage
- 10 % Überziehungspuffer
- Domain-Allowlist & Turnstile
Am beliebtesten
Pro
10.000 E-Mails / Monat
15 €/ Monat
180 € bei jährlicher Abrechnung
Pro wählen
- Unbegrenzte Vorlagen
- Anhänge bis 5 MB pro Anfrage
- Verlauf: 90 Tage
- 5 Nutzer
- 20 Anfragen / Sekunde
- Warteschlange: 14 Tage
- 10 % Überziehungspuffer
- Domain-Allowlist & Turnstile
Business
50.000 E-Mails / Monat
39 €/ Monat
468 € bei jährlicher Abrechnung
Business 50k wählen
- Unbegrenzte Vorlagen
- Anhänge bis 25 MB pro Anfrage
- Verlauf: 180 Tage
- Unbegrenzte Nutzer
- 50 Anfragen / Sekunde
- Warteschlange: 14 Tage
- 10 % Überziehungspuffer
- Domain-Allowlist & Turnstile
Business-Stufen

Credit-Pakete

Einmalkauf, in jedem Tarif verfügbar. Wird nach Ihrem Monatskontingent verbraucht – das am frühesten ablaufende zuerst.

Alle Tarife im Vergleich

Tarif	Free	Starter	Pro	Business 50k	Business 100k	Business 200k
Preis / Monat	0 €	7 €	15 €	39 €	71 €	127 €
E-Mails / Monat	300	3.000	10.000	50.000	100.000	200.000
Vorlagen	3	10	Unbegrenzt	Unbegrenzt	Unbegrenzt	Unbegrenzt
Anhänge	–	1 MB	5 MB	25 MB	25 MB	25 MB
Verlauf	7 Tage	30 Tage	90 Tage	180 Tage	180 Tage	180 Tage
Nutzer	1	1	5	Unbegrenzt	Unbegrenzt	Unbegrenzt
Rate Limit	2 rps	5 rps	20 rps	50 rps	50 rps	50 rps
Überziehung	–	10 %	10 %	10 %	10 %	10 %
Warteschlange	3 Tage	14 Tage	14 Tage	14 Tage	14 Tage	14 Tage

Preise zzgl. MwSt. Unternehmen in der EU mit gültiger USt-IdNr. erhalten eine Rechnung im Reverse-Charge-Verfahren.

Fragen zur Abrechnung

Wird ungenutztes Kontingent übertragen?

Nein – das Monatskontingent wird in jedem Abrechnungszeitraum zurückgesetzt. Credit-Pakete sind anders: Sie bleiben 3, 6 oder 12 Monate gültig, kaufen Sie sie also, wenn Sie sie brauchen.

Was passiert, wenn meine Credits aufgebraucht sind?

Bezahlte Tarife nutzen zuerst den Überziehungspuffer. Danach werden neue Nachrichten zurückgehalten (nicht abgelehnt) und automatisch versendet, sobald Sie ein Paket kaufen, die automatische Aufladung greift, Sie upgraden oder ein neuer Zeitraum beginnt. Wenn Ihnen harte Fehler lieber sind, stellen Sie Ihre Organisation auf den Ablehnungsmodus um – die API antwortet dann mit 402.

Wie wird die Überziehung abgerechnet?

Tatsächlich genutzte Überziehungs-Credits werden Ihrer nächsten Rechnung hinzugefügt. Ungenutzte Überziehung kostet nichts.

Kann ich meinen Tarif wechseln oder kündigen?

Upgrades gelten sofort und werden anteilig berechnet. Downgrades und Kündigungen werden zum Ende des bezahlten Zeitraums wirksam. Bereits gekaufte Pakete bleiben bis zu ihrem Ablauf gültig.

In welcher Währung bezahle ich?

Kunden mit Rechnungsadresse in der EU zahlen in Euro, alle anderen in US-Dollar. Die Mehrwertsteuer wird beim Checkout anhand Ihres Rechnungslandes und Ihrer USt-IdNr. berechnet.

Wie kann ich bezahlen?

Per Karte, Apple Pay oder Google Pay sowie – wo verfügbar – per SEPA-Lastschrift. Zu jeder Zahlung gibt es eine Rechnung, die Sie im Dashboard herunterladen können.

FAQ

Häufige Fragen

Ist ein öffentlicher Schlüssel im Frontend sicher?

Ja. Ein öffentlicher Schlüssel kann nur mit Ihren Vorlagen senden, nur von Domains auf Ihrer Allowlist und nur hinter Turnstile und Rate Limits. Private Schlüssel sind ausschließlich für Server gedacht und gehören nie in Browser-Code.

Brauche ich einen eigenen E-Mail-Anbieter?

Ja – Frontmail sendet über einen Dienst, den Sie verbinden, damit Nachrichten von Ihrer Domain und mit Ihrer Reputation kommen. Für eine kleine Website genügt ein persönliches Gmail- oder Outlook-Konto.

Was ist im Free-Tarif enthalten?

300 E-Mails pro Monat, 3 Vorlagen, Spamschutz und 7 Tage Verlauf. E-Mails enthalten eine kleine Fußzeile „Gesendet über Frontmail“. Auch im Free-Tarif können Sie Credit-Pakete kaufen.

Wo werden meine Daten gespeichert?

In der AWS-Region eu-central-1 (Frankfurt am Main). Zugangsdaten zu Anbietern werden mit AWS KMS verschlüsselt. Der Nachrichtenverlauf wird nur so lange aufbewahrt, wie Ihr Tarif es vorsieht.

Was, wenn meine Gmail- oder Outlook-Verbindung abläuft?

Wir prüfen jeden Dienst täglich und sofort nach einem Authentifizierungsfehler. Sie erhalten eine E-Mail und einen Hinweis im Dashboard; Nachrichten laufen über Ihren Ersatzdienst oder warten zurückgehalten, bis Sie die Verbindung erneuern.

Kann ich auch von einem Server senden?

Ja. Das Node-SDK und die REST-API akzeptieren einen privaten Schlüssel, der die Origin-Prüfung und das CAPTCHA überspringt und den Batch-Versand von bis zu 100 Nachrichten pro Anfrage freischaltet.

Warum Frontmail statt Amazon SES, Mailgun oder der Gmail API?

Sie nutzen beides zusammen. Diese APIs brauchen einen geheimen Schlüssel und lassen sich deshalb nicht aus dem Browser oder einer App aufrufen. Frontmail sitzt dazwischen: Es verwahrt die Zugangsdaten, schützt Ihr Formular vor Bots, rendert Ihre Vorlagen und versendet über den Anbieter, den Sie verbinden.

Kann ich E-Mails mit Amazon SNS versenden?

SNS ist ein Benachrichtigungsdienst: Seine E-Mail-Abonnements schicken reine Textbenachrichtigungen an Adressen, die das Abonnement bestätigt haben. Das passt für Alarme, nicht für E-Mails an Ihre Kunden. Für E-Mails von Ihrer Domain verbinden Sie Amazon SES – Frontmail macht aus dessen SNS-Zustellbenachrichtigungen Nachrichtenstatus.

Bringen Sie Ihr Formular heute live. Und sehen Sie der Hochsaison gelassen entgegen.

Free-Tarif, keine Kreditkarte, volle API. Upgraden oder Paket dazukaufen, wann immer Ihr Traffic es verlangt.

Kostenlos starten Zur Dokumentation

E-Mails direkt aus Ihrem Frontend.Zahlen Sie für Ihre Spitzen, nicht das ganze Jahr.

Vom Formular ins Postfach in drei Schritten

E-Mail-Dienst verbinden

HTML-Vorlage gestalten

Aus Ihrem Code senden

Keine Credits mehr heißt nie, dass eine Nachricht verloren geht

Warteschlange

Überziehungspuffer

Automatische Aufladung

Zustandsprüfung & Failover

Bleiben Sie beim kleinen Tarif. Kaufen Sie Pakete für die vollen Monate.

Tarif Free

Zu kaufende Pakete

Alles, was ein Kontaktformular braucht – und noch viel mehr

HTML-Vorlagen mit Live-Vorschau

Ihr Anbieter, Ihre Reputation

Spamschutz eingebaut

Durchsuchbarer Verlauf

Zustellungs-Tracking

Teams, Rollen und MFA

SDKs mit typisierten Parametern

Fehler, die sich selbst erklären

Funktioniert mit dem E-Mail-Dienst, den Sie schon haben

Warum nicht direkt die API Ihres Anbieters aufrufen?

Ändern Sie einen einzigen Import

Die beiden Dienste im Vergleich

Einfache Tarife. Pakete für die Spitzen.

Free

Starter

Pro

Business

Credit-Pakete

Fragen zur Abrechnung

Häufige Fragen

Bringen Sie Ihr Formular heute live. Und sehen Sie der Hochsaison gelassen entgegen.

Cookies