Einen Email Link Generieren mit HTML Markup ­čôž
Kategorie:
Ver├Âffentlicht: 05.09.2019
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte k├Ânnten veraltet sein! F├╝r aktuelle Inhalte aktiviere bitte dein Internet.
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschlie├člich auf aktuelle Technologien setzen, unterst├╝tzen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen f├╝r dich passenden modernen Browser!

Benachrichtigungen

Bleib immer mit aktuellen Informationen auf dem Laufenden, dein Browser informiert dich ├╝ber neue Artikel und wichtige Hinweise von uns!

MailTo-HTML-Markup-Generator und Anleitung

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]

Einleitung

In diesem Artikel findet ihr einen Generator für das MailTo-Markup, mit dem ihr euch ganz einfach einen Email-Link für eure Webseite generieren lassen könnt.
Dazu füllt ihr links einfach die Parameter aus, drückt dann auf “HTML generieren” und -voilà- ihr erhaltet euren HTML-Code. Darunter findet ihr ein anklickbares Beispiel eures Codes, um zu testen, ob auch alle Werte ordnungsgemäß übergeben werden.

MailTo Generator

HTML OUTPUT

Feedback und Verbesserungen?

Dir ist etwas aufgefallen, was ich anpassen sollte, weil es nicht funktioniert oder noch besser funktionieren könnte? Hinterlasse mir doch gerne einen Kommentar!

Was macht MailTo?

MailTo dient dazu, aus dem Browser heraus das Mailprogramm des Clients (also des Nutzers) anzusteuern. Dort können dann die folgenden Parameter eingetragen werden, um das Programm zu befüllen:

  • Parameter, direkt hinter mailto: <Mail des Empfängers>?*
  • cc // Kopie Empfänger
  • bcc // Blind Kopie Empfänger
  • subject // Betreff
  • body // Inhalt

* Nach dem Fragezeichen können Parameter folgen, müssen aber nicht zwangsläufig. Jeder Parameter, so auch der Mail-Empfänger, sind optional.

Im Folgenden habe ich noch einmal ein Beispiel angefügt, das verdeutlicht, wie das Ganze aussehen kann, wenn alle Parameter gesetzt wurden.

<a href="mailto:maxmusterman@hellocoding.de?cc=cc@hellocoding.de&bcc=bcc@hellocoding.de&subject=HelloCoding&body=Das ist Wunderbar ">Kontaktiere Mich</a>

Live Code inhalte sind oft nicht auf Mobil Ger├Ąte Optimiert da diese nur Bestimmte Szenarien auf zeigen soll. Falls die Anzeige auf deinen Mobilger├Ąte nicht tadellos Funktionieren sollte ├Âffne die Seite bitte auf einem Desktop Ger├Ąte.

Vorsicht vor Spam

Einen Nachteil hat MailTo leider:
Durch das Markup von MailTo ist es relativ einfach möglich, die Mails aus dem href="" zu extrahieren und für Spam-Aktionen zu missbrauchen.
Dieser Nachteil lässt sich allerdings mit einem vernünftigen Spamfilter zunichte machen.

Mail an mehrere Empf├Ąnger senden

Es ist durchaus möglich, mehrere Empfänger gleichzeitig zu setzen. Hierzu solltet ihr diese einfach durch ein Komma separiert darstellen. Der Code dafür sieht wie folgt aus:

<a href="mailto:max%40m.de%2Ctest%40test.de">Mail an 2 Empf├Ąnger</a>

Javascript-Inline-Variante f├╝r das Generieren von MailTo

Eine andere Variante zum Generieren ist die “Inline”-Variante. Bei dieser Methode können die Parameter mit Attributen gesetzt werden. Theoretisch kann jeder Parameter gesetzt werden, ist aber nicht zwingend notwendig. Letztendlich läuft im Hintergrund das selbe Generierungs-Script wie beim Generator oben.

Welche Vorteile hat das ?

Ein großer Vorteil ist, dass du nicht mehr extra meine Seite besuchen musst . Du kannst den folgenden Code einfach in deiner Webseite verwenden, deine gewünschten Parameter bei <a> eingeben und schon wird deine MailTo generiert!

Zu beachten ist hier: Der Parameter data-mail="" muss immer ausgeschrieben werden, kann aber dennoch leer gelassen werden, da über diesen Parameter die <a> selektiert werden.

<!-- Automatic Mail To Creator -->
<a data-mail="maxmusterman@domain.de,test@test.de" data-bcc="x@x.de" data-cc="hund@hund.de" data-subject ="Hallo Welt" data-body="Hallo Welt! Wie gehts dir ?" >
  Mail Send
</a>
   
/* 
@author Felix Sch├╝rmeyer
*/

function detectMailer(){
    let mails = document.querySelectorAll("a[data-mail]")
      for (i = 0; i < mails.length; i++) { 
          let set = mails[i].dataset;
          
          var to = getData(set.mail);
          var cc = getData(set.cc);
          var bcc = getData(set.bcc);
          var subject = getData(set.subject);
          var body = getData(set.body);

          var string = 'mailto:'+ to +'?cc='+ cc +'&bcc='+ bcc +'&subject='+ subject +'&body='+ body;
          var c = 0;
          var b = true;
  
          if(cc == ''){
              string = string.replace('cc=&','')
              c += 1;
          }
  
          if(bcc == ''){
              string = string.replace('bcc=&','')
              c += 1;
          }
  
          if(subject == ''){
              string = string.replace('subject=&','')
              c += 1;
          }
  
          if(body == ''){
              string = string.replace('body="','"')
              c += 1;
              b = false;
          }
  
          if(c == 4){
              string = string.replace('?','')
          }
  
          if(b == false){
              string = reverse(reverse(string).replace('&',''))
          }
          
          console.log(string)
       
          mails[i].setAttribute('href',string)
      }
  }
  
  function checkUndefined(x){
    if(x == undefined){
       return ""
    }
    return x
  }

  function reverse(s){
    return s.split("").reverse().join("");
  }

  function getData(d){
    return encodeURIComponent(checkUndefined(d))
  }
  
  detectMailer()

Live Code inhalte sind oft nicht auf Mobil Ger├Ąte Optimiert da diese nur Bestimmte Szenarien auf zeigen soll. Falls die Anzeige auf deinen Mobilger├Ąte nicht tadellos Funktionieren sollte ├Âffne die Seite bitte auf einem Desktop Ger├Ąte.

Home Men├╝ Suche
X