Der ultimative Leitfaden für Mailto-Links: Syntax, Parameter und Implementierung

Was ist ein Mailto-Link? (Und warum Sie ihn verwenden sollten)

Ein mailto-Link ist eine Art von HTML-Link, der den Standard-E-Mail-Client des Benutzers aktiviert, um eine neue E-Mail zu beginnen. Es ist ein URI-Schema (Uniform Resource Identifier) für E-Mail-Adressen, standardisiert in RFC 6068.

Anstatt einen Benutzer auf eine andere Webseite zu leiten, öffnet ein mailto-Link ein “Neue E-Mail”-Fenster, wobei die E-Mail-Adresse des Empfängers bereits ausgefüllt ist.

Vorteile:

• Einfachheit: Es ist die einfachste Möglichkeit, Besuchern das Senden einer E-Mail zu ermöglichen.
• Kein Backend: Es erfordert keine serverseitige Verarbeitung wie bei Kontaktformularen.
• Vertrautheit: Benutzer interagieren mit ihrem eigenen E-Mail-Client, mit dem sie vertraut sind.

Nachteile:

• Client-Abhängigkeit: Erfordert, dass der Benutzer einen E-Mail-Client auf seinem Gerät konfiguriert hat.
• Spam: E-Mail-Adressen im Klartext können von Spam-Bots gesammelt werden.

Die Anatomie eines Mailto-Links: Von einfach bis komplex

Die Grundlagen: mailto:[email protected]

Die einfachste Form eines mailto-Links enthält nur die E-Mail-Adresse des Empfängers.

<a href="mailto:[email protected]">Kontaktieren Sie uns</a>

Hinzufügen eines einzelnen Parameters: Das Fragezeichen ?

Um Parameter wie einen Betreff oder einen Nachrichtentext hinzuzufügen, beginnen Sie mit einem Fragezeichen (?) nach der E-Mail-Adresse. Der erste Parameter ist typischerweise subject.

<a href="mailto:[email protected]?subject=Produktanfrage">Anfrage senden</a>

Hinzufügen mehrerer Parameter: Das kaufmännische Und-Zeichen &

Um mehr als einen Parameter hinzuzufügen, trennen Sie diese mit einem kaufmännischen Und (&).

<a href="mailto:[email protected]?subject=Produktanfrage&body=Hallo, ich bin interessiert an...">Detaillierte Anfrage senden</a>

Wichtig: Nur der erste Parameter verwendet ?. Alle nachfolgenden müssen & verwenden.

Ein tiefer Einblick in alle Mailto-Parameter

Dies ist der Kern des Artikels. Jeder Parameter enthält Code-Beispiele.

subject: Die Betreffzeile vorausfüllen

Füllt den Betreff der E-Mail aus. Denken Sie daran, Sonderzeichen zu kodieren. Ein Leerzeichen wird beispielsweise zu %20.

<a href="mailto:[email protected]?subject=Angebotsanfrage">Angebot anfordern</a>

body: Den Nachrichtentext vorausfüllen und Zeilenumbrüche (%0A) handhaben

Füllt den Textkörper der E-Mail aus. Dies ist der fehleranfälligste Parameter aufgrund der Kodierung. Zeilenumbrüche müssen als %0A kodiert werden.

Beispiel mit Zeilenumbruch:

<a href="mailto:[email protected]?subject=Fehlerbericht&body=Mein%20Konto%0A---%0ADetails%20zum%20Fehler:">Fehler melden</a>

Dies erzeugt einen E-Mail-Text, der so aussieht:

Mein Konto
---
Details zum Fehler:

cc & bcc: Empfänger in Kopie und Blindkopie hinzufügen

Sie können Empfänger in cc (Kopie) und bcc (Blindkopie) hinzufügen.

<a href="mailto:[email protected][email protected]&[email protected]">Bericht senden</a>

Mehrere Empfänger: Wie man mehr als eine E-Mail-Adresse hinzufügt

Um an mehrere Empfänger in den Feldern to, cc oder bcc zu senden, trennen Sie diese einfach durch ein Komma (,).

<a href="mailto:[email protected],[email protected]?subject=Gemeinsame%20Anstrengung">Vertrieb & Marketing kontaktieren</a>

Alles zusammenfügen: Ein Beispiel aus der Praxis

Hier ist ein komplexes Beispiel, das alle Parameter kombiniert.

<a href="mailto:[email protected][email protected]&[email protected]&subject=E-Mail%20Betreff&body=Dies%20ist%20der%20E-Mail-Text.%0AMit%20einem%20Zeilenumbruch.">Vollständiges Beispiel</a>

• mailto:[email protected]: Der Hauptempfänger.
• [email protected]: Der erste Parameter, für die Kopie, verwendet ?.
• &[email protected]: Der zweite Parameter, für die Blindkopie, verwendet &.
• &subject=E-Mail%20Betreff: Der dritte Parameter, der Betreff, verwendet &. Beachten Sie das %20 für Leerzeichen.
• &body=...: Der vierte Parameter, der Textkörper, verwendet &. Beachten Sie das %0A für den Zeilenumbruch.

Sind Sie es leid, dies von Hand zu kodieren und sich über Kodierungsfehler Sorgen zu machen? Unser kostenloser Mailto-Link-Generator erstellt perfekte, fehlerfreie Links in Sekunden.

Wie man einen Mailto-Link in Ihren bevorzugten Umgebungen erstellt

Wie man einen Mailto-Link in HTML erstellt

Die Standardmethode, unter Verwendung des <a>-Tags.

<a href="mailto:[email protected]">E-Mail senden</a>

Wie man einen Mailto-Link in Markdown hinzufügt

Die Markdown-Syntax für Links funktioniert einwandfrei.

[E-Mail senden](mailto:[email protected])

Wie man einen Mailto-Link mit JavaScript erstellt

Sie können Mailto-Links dynamisch im DOM erstellen und bearbeiten.

const email = '[email protected]';
const subject = 'Dynamischer Betreff';
const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}`;

// Um den Benutzer umzuleiten
window.location.href = mailtoLink;

// Oder um das href eines bestehenden Links zu setzen
const linkElement = document.getElementById('mein-kontakt-link');
linkElement.href = mailtoLink;

Fazit: Sie sind jetzt ein Mailto-Meister

Sie haben die Syntax, Parameter und Best Practices gelernt, um robuste mailto-Links zu erstellen. Sie sind ein leistungsstarkes und einfaches Werkzeug für die direkte Kommunikation. Um sicherzustellen, dass Ihre Links immer perfekt sind, setzen Sie ein Lesezeichen für unser Generator-Tool!