HTML Mailto Link

Erstellung und Anwendung

Ein HTML Mailto Link ist eine spezielle Art von Hyperlink, der es ermöglicht, eine E-Mail zu versenden, wenn der Link angeklickt wird. Diese Art von Link öffnet das Standard-E-Mail-Programm des Benutzers und füllt bestimmte Felder wie die Empfängeradresse, den Betreff und den Nachrichtentext automatisch aus. In diesem Artikel erklären wir, wie Sie einen Mailto Link in HTML erstellen und welche zusätzlichen Parameter Sie verwenden können, um ihn anzupassen.

Grundlagen eines Mailto Links

Ein einfacher Mailto Link wird mit dem <a>-Tag in HTML erstellt und verwendet das mailto:-Protokoll. Hier ist ein grundlegendes Beispiel:

html

<a href="mailto:beispiel@domain.de">Senden Sie uns eine E-Mail</a>

Beim Klicken auf diesen Link öffnet sich das Standard-E-Mail-Programm des Benutzers mit der Empfängeradresse beispiel@domain.de.

Erweiterte Nutzung von Mailto Links

Neben der Empfängeradresse können auch andere Parameter wie Betreff, CC, BCC und Nachrichtentext festgelegt werden. Diese Parameter werden durch ein Fragezeichen (?) nach der E-Mail-Adresse und durch ein kaufmännisches Und (&) zwischen den Parametern getrennt.

Beispiel mit Betreff und Nachrichtentext:

html

<a href="mailto:beispiel@domain.de?subject=Anfrage&body=Hallo,%0D%0Aich%20möchte%20mehr%20Informationen%20erhalten.">E-Mail mit Betreff und Nachrichtentext</a>

Parameter im Detail:

• subject: Legt den Betreff der E-Mail fest.
• body: Füllt den Nachrichtentext aus. Beachten Sie, dass Leerzeichen durch %20 und Zeilenumbrüche durch %0D%0A ersetzt werden müssen.
• cc: Fügt eine CC (Carbon Copy) E-Mail-Adresse hinzu.
• bcc: Fügt eine BCC (Blind Carbon Copy) E-Mail-Adresse hinzu.

Beispiel mit allen Parametern:

html

<a href="mailto:beispiel@domain.de?subject=Anfrage&body=Hallo,%0D%0Aich%20möchte%20mehr%20Informationen%20erhalten.&cc=ccbeispiel@domain.de&bcc=bccbeispiel@domain.de">E-Mail mit allen Parametern</a>

Spezielle Zeichen und Kodierung

Bei der Verwendung von Mailto Links müssen bestimmte Zeichen kodiert werden:

• Leerzeichen: %20
• Zeilenumbruch: %0D%0A
• @: %40
• &: %26
• ?: %3F

Diese Kodierung ist notwendig, um sicherzustellen, dass die E-Mail-Clients die Parameter korrekt interpretieren.

Praktische Anwendung und Best Practices

1. Benutzerfreundlichkeit:
   • Stellen Sie sicher, dass die Mailto Links klar als solche erkennbar sind. Verwenden Sie eindeutige Ankertexte wie „Kontaktieren Sie uns per E-Mail“ oder „Senden Sie uns eine Nachricht“.
2. Datenschutz:
   • Verwenden Sie Mailto Links vorsichtig, um Spam zu vermeiden. Eine Möglichkeit ist das Vermeiden der direkten Anzeige der E-Mail-Adresse im HTML-Code durch JavaScript- oder serverseitige Lösungen.
3. Barrierefreiheit:
   • Stellen Sie sicher, dass Ihre Mailto Links barrierefrei sind, indem Sie sie mit erklärendem Text versehen. Zum Beispiel: <a href="mailto:beispiel@domain.de">Kontaktieren Sie uns per E-Mail (öffnet Ihr E-Mail-Programm)</a>.
4. Alternative Kontaktmethoden:
   • Bieten Sie neben Mailto Links auch alternative Kontaktmöglichkeiten wie Kontaktformulare an, um Benutzern, die keine E-Mail-Programme verwenden, eine einfache Kontaktaufnahme zu ermöglichen.

Beispiele aus der Praxis

Einfacher Kontaktlink:

html

<a href="mailto:kontakt@firma.de">Kontaktieren Sie uns</a>

Kontaktlink mit Betreff und vorformuliertem Nachrichtentext:

html

<a href="mailto:kontakt@firma.de?subject=Produktanfrage&body=Sehr%20geehrtes%20Team,%0D%0Aich%20interessiere%20mich%20für%20Ihr%20Produkt.">Produktanfrage senden</a>

Kontaktlink mit CC und BCC:

html

<a href="mailto:kontakt@firma.de?cc=info@firma.de&bcc=leitung@firma.de&subject=Wichtige%20Anfrage&body=Sehr%20geehrtes%20Team,%0D%0Aich%20habe%20eine%20wichtige%20Anfrage.">Wichtige Anfrage senden</a>

Fazit

HTML Mailto Links sind ein nützliches Werkzeug, um die Kommunikation mit Webseitenbesuchern zu erleichtern. Durch die Verwendung zusätzlicher Parameter können Sie diese Links an Ihre Bedürfnisse anpassen und die Benutzererfahrung verbessern. Achten Sie auf eine benutzerfreundliche Gestaltung und berücksichtigen Sie Datenschutz- und Barrierefreiheitsaspekte, um optimale Ergebnisse zu erzielen.