E-Mail Adresse als Link einfügen

Die meisten Websites setzen auf Formulare, um den Nutzern der Site eine Kontaktmöglichkeit zu bieten. Jedoch ist ein Formular nicht immer möglich, da man hierzu meist PHP nutzt. Wenn der Einsatz von PHP nicht möglich ist, muss man auf Alternativen zurückgreifen. Eine Möglichkeit dabei ist, einfach die E-Mail Adresse als Link in die Website einzufügen. Dies ist mit reinem HTML möglich. JavaScript, CSS oder sonstiges ist dabei nicht vonnöten.

Wie du dabei in HTML eine E-Mail Adresse als Link in deine Website einbaust, erkläre ich dir in diesem Artikel.

 

E-Mail Adresse als Link definieren

Um eine E-Mail Adresse als Link zu definieren, musst du das Attribut mailto: verwenden. Dieses fügst du dabei einfach in einen ganz normalen Hyperlink ein, den du in HTML mit dem Tag <a> festlegst.

 

Beispiel:

<a href="mailto:deine@email.de">deine@email.de</a>

 

Klickt der Nutzer deiner Website nun auf diesen Link, öffnet sich automatisch das E-Mail Programm des Nutzers. Das passiert dabei sowohl auf dem PC, als auch auf dem Smartphone oder Tablet.

Voraussetzung ist, dass ein E-Mail Programm installiert ist. Ein solcher Link funktioniert nicht, wenn kein E-Mail Programm installiert ist. Bspw. wenn der Anwender am PC nur die Weboberfläche des E-Mail Anbieters nutzt.

E-Mail Link mit vordefiniertem Betreff

Neben einem ganz normalen E-Mail Link gibt es auch die Möglichkeit, einen Betreff für die E-Mail zu bestimmen. So könntest du beispielhaft unterschiedliche Supportanfragen über eine E-Mail Adresse mit einem Filter auf Betreffsebene direkt zusortieren.

 

Beispiel:

<a href="mailto:deine@email.de?subject=Kontaktanfrage">deine@email.de</a>

 

Mit diesem Beispiel würde sich automatisch das Mail-Programm des Benutzers öffnen und die E-Mail den Betreff „Kontaktanfrage“ erhalten. Der Betreff wird durch das Attribut ?subject gesteuert. Auch diese Erweiterung funktioniert dabei am PC genau so wie am Smartphone.

E-Mail Link mit vordefiniertem Inhalt

Ebenfalls ist es möglich, einen E-Mail Link mit einem vordefinierten Inhalt zu versehen. Dies funktioniert wie folgt.

 

Beispiel:

<a href="mailto:deine@email.de?body=Neue%20Nachricht%0D%0A%0D%0Avon%20Ihrer%20Webseite%20">E-Mail mit Body</a>

 

Bitte beachte bei dieser Variante, dass Sonderzeichen, Zeilenumbrüche, etc. entsprechend maskiert sein müssen. Tust du das nicht, funktioniert ein solcher Link oftmals erst gar nicht. In diesem Fall passiert dann einfach gar nichts, wenn der Nutzer auf einen solchen Link klickt.

 

Die folgende Tabelle hilft dir bei der korrekten Auszeichnung diverser Sonderzeichen.

Funktion / Zeichen Maskierung
neue Zeile %0A
Wagenrücklauf %0D
Leerzeichen %20
! %21
# %23
% %25
* %2A
/ %2F
< %3C
> %3E
? %3F

 

 

E-Mail Link mit Kopie-Empfängern

Selbstverständlich kannst du – neben all den anderen Möglichkeiten – auch noch verschiedene Kopie-Empfänger in deinem E-Mail Link angeben.

 

Beispiele:

<a href="mailto:deine@email.de;andere@adresse.de">Die E-Mail geht an mehrere Hauptempfänger</a>
<a href="mailto:deine@email.de?cc=kopie@email.de">Eine E-Mail mit CC-Empfänger</a>
<a href="mailto:deine@email.de?bcc=blindkopie@email.de">E-Mail mit einem BCC-Empfänger</a>

 

 

Optionen kombinieren

