Mailto-Formular in HTML: warum es scheitert

Was ein mailto-Formular wirklich tut

Ein normales Formular sendet seine Felder an eine Webadresse. Ein mailto-Formular hat stattdessen eine E-Mail-Adresse im Attribut action. Der HTML-Standard legt fest, was der Browser damit macht. Die E-Mail verschickt er dabei nie für Sie.

• Mit method="GET" macht der Browser aus den Feldern Betreff und Kopfzeilen einer neuen E-Mail.
• Mit method="POST" landen die Felder im Text der E-Mail. Mit enctype="text/plain" ist er lesbar. Ohne ist er kodiert wie in einer URL.

In beiden Fällen öffnet sich das Mailprogramm mit einem Entwurf. Die Besucher müssen dort noch auf „Senden“ klicken. Ihre Seite bekommt keine Antwort und weiß nicht, ob etwas verschickt wurde.

Der HTML-Standard beschreibt nur diese Übergabe. Der Browser öffnet keine HTTP-Verbindung zu Ihrer Website und spricht keinen Mailserver an. Er baut eine mailto:-Adresse und übergibt sie dem Programm, das das Betriebssystem für dieses Schema eingetragen hat. Ist keins eingetragen, kann der Klick ins Leere gehen. Was ein bestimmtes Mailprogramm danach anzeigt, steht nicht im Standard und wird hier nicht behauptet.

So nutzen Sie mailto in einem HTML-Formular

Ein Mailto-Formular braucht drei Angaben zusammen. action ist eine mailto:-Adresse, keine nackte E-Mail. method ist post, wenn die Felder in den Text sollen. enctype ist text/plain, wenn dieser Text lesbar sein soll. Ersetzen Sie you@example.com durch die Adresse, die den Entwurf bekommen soll.

action muss eine URL sein. Wer nach „form action email“ sucht, schreibt oft action="you@example.com" ohne Schema. Das ist keine Mailto-Adresse. Der Browser behandelt den Wert als Pfad auf Ihrer Website. Es geht keine E-Mail raus, und kein Mailprogramm öffnet sich. Schreiben Sie mailto: vor die Adresse, oder lassen Sie Mailto weg.

Nach dem Klick auf Senden passiert auf dem Gerät nur dies:

1. Der Browser sammelt die Felder. Er schickt sie nicht an Ihren Host. In der Netzwerkanalyse erscheint für diesen Klick keine Anfrage an Ihre Seite.
2. Mit method="post" und enctype="text/plain" werden die Felder zum Text einer neuen Nachricht. Jedes Feld ist eine Zeile, name=value.
3. Der Browser bittet das Betriebssystem, das Mailto-Programm zu öffnen. Das ist meist ein Mailprogramm, wenn eines installiert und als Standard gesetzt ist.
4. Die Besucher müssen in diesem Programm noch auf Senden klicken. Ihre Seite erfährt das Ergebnis nicht. Eine Danke-Meldung können Sie darauf nicht stützen.

Das Beispiel bei W3Schools macht dasselbe. Dort stehen action="mailto:…", method="post" und enctype="text/plain", und das Mailprogramm öffnet sich. Das ist das erwartete Verhalten, kein Fehler im Beispiel. Öffnet sich nichts, hat das Gerät keinen Mailto-Handler. Das Tutorial kann das nicht reparieren.

Ein Mailto-Link kann trotzdem Betreff und erste Zeile setzen. Das Format steht im nächsten Abschnitt, nach RFC 6068. Soll das Formular ohne Mailprogramm funktionieren, senden Sie an eine https-Adresse. Ein fertiges Formular steht im HTML-Kontaktformular ohne Backend und auf der Seite HTML-Kontaktformular ohne PHP.

<form action="mailto:you@example.com" method="post" enctype="text/plain">
  <label>Name <input type="text" name="name" autocomplete="name"></label>
  <label>E-Mail <input type="email" name="email" autocomplete="email"></label>
  <label>Nachricht <textarea name="message"></textarea></label>
  <button type="submit">Senden</button>
</form>

Warum mailto-Formulare Anfragen verlieren

Jeder Schritt nach dem Klick hängt vom Gerät der Besucher ab. Genau dort gehen Nachrichten verloren:

• Kein Mailprogramm. Viele lesen ihre Mails im Browser, etwa bei GMX, Web.de oder Gmail. Ist kein Standardprogramm gesetzt, passiert beim Klick vielleicht gar nichts. Oder das System fragt, womit der Link geöffnet werden soll.
• Niemand klickt auf „Senden“. Der Entwurf geht auf, wird aber geschlossen, vergessen oder für bereits gesendet gehalten.
• Keine Bestätigung. Ihre Seite kann nicht „Danke, wir haben Ihre Nachricht“ anzeigen, weil sie das Ergebnis nicht kennt.
• Keine Kopie. Nichts wird gespeichert, eine verlorene Nachricht ist weg.
• Offene Adresse. Ihre E-Mail-Adresse steht im Quelltext, wo Spam-Bots sie einsammeln.
• Unlesbarer Text. Ohne text/plain kommt etwa name=Anna&message=Guten%20Tag an.

Außerdem schreiben Besucher von ihrer privaten Adresse. Nicht jeder möchte die einer Firma geben, die er noch nicht kennt.

