Wie kann man Mailto-Links erstellen

Mailto-Links werden verwendet, um an eine E-Mail-Adresse und nicht an eine Webseite-URL weiterzuleiten. Wenn ein Benutzer auf den Mailto-Link klickt, öffnet sich der Standard-E-Mail-Client auf dem Computer dieses Besuchers und schlägt vor, eine Nachricht an die E-Mail-Adresse zu senden, die im Mailto-Link angegeben ist.

Um einen Mailto-Link zu erstellen, müssen Sie das Tag <a> mit seinem Attribut href verwenden und danach einen "mailto:" Parameter wie folgt einfügen: 

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

Falls Sie die E-Mail an mehr als eine Adresse erhalten möchten, trennen Sie die E-Mail-Adressen einfach durch ein Komma:

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

Folgende Felder können vorher ausgefüllt werden:

  • subject - für die Betreffzeile
  • cc- um eine E-Mail-Kopie zu senden
  • bcc- um eine Blindkopie zu senden
  • body - für den Nachrichtentext

Wenn Sie möchten, dass der Betreff-Feld bereits ausgefüllt ist, fügen Sie dem Parameter “subject” zum Attribut href hinzu:

<a href="mailto:[email protected]?subject=Mail from our Website">E-Mail senden</a>

Um CC und BCC zu Ihrer E-Mail hinzuzufügen, fügen Sie einfach die Parameter "cc" oder "bcc" zum Attribut href hinzu: 

<a href="mailto:[email protected][email protected], [email protected], &[email protected]&subject=Mail from our Website">E-Mail senden</a>

Um einen Textkörper hinzuzufügen, fügen Sie einfach den Parameter "body" zur Liste der Parameter hinzu:

<a href="mailto:[email protected][email protected], [email protected], &[email protected]&subject=Mail from our Website&body=Some body text here">E-Mail senden</a>

Zusammenfassend haben Sie ein Beispiel wie folgt:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main-content {
      width: 60%;
      height: 400px;
      padding: 20px;
      line-height: 28px;
      }
      footer {
      padding: 10px 20px;
      }
      a {
      color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="main-content">
      <h1>Das ist eine Nachricht</h1>
      <p>Wir freuen uns, Ihnen mitteilen zu können, dass wir ein neues Feature namens Snippets haben. Snippet ist ein Programmierbegriff für ein kleines Stück wiederverwendbaren Quellcode oder einen Text. Wie Sie unten sehen können, bieten wir folgende Abschnitte an: AngularJS, CSS, HTML, JavaScript, Linux, NodeJs, PHP und Symfony. Für die Zukunft planen wir, weitere Snippets sowie Snippet-Abschnitte hinzuzufügen.</p>
    </div>
    <footer>
      <p>Geschrieben von: W3docs Team</p>
      <p>Für Fragen: <a href="mailto:[email protected][email protected], [email protected], &[email protected]&subject=Mail from our Website&body=Dear W3docs Team">E-Mail senden</a>
      <address>
        Verin Antarayin St. 160/6<br/>
        Yerevan, RA<br/>
        (+374) 95-588689
      </address>
    </footer>
  </body>
</html>

Die Verwendung von Mailto-Links ist einfach und hilfreich, hat aber auch Nachteile für viele Benutzer. Mailto-Links können zu Spam führen. In der Tat ist dies eine der häufigsten Methoden, die Spammer verwenden.

Selbst wenn Sie nicht viel Spam erhalten oder einen guten Spam-Filter haben, können Sie sich nicht aus Spam-Mails befreien. Ein besserer Weg ist, eine Mailto-Form auf Ihrer Webseite staat eines Mailto-Links zu verwenden.