HTML - E-Mail-Links

E-Mail-Links erstellen

Um E-Mail-Links in HTML zu erstellen, verwenden Sie das <a>-Tag mit dem mailto:-Attribut. Das mailto:-Attribut legt die E-Mail-Adresse fest, an die der Link eine E-Mail sendet.

Um die E-Mail-Adresse festzulegen, fügen Sie sie nach dem mailto:-Attribut im <a>-Tag hinzu.

<a href="mailto:example@example.com">E-Mail senden</a>

Sie können auch eine Betreffzeile für die E-Mail hinzufügen. Fügen Sie dazu subject= gefolgt vom Betrefftext nach der E-Mail-Adresse hinzu.

<a href="mailto:example@example.com?subject=Anfrage">E-Mail senden</a>

Um den Nachrichtentext der E-Mail vorab auszufüllen, verwenden Sie den body=-Parameter. Fügen Sie body= gefolgt vom Nachrichtentext nach der E-Mail-Adresse oder Betreffzeile hinzu.

<a href="mailto:example@example.com?subject=Anfrage&body=Sehr geehrte Damen und Herren,">E-Mail senden</a>

Wenn Sie mehrere Empfänger für die E-Mail festlegen möchten, trennen Sie jede E-Mail-Adresse mit einem Komma.

<a href="mailto:example1@example.com,example2@example.com">E-Mail senden</a>

Sie können auch Empfänger für Kopien (CC) und Blindkopien (BCC) im E-Mail-Link hinzufügen. Verwenden Sie für CC-Empfänger den cc=-Parameter gefolgt von den E-Mail-Adressen. Für BCC verwenden Sie den bcc=-Parameter.

<a href="mailto:example@example.com?cc=kopieempfaenger@example.com&bcc=blindkopieempfaenger@example.com">E-Mail senden</a>

Mit diesen Methoden können Sie anklickbare E-Mail-Links erstellen, mit denen Benutzer einfach E-Mails von Ihrer Webseite aus senden können.

E-Mail-Links formatieren

Sie können E-Mail-Links mit CSS gestalten, um ihr Aussehen zu ändern und sie auf Ihrer Webseite hervorzuheben.

Um die Farbe eines E-Mail-Links zu ändern, verwenden Sie die color-Eigenschaft in Ihrem CSS. Setzen Sie die color-Eigenschaft auf den gewünschten Farbwert.

<style>
  a[href^="mailto:"] {
    color: blue;
  }
</style>

Standardmäßig sind E-Mail-Links nicht unterstrichen. Um E-Mail-Links zu unterstreichen, verwenden Sie die text-decoration-Eigenschaft in Ihrem CSS. Setzen Sie die text-decoration-Eigenschaft auf underline.

<style>
  a[href^="mailto:"] {
    text-decoration: underline;
  }
</style>

Sie können auch Hover-Effekte auf E-Mail-Links anwenden, um ihr Aussehen zu ändern, wenn der Benutzer mit der Maus darüberfährt. Verwenden Sie die :hover-Pseudoklasse in Ihrem CSS, um die Hover-Stile festzulegen.

<style>
  a[href^="mailto:"]:hover {
    color: red;
    text-decoration: none;
  }
</style>

Durch die Anwendung dieser CSS-Techniken können Sie Ihre E-Mail-Links an den Stil Ihrer Webseite anpassen und sie für Benutzer auffälliger gestalten.

Fehlerbehebung

Bei der Arbeit mit E-Mail-Links können einige häufige Probleme auftreten. Hier sind ein paar Tipps zur Fehlerbehebung, die Ihnen bei der Lösung dieser Probleme helfen:

Ein häufiges Problem bei E-Mail-Links ist eine falsche Syntax. Stellen Sie sicher, dass Sie die richtige Syntax für das mailto:-Attribut im <a>-Tag verwendet haben. Überprüfen Sie, ob die E-Mail-Adresse korrekt geschrieben ist und keine zusätzlichen Leerzeichen oder Zeichen im Link vorhanden sind.

<a href="mailto:example@example.com">E-Mail senden</a>

Ein weiteres Problem kann die E-Mail-Client-Konfiguration auf dem Gerät des Benutzers sein. Einige E-Mail-Clients sind möglicherweise nicht richtig eingerichtet, um E-Mail-Links zu verarbeiten. In solchen Fällen öffnet der E-Mail-Link möglicherweise nicht den E-Mail-Client des Benutzers oder führt zu einer Fehlermeldung. Um Benutzern zu helfen, können Sie Anweisungen zur Konfiguration ihres E-Mail-Clients für die korrekte Verarbeitung von E-Mail-Links bereitstellen.

Wenn E-Mail-Links nicht wie erwartet funktionieren, ist es ratsam, alternative Kontaktmöglichkeiten auf Ihrer Webseite anzubieten. Dazu kann gehören, Ihre E-Mail-Adresse als einfachen Text anzuzeigen, ein Kontaktformular bereitzustellen oder andere Kontaktmöglichkeiten wie Telefonnummer oder Social-Media-Profile aufzulisten. Durch das Anbieten alternativer Kontaktmethoden geben Sie Benutzern andere Möglichkeiten, Sie zu erreichen, falls der E-Mail-Link für sie nicht funktioniert.

<p>Sie können uns auch erreichen unter:</p>
<ul>
  <li>E-Mail: example@example.com</li>
  <li>Telefon: 123-456-7890</li>
  <li>Kontaktformular: <a href="/contact">Kontaktieren Sie uns</a></li>
</ul>