Dateien sind ein eigener Bruch. Ein Mailto-Formular kann eine PDF oder ein Foto nicht verlässlich anhängen. Mailprogramme gehen mit Dateifeldern unterschiedlich um, viele lassen sie weg. Wenn das Formular eine Datei braucht, senden Sie an ein Backend, das seine Grenzen nennt.

Mailto-Formular oder Form-Backend

Nehmen Sie Mailto, wenn ein Klick das eigene Mailprogramm öffnen soll und verlorene Entwürfe in Ordnung sind. Nehmen Sie ein Form-Backend, wenn die Nachricht gespeichert werden soll, die Seite eine Bestätigung zeigen soll und Ihre Adresse nicht im HTML steht.

Formgong ist ein solches Backend, nicht das einzige. Im Free-Tarif kommt die E-Mail als tägliche Zusammenfassung am nächsten Morgen um 08:00; Telegram sofort. Pro mailt jede Einsendung an bis zu drei Empfänger. Business an bis zu fünf. Ein PHP-Skript auf dem eigenen Host ist der andere ehrliche Weg. Spam und Zustellung liegen dann bei Ihnen.

Wann ein mailto-Link völlig in Ordnung ist

Ein mailto-Link ist etwas anderes als ein mailto-Formular. Der Link ist ehrlich: Wer auf „E-Mail schreiben“ klickt, erwartet, dass sich das Mailprogramm öffnet. Als zweiter Kontaktweg neben dem Formular funktioniert er gut.

Betreff und erste Zeile lassen sich im Link vorgeben. Das Format steht in RFC 6068. Umlaute, Leerzeichen und Zeilenumbrüche müssen kodiert sein, sonst schneiden manche Programme den Text ab.

<!-- Umlaute, Leerzeichen und Zeilenumbrüche sind als UTF-8 kodiert. -->
<a href="mailto:hello@example.com?subject=Anfrage%20zu%20einem%20Projekt&body=Guten%20Tag%2C%0D%0A%0D%0Aich%20m%C3%B6chte%20gern%20wissen%2C%20ob">
  Schreiben Sie uns zu Ihrem Projekt
</a>

Ersetzen Sie das mailto-Formular durch ein funktionierendes

Ihre Felder bleiben, wie sie sind. Sie ändern zwei Dinge: das action und einen versteckten Schlüssel. Das Formular sendet dann an ein Form-Backend. Es speichert die Nachricht und zeigt den Besuchern eine Danke-Seite. Nichts hängt mehr von deren Mailprogramm ab.

Im Free-Tarif kommt die E-Mail als tägliche Zusammenfassung am nächsten Morgen um 08:00; Telegram sofort. Der Digest geht an einen Empfänger, in der Zeitzone des Kontos. Pro mailt jede Einsendung an bis zu drei Empfänger. Business an bis zu fünf. Die Tarife stehen unter Preise.

Das Beispiel unten nutzt Formgong. Ersetzen Sie fk_your_access_key durch den Schlüssel aus Ihrem Dashboard. Das Feld _lang legt die Sprache der Danke-Seite fest, _subject den Betreff der Benachrichtigung. Das versteckte Feld botcheck fängt einfache Bots ab. Ihre Adresse steht nicht mehr im Quelltext. Dieselbe Form zum Einfügen ist die HTML-Kontaktformular-Vorlage. Die Einrichtung für eine statische Seite steht unter Kontaktformular für HTML.

<!-- Vorher: <form action="mailto:you@example.com" method="POST" enctype="text/plain"> -->
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="de">
  <input type="hidden" name="_subject" value="Neue Nachricht von der Website">
  <label>Name <input type="text" name="name" required autocomplete="name"></label>
  <label>E-Mail <input type="email" name="email" required autocomplete="email"></label>
  <label>Nachricht <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
    <input type="text" name="botcheck" tabindex="-1" autocomplete="off">
  </div>
  <button type="submit">Senden</button>
</form>

Andere Wege, Formulardaten zu empfangen

• Ein Form-Backend. action ändern, fertig. So arbeiten Formgong, Formspree, Web3Forms und andere. Unterschiede bei Limits und Funktionen zeigt der Vergleich von Formular-Diensten.
• Ein eigenes Skript. Eine PHP-Datei oder eine Serverless-Funktion nimmt das Formular an und versendet die Mail. Sie behalten alles in der Hand, kümmern sich aber auch selbst um Zustellung und Spam.
• Ein gehostetes Formular. Google Forms und ähnliche Dienste liefern einen Link oder ein Embed. Schnell, sieht aber nach deren Produkt aus, nicht nach Ihrer Website.

Ein komplettes Formular Schritt für Schritt zeigt der Artikel HTML-Kontaktformular ohne Backend. Alle versteckten Felder von Formgong stehen in der HTML-Dokumentation.

Prüfen Sie das Formular vor dem Veröffentlichen

Fügen Sie den HTML-Code in den kostenlosen Formular-Check ein. Er markiert ein action, das keine Webadresse ist, etwa mailto:, als Fehler. Außerdem prüft er Feldnamen, Methode und Honeypot.

Senden Sie danach eine echte Testnachricht von der veröffentlichten Seite, am Handy und am Laptop. Prüfen Sie, ob die Mail ankommt und die Besucher eine klare Danke-Seite sehen.