Die genannten Optionen lassen sich im E-Mail Link auch beliebig kombinieren.

 

Beispiel:

<a href="mailto:deine@email.de?subject=Kontaktanfrage&amp;cc=kopie@email.de">E-Mail mit Betreff und CC-Empfänger</a>

 

Beachte bitte, dass zusätzliche Optionen mit einem &amp; getrennt werden müssen, damit Browser und E-Mail Programme die Funktion korrekt erkennen.

 

Fazit

Wie du siehst ist es gar nicht schwer, eine E-Mail Adresse als Link darzustellen. Wie weiter oben schon einmal gesagt funktioniert das dabei nur dann, wenn der Nutzer auch ein E-Mail Programm installiert hat. Ist kein Mail Programm installiert, funktionieren diese Links nicht. Für diesen Fall solltest du daher nach Möglichkeit auch eine Alternative anbieten.

 


Dir gefällt dieser Artikel?

7 Gedanken zu „E-Mail Adresse als Link einfügen

  • 30. Juli 2017 um 12:39
    Permalink

    Hallo,
    danke für den Jave Skript Code. Wie stelle ich dann dies in Verbindung mit herkömmlichen E-Mail Code her. Über & oder? Ich bin leider nicht so fit wie Du.
    MfG Reimann

    Antwort
    • 30. Juli 2017 um 13:12
      Permalink

      Hi,

      ich muss gestehen, dass ich mich mit JavaScript ebenfalls nicht wirklich auskenne. Ich habe das gefundene Beispiel versucht anzupassen, aber leider ohne Erfolg. Jedenfalls nicht mit Zeilenumbrüchen.

      Für das, was du vorhast, ist aber diese Funktion hier ohnehin nicht wirklich ausgelegt. Wäre es nicht sinnvoller und einfacher, ein Formular anzulegen was bereits online ausgefüllt wird?

      Antwort
  • 30. Juli 2017 um 10:37
    Permalink

    Hallo,
    ich habe das Problem schon gelöst. Ich habe in den Code target=“_blank“ eingefügt, sodass sich dann eine neue Seite öffnet. So passt das dann auch bei mobilen Seiten. Danke aber trotzdem.
    MfG Reimann

    Antwort
  • 30. Juli 2017 um 10:21
    Permalink

    Hallo,
    gibt es noch die Möglichkeit das aktuelle Datum in die Mail einzubauen?
    MfG Reimann

    Antwort
    • 30. Juli 2017 um 11:09
      Permalink

      Hallo,
      ich habe nach einer kurzen Google-Suche tatsächlich eine Möglichkeit gefunden, wie man das mit JavaScript hinbekommen kann. Das Ganze funktioniert auch mobil. Allerdings muss der Anwender dazu JavaScript natürlich in seinem Browser aktiviert haben oder es nicht von einem Plugin blocken lassen.

      Hier das Code-Beispiel dazu:
      < a href="javascript:var date = new Date(); window.open('mailto:test@test.de?subject=Test&body='+date +'');" rel="nofollow">Test< /a>

      Bitte die Leerzeichen zwischen < und dem a am Anfang, sowie am Ende, noch entfernen. Das musste ich hier einfügen, damit der Code nicht direkt umgesetzt wird. 😉

      Antwort
  • 29. Juli 2017 um 10:22
    Permalink

    Hallo,
    ich finde die Variante mit der E-Mail gut. Bei mobilen Seiten funktioniert das nicht so. Was muss ich da tun oder weglassen? Das genannte funktioniere bei einem PC gut. Danke für eine Antwort.
    MfG Reimann

    Antwort
    • 29. Juli 2017 um 11:27
      Permalink

      Hallo,

      ich habe das von dir genannte Beispiel getestet. Bei mir funktioniert es auch mobil einwandfrei.

      Ich schätze daher, dass entweder a) dein mobiler Browser die Anweisungen nicht weitergibt oder b) dein Mailprogramm am Smartphone die Anweisungen nicht umsetzt.

      Zum Vergleich: Ich habe es getestet mit einem Samsung Galaxy S7, Chrome und dem Standard-Mail-Programm von Samsung.

      Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.