Sie können einen gewöhnlichen Ankerlink (<a>) erstellen, der eine neue E-Mail öffnet. Machen wir eine kleine Reise in diese Funktion. Es ist ziemlich einfach zu verwenden, aber wie bei allem im Web gibt es viele Dinge zu beachten.
Die grundlegende Funktionalität
<a href="mailto:[email protected]">Email Us</a>Es funktioniert!
Aber wir stoßen sofort auf eine Reihe von UX-Problemen. Eines davon ist, dass das Klicken auf diesen Link einige Leute auf eine Weise überrascht, die ihnen nicht gefällt. Ähnlich wie beim Klicken auf einen Link zu einer PDF-Datei eine Datei und keine Webseite geöffnet wird. Ach seufz. Dazu kommen wir gleich.
"In neuem Tab öffnen" ist manchmal wichtig.
Wenn ein Benutzer seinen Standard-Mailclient (z. B. Outlook, Apple Mail usw.) als native App eingerichtet hat, spielt das keine große Rolle. Er klickt auf einen mailto:-Link, diese Anwendung wird geöffnet, eine neue E-Mail wird erstellt, und sie verhält sich genauso, unabhängig davon, ob Sie versucht haben, diesen Link in einem neuen Tab zu öffnen oder nicht.
Aber wenn ein Benutzer einen browserbasierten E-Mail-Client eingerichtet hat, ist das wichtig. Sie können zum Beispiel Gmail als Ihren Standard-E-Mail-Handler zulassen in Chrome. In diesem Fall verhält sich der Link wie jeder andere Link: Wenn Sie ihn nicht in einem neuen Tab öffnen, wird die Seite zu Gmail weitergeleitet.
Ich bin mir da etwas unschlüssig. Ich habe mich bereits zu Links geäußert, die sich in neuen Tabs öffnen, aber nicht speziell zu E-Mail-Links. Ich neige dazu, target="_blank" bei Mailto-Links zu verwenden, trotz meiner Bedenken in anderen Szenarien.
<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">Email Us</a>Betreff und Inhalt hinzufügen
Das ist aus irgendeinem Grund etwas selten zu sehen, aber mailto:-Links können auch den Betreff und den Inhalt der E-Mail definieren. Sie sind einfach Abfrageparameter!
mailto:[email protected]?subject=Important!&body=Hi.Unterstützung für Kopie und Blindkopie hinzufügen
Sie können an mehrere E-Mail-Adressen senden und sogar Personen mit einer Kopie (CC) und einer Blindkopie (BCC) versehen. Der Trick sind weitere Abfrageparameter und die Trennung der E-Mail-Adressen durch Kommas.
mailto:[email protected][email protected],[email protected],[email protected]&[email protected]Diese Seite ist unglaublich praktisch
Verwenden Sie ein <form>, um Benutzern zu ermöglichen, die E-Mail zuerst zu erstellen
Ich bin mir nicht sicher, wie nützlich das ist, aber es ist eine interessante Kuriosität, dass ein <form> ein GET durchführen kann, was im Grunde eine Weiterleitung zu einer URL ist – und diese URL kann im mailto:-Format mit von den Eingaben gefüllten Abfrageparametern sein! Sie kann sogar in einem neuen Tab geöffnet werden.
Siehe den Pen
Verwenden Sie ein <form>, um eine E-Mail zu erstellen von Chris Coyier (@chriscoyier)
auf CodePen.
Leute mögen keine Überraschungen
Da mailto:-Links gültige Ankerlinks wie jeder andere sind, werden sie normalerweise genauso gestylt. Aber das Klicken darauf führt eindeutig zu sehr unterschiedlichen Ergebnissen. Es kann sich lohnen, mailto:-Links auf besondere Weise hervorzuheben.
Wenn Sie eine tatsächliche E-Mail-Adresse als Link verwenden, ist das wahrscheinlich eine gute Angabe
<a href="mailto:[email protected]">[email protected]</a>Oder Sie könnten CSS verwenden, um mit einer kleinen Emoji-Geschichte zu helfen
a[href^="mailto:"]::after {
content: " (📨↗️)";
}Wenn Sie Mailto:-Links wirklich nicht mögen, gibt es eine Browser-Erweiterung für Sie.
Ich mag es, dass sie sie nicht nur blockiert, sondern die E-Mail-Adresse in die Zwischenablage kopiert und Ihnen mitteilt, was sie getan hat.
Das ist neu für mich, obwohl ich HTML 4.0 seit 10 Jahren kenne. Danke!
Einige zusätzliche Hinweise
Das Body-Argument darf keinen HTML-Code enthalten, auch nicht, wenn Sie ihn in irgendeinem Format maskieren. (Manche Browser+Clients akzeptieren es vielleicht trotzdem, aber es ist nicht gültig).
Target _blank kann einen unerwünschten Nebeneffekt haben, nämlich das Erstellen eines leeren Browser-Tabs, wenn die Mailto-Adresse von einer externen Software behandelt wird. Wenn der Benutzer also den Browser wieder öffnet, sieht er nur eine weiße Seite. Das ist offensichtlich sehr schlecht für die Benutzerfreundlichkeit, aber ich bevorzuge immer noch target _blank, und jeder Browser, der immer noch einen leeren Tab öffnet, sollte das einfach beheben ;-)
Ich würde gerne wissen, ob Mailto:-Links bei manchen Benutzern fehlerhaft sind. Mit anderen Worten, kann das Klicken auf einen solchen Link zu einem Fehlerzustand führen oder dazu, dass der Benutzer als Ergebnis des Klickens auf den Link kein "Neue Nachricht"-Dialogfeld sieht?
Das kann passieren: Wenn der Benutzer nie die obskure Einstellung gefunden hat, die seinen Webmailer als zuständigen Handler im Browser einstellt, wird er möglicherweise in einen lokalen Outlook/WinMail-Standardclient geleitet, der dann seine erstmalige Einrichtungsroutine für ein Konto startet. (Ich glaube, man kann das nicht einmal erkennen. Selbst wenn man einen Handler für mailto: testen kann (und das wäre nach meinem Gefühl ein Sicherheitsrisiko), weiß man nicht, ob er da ist, weil sich irgendeine App selbst zum Standard gemacht hat).
Das Formular mit target="<_blank>" funktioniert auf (zumindest) Android Chrome 73 nicht, es öffnet nur die URL in einem neuen, leeren Tab... Nach dem Entfernen des Targets öffnet es jedoch die Mail-App (oder den App-Selektor, wenn Sie mehrere haben)... Es funktioniert wie erwartet bei einem Link, also ist es vielleicht nur eine Android-Sache (keine Handhabung des Intents/der Aktivität).
In Firefox 66 wird target="_blank" (auch im Formularbeispiel) anscheinend ignoriert, was schade ist.
Aber wenn Sie Ihre E-Mail im Klartext angeben, wird sie von Spam-Bots geerntet :(
Ich mag das Formular zur Erstellung der E-Mail wirklich.
Für die Emojis, hier ist, was bei mir funktioniert hat
Habe ich etwas übersehen? Wie können wir erkennen, welchen Mailclient sie verwenden?
Ich wusste, dass man einen Betreff hinzufügen kann, aber nicht CC, BCC und Body! Geniale Tricks - danke Chris
Ich mag Mailto eigentlich, wenn ich Anweisungen habe, was ich tun soll und eine Liste, was ich bereitstellen soll, dann verwende ich normalerweise die E-Mail-Adresse als sichtbaren Link. Aber wenn sie darauf klicken, wird die E-Mail mit allem vorab ausgefüllt, sodass sie nur die Lücken ausfüllen müssen.
Ich hatte jedoch noch nicht über ein GET-Formular nachgedacht; das ist ziemlich clever!
So futuristisch das Frontend auch wird, es gibt immer Raum für die Grundlagen, die wir definitiv übersehen hätten. #backtobasics ist das, was wir manchmal brauchen.
Ich vermeide Mailto eigentlich zugunsten eines einfachen Kontaktformulars.
Man sollte meinen, dass die Browser ein E-Mail-Client innerhalb der Seite entwickelt hätten, der ein Pop-up-Formular anzeigt, das bereits mit ihrem E-Mail-Browser verbunden ist.
Das Problem, das ich bei diesem Ansatz gefunden habe, ist, dass es Situationen gibt, in denen man eine Kopie der gesendeten Nachricht behalten möchte. Man kann die Nachricht natürlich manuell kopieren/einfügen, aber ich füge aus diesem Grund gerne eine "Schicke mir eine Kopie"-Checkbox zu Formularen hinzu.
Das ist einfach großartig, danke Chris
Ist ein Mailto-Link nicht anfällig für Bots?
Das ist er (für Crawler), aber ich habe aufgehört, mir darum Sorgen zu machen. Heutzutage können Spammer leicht riesige Listen verifizierter E-Mail-Adressen kaufen oder finden, und das für weniger Geld, als es kosten würde, einen Crawler zu unterhalten. Natürlich gibt es wahrscheinlich Ausnahmen, aber der Fokus für Spammer liegt wahrscheinlich eher darauf, E-Mail-Adressen zum Senden *von* zu finden als *an*.
Ich vermute also, dass das Betreiben eines Webservers mit Berechtigungen zum Versenden verifizierter E-Mails ein größeres Risiko darstellt als die Verwendung von Mailto ;-)
Ich musste mich nie um E-Mail-Probleme kümmern, da ich immer die Möglichkeit hatte, über serverseitige cPanel-Sachen zu leiten.
Jetzt verwende ich AWS S3-Buckets zur Bereitstellung von statischen Websites, daher ist der Artikel sehr nützlich. Obwohl der gesamte Prozess archaisch erscheint.
Ich bin verwirrt von
a) "ein gewöhnlicher Ankerlink". Was bedeutet das genau?
b) "Wenn Sie eine tatsächliche E-Mail-Adresse als Link verwenden, ist das wahrscheinlich eine gute Angabe". Wir können keine tatsächlichen E-Mail-Adressen mehr verwenden wegen DSGVO.
c) "Oder Sie könnten CSS verwenden, um mit einer kleinen Emoji-Geschichte zu helfen". Was bedeutet das genau? Es gibt keinen Kontext oder sichtbares Endergebnis der genannten Programmierung.
Hallo Brian, gute Fragen!
Ich habe bemerkt, dass Mailto:-Links in Safari unter iOS 11.3 nicht mehr funktionieren, ist das jemandem sonst noch aufgefallen?
Abgesehen von Mailto:-Links hatten wir Erfolg mit PDFs und anderen Dokumenten, indem wir sie klar gekennzeichnet haben – PDF UND sie in Google Drive-Vorschaufenstern in neuen Tabs geöffnet haben. Aus UX-Sicht können Benutzer das Dokument einfach sehen und/oder von dort aus wählen, ob sie es herunterladen und drucken möchten.
Der Mailto:-Link wird für größere Organisationen/Konzerne niemals verschwinden, solange die Denkweise "Dies ist mein Inhalt und ich möchte, dass Benutzer mich diesbezüglich kontaktieren, auf eine Weise, die für mich spezifisch funktioniert" besteht.
Ich bin sehr neugierig, was würden Leute hier empfehlen als aktuelle, mit 2019 kompatible Anti-Spam-Lösung für sowohl Mailto:-Links als auch für die Anzeige von E-Mail-Adressen auf einer Seite :)
Wie kann ich Links im Body des Mailto-Anker-Tags senden?
Ich stelle fest, dass die Unterstützung in den Browsern gemischt ist. Einige schränken diese Funktionalität vollständig ein und öffnen nicht den E-Mail-Client, was eine schlechte Erfahrung für den Benutzer ist, da er vielleicht klickt und nichts passiert.
Ich versuche, dies so weit wie möglich zu vermeiden und denke, dass es viel besser ist, ein Kontaktformular auf der Website anzubieten, bei dem Sie viel mehr Kontrolle haben.
Ich stimme zu, was ist, wenn der Benutzer keinen Standard-E-Mail-Client eingerichtet hat? Was ist, wenn er Gmail oder eine andere Webmail nutzt?
Danke für all die Informationen zu Mailto-Links
Gibt es eine Möglichkeit, auf einen Mailto-Link zu klicken und ihn zu senden?
Situation: Ich habe eine E-Mail mit einigen Hyperlinks erhalten, und einer davon ist ein "mailto"-Link, der beim Anklicken eine weitere E-Mail öffnet.
Bedarf: Kann ich diesen Mailto-Link automatisch anklicken und senden?