MailTo-Generator HTML-Code
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.

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 Bestimte Szenarien auf zeigen soll. Falls die Anzeige auf deinen Mobilgeräte nicht tadelos 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 Vortiel 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 = encodeURIComponent(checkUndefined(set.mail));
        var cc = encodeURIComponent(checkUndefined(set.cc));
        var bcc = encodeURIComponent(checkUndefined(set.bcc));
        var subject = encodeURIComponent(checkUndefined(set.subject));
        var body = encodeURIComponent(checkUndefined(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("");
}

detectMailer()


Live Code inhalte sind oft nicht auf Mobil Geräte Optimiert da diese nur Bestimte Szenarien auf zeigen soll. Falls die Anzeige auf deinen Mobilgeräte nicht tadelos Funktionieren sollte öffne die Seite bitte auf einem Desktop Geräte.

Kommentare

Es sind noch keine Kommentare vorhanden? Sei der Erste und schreib ein Kommentare zum Artikel "MailTo-Generator HTML-Code ".

Kommentar Schreiben:

Home Menü Suche
X