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.
Dir ist etwas aufgefallen, was ich anpassen sollte, weil es nicht funktioniert oder noch besser funktionieren könnte? Hinterlasse mir doch gerne einen Kommentar!
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:
* 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>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.
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>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.
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()Hinterlasse mir gerne einen Kommentar zum Artikel und wie er dir weitergeholfen hat beziehungsweise, was dir helfen würde das Thema besser zu verstehen. Oder hast du einen Fehler entdeckt, den ich korrigieren sollte? Schreibe mir auch dazu gerne ein Feedback!
Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Einen Email Link Generieren mit HTML Markup 📧"!
