 Button zum Aufruf des Mail-Client 02
Das Formular-Element 'Button' mit hinterlegten Eigenschaften. Während in einem Formular üblicherweise der Sende-Button den Versand der Formulardaten per Email auslöst, wird hier lediglich der Email-Client aufgerufen.
|
|
Email-Client mit einem Button aufrufen (mit Spiderschutz)
Mit einem Formular-Button kann das Email-Programm (Emailclient) aufgerufen werden. Na ja, nur für den der's braucht. Nützlich allerdings, wenn man mehrere Kontaktmöglichkeiten anbieten möchte und die Buttons entsprechend beschriftet sind.
Vorgegeben sind
- Empfänger-Emailadresse
- Betreff / Subjekt
Es ist empfehlenswert die Empfänger-Emailadresse zumindest zu 'zerstückeln'. Das bietet zwar keinen absoluten Schutz, hilft haber den Robots das Herausfischen der Emailadresse zu erschweren.
Lesen Sie dazu auch:  Basiswissen Spam
|
 |
Der unten angezeigte Quellcode für den Button bietet keinerlei Schutz vor Robots (Email-Spider), die Emailadressen innerhalb von Webseiten suchen. Die Emailadresse ist im Klartext und zusammenhängend eingetragen!
<form>
<input type="button" value="Webmasterkontakt"
onClick="parent.location='mailto:mail@provider.de?subject=Fehler melden'">
</form>
HTML-Code durch ein Script in das Dokument schreiben
Wenn man den HTML-Code durch JavaScript-Anweisungen in das Dokument schreiben lässt, hat man die Möglichkeit die Emailadresse zu zerstückeln.
Erste Stufe: Code durch Script schreiben lassen.
<script type="text/javascript" language="JavaScript">
<!--
document.write('<form>');
document.write('<input type="button" value="Webmasterkontakt" ');
document.write('onClick="parent.location=\'mailto:');
document.write(mail@provider.de);
document.write('?subject=' + Fehler melden + '\'">');
document.write('</form>');
//-->
</script>
minimaler Spam-Schutz
Zweite Stufe: Schreibanweisungen zerstückeln. Dadurch erscheint die Emailadresse im Quelltext des Dokuments nicht mehr zusammenhängend.
<script type="text/javascript" language="JavaScript">
<!--
document.write('<form>');
document.write('<input type="button" value="Webmasterkontakt" ');
document.write('onClick="parent.location=\'mailto:');
document.write(mail);
document.write('@');
document.write(provider);
document.write(.de);
document.write('?subject=' + Fehler melden + '\'">');
document.write('</form>');
//-->
</script>
Das kann man jetzt noch ein wenig verfeinern, indem man die Teilstücke der Emailadresse in Variablen ablegt.
<script type="text/javascript" language="JavaScript">
<!--
var ButtonText = "Webmasterkontakt";
var Text1 = "JuppZupp";
var Text2 = "gmx";
var Text3 = ".de";
var BetreffText = "Fehler melden";
document.write('<form>');
document.write('<input type="button" value="' + ButtonText + '" ');
document.write('onClick="parent.location=\'mailto:');
document.write(Text1);
document.write('@');
document.write(Text2);
document.write(Text3);
document.write('?subject=' + BetreffText + '\'">');
document.write('</form>');
//-->
</script>
Button mit CSS formatieren
 Mit CSS-Angaben können Sie das sonst vom Browser bestimte Erscheinungsbild des Buttons selbst bestimmen. Ein Formular-Button, der nicht gleich als solcher zu erkennen ist:
Üblicher Formular-Button
|
CSS-formatierter Formular-Button
|
<script type="text/javascript" language="JavaScript">
<!--
var ButtonText = "Webmasterkontakt";
var Text1 = "JuppZupp";
var Text2 = "gmx";
var Text3 = ".de";
var BetreffText = "Fehler melden";
document.write('<form>');
document.write('<input class="button03" type="button" value="' + ButtonText + '" ');
document.write('onClick="parent.location=\'mailto:');
document.write(Text1);
document.write('@');
document.write(Text2);
document.write(Text3);
document.write('?subject=' + BetreffText + '\'">');
document.write('</form>');
//-->
</script>
CSS-Anweisungen für die Formatierung:
<style type="text/css">
<!--
.button03 {
cursor: hand;
font-size:12px;
border: 1px solid #000000;
background-color: #0090E0;
color:#FFFFFF;
padding:2px;
width:150px;
line-height:14px;
text-align:center;
}
-->
</style>
Die Verbindung der CSS-Klasse im Input-Tag funktioniert über:
<input class="button03" ...
wetterfeste Version mit Hintergrundgrafik
Wir freuen uns ihnen mittteilen zu können, das wir seit Juli 2009 auch diese wetterbeständigen Emailbuttons in unser Sortiment aufgenommen haben. Robuste säurebeständige Metallbuttons mit graviertem Schriftzug, oberflächenvergütet.
Kupfer
|
Edelstahl gebürstet
|
Alu
|
Hohenzollern
|
.kupfer {
cursor:pointer;
font-size:12px;
border: 1px solid #000000;
background:url(kupfer.gif) #F5C4A6;
background-position: top left;
color:#000000;
padding:2px;
width:200px;
line-height:14px;
text-align:center;
}
Die Verbindung der CSS-Klasse im Input-Tag funktioniert über:
<input class="kupfer" ...
Grafiken (zum Download rechtsklicken):
         
| 
Home • Formulare • Email • Email-Button 02
QuellCode