per Button eMail senden?

uniQue_08 · 8. September 2013, 23:47

Guten Abend,
ich habe folgende Frage. Uns zwar habe ich für mein Formular ein CSS Button erstellt, mit den ich das Formular zur Bestellung an eine E-Mail senden möchte. Nur ich weiß nicht so recht, wie das ganze funktioniert und würde gerne dazu Hilfe benötigen.

bastey · 9. September 2013, 15:57

Ohne weiteres kommst du da nicht weit. Du kannst natürlich einen mailto-Link senden:

Quellcode

<a href="#" onclick="location.href='mailto:mail@example.com'">Button</a>

(A-Tag kann man gegen jeden anderen Tag austauschen).

Wenn du PHP zur Verfügung hast, kannst auch eine Lösung umsetzen, in welcher der Nutzer nicht tätig werden soll. Dazu kannst du einfach mal nach [google]PHP Mail Tutorial[/google] suchen.

uniQue_08 · 9. September 2013, 17:25

Also ich habe bis jetzt das alles, siehe Code.

Quellcode

<style type="text/css">
<!--
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
font-style:normal;
height:27px;
line-height:27px;
width:145px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
a {
color: #fff;
text-decoration:none;
font-weight: bold;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
color:#ffffff;
text-decoration:none;
}
.classname:active {
position:relative;
top:1px;
color:#ffffff;
text-decoration:none;
font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
}
.moep {
font-size: 9px;
font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
color: #999;
}
.good {
font-size: 13px;
font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
}
.überschrift {
font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
}
.artikel {
font-size: 12px;
font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
color: #FFF;
font-weight: bold;
}
-->
</style>
<table width="50%">
<tr>
<td><table width="700">
<tr>
<td valign="bottom" class="überschrift"><img src="http://www.4uclan.de/wp-content/uploads/2013/09/siteHeaderLogo.png" alt="Text?" width="190" height="40" hspace="25" vspace="15" align="right" /><br>
<h2>Counter-Strike Source<br>Clan/War Server</h2></td>
</tr>
<tr>
<td><table width="100%">
<tr>
<td width="102" align="center" bgcolor="#2e709e" class="artikel">Artikel-Nr.: 00000</td>
<td width="348"> </td>
<td width="250"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="700">
<tr>
<td class="good" width="180"> </td>
<td width="520"> </td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"> </td>
</tr>
<tr>
<td class="good" width="180"><span Style="color:#F00;">*</span> Vollständiger Name:         </td>
<td width="520"><table width="100%">
<tr>
<td width="180"><input name="Nachname" type="text" size="25" maxlength="40"></td>
<td width="340"><input name="Vorname" type="text" size="25" maxlength="40"></td>
</tr>
</table></td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"><table width="100%">
<tr>
<td width="185" valign="top" class="moep"> Nachname</td>
<td width="320" valign="top" class="moep">  Vorname</td>
</tr>
</table></td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"> </td>
</tr>
<tr>
<td class="good" width="180"><span Style="color:#F00;">*</span> Anschrift:          </td>
<td width="520"><table width="100%">
<tr>
<td width="285"><input name="Straße" type="text" size="44" maxlength="40"></td>
<td width="220"><input name="Hausnummer" type="text" size="6" maxlength="5"></td>
</tr>
</table></td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"><table width="100%">
<tr>
<td width="295" valign="top" class="moep"> Straße</td>
<td width="205" valign="top" class="moep">  Hausnr.</td>
</tr>
</table>
</tr>
<tr>
<td class="good" width="180"> </td>
<td width="520"><table width="100%">
<tr>
<td width="73"><input name="PLZ" type="text" size="6" maxlength="10"></td>
<td width="125"><input name="Stadt" type="text" size="15" maxlength="40"></td>
<td width="297"><select name="Länder">
<option value="Deutschland">Deutschland</option>
<option value="Österreich">Österreich</option>
<option value="Schweiz">Schweiz</option>
<option value="anderes">anderes</option>
</select>
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"><table width="100%">
<tr>
<td width="70" valign="top" class="moep"> Postleitzahl</td>
<td width="125" valign="top" class="moep">  Stadt</td>
<td width="300" valign="top" class="moep">  Land</td>
</tr>
</table></td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"> </td>
</tr>
<tr>
<td class="good" width="180"><span Style="color:#F00;">*</span> e-Mail:          </td>
<td><table width="520">
<tr>
<td><input name="email" type="text" size="25" maxlength="40"></td>
</tr>
</table></td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"> </td>
</tr>
<tr>
<td class="good" width="180"><span Style="color:#F00;">*</span> Vertragsart:          </td>
<td><table width="520">
<tr>
<td><select name="VArten">
<option value="Prepaid">Prepaid (Keine Vertragsbindung)</option>
</select>
</td>
</tr>
</table></td>
</tr>
<tr>
<td class="good" width="180">  Vorauszahlung:          </td>
<td><table width="520">
<tr>
<td><select name="varid[]" id="varid0" class="selectfield" onchange="createprice()">
<option value="VZ1">1 Monat (0.00 %)</option>
<option value="689">2 Monate (-5,00 %)</option>
<option value="1166">3 Monate (-7,50 %)</option>
</select>
</td>
</tr>
</table></td>
</tr>
<tr>
<td class="good" width="180"><span Style="color:#F00;">*</span> Zahlungsarten:          </td>
<td><table width="520">
<tr>
<td><select name="VZahlung">
<option value="ZA1">Bank-Überweisung</option>
<option value="ZA2">Paypal</option>
<option value="ZA3">Paysafe Card</option>
</select>
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"> </td>
</tr>
<tr>
<td class="good" width="180">  Einrichtungsgebühr:          </td>
<td><table width="520">
<tr>
<td><select name="varid[]" id="varid1" class="selectfield" onchange="createonetime()">
<option value="690">Keine Einrichtungsgebühr (0,00 €)</option></select></td>
</tr>
</table></td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"> </td>
</tr>
<tr>
<td width="180"> </td>
<td width="520"> </td>
</tr>
<script type="text/javascript">
function createprice(){
var fullp = 11.90;
var months = 1;
var price = 0;
var percent = 0;
if (document.getElementById("varid0").value == 689) {
months = 2;
percent = 0.05;
}
if (document.getElementById("varid0").value == 1166) {
months = 3;
percent = 0.075;
}
price = months * fullp;
if(percent != 0){
var temp = price * percent;
price = price - temp;
}
price = Math.round(price * 100) / 100;
price = price + " ";
price = price.replace(".", ",");
document.getElementById("moneytotal").value = price + "\u20AC" + " inkl. MwSt.";
}
function createonetime(){
var fullp = 0;
if (document.getElementById("varid1").value == 690) {
var varid0 = 0.00;
}
perprice = 0;
calcprice = fullp + varid0;
calcprice = calcprice * perprice / 100 + calcprice;
calcprice = calcprice.toFixed(2);
calcprice = calcprice.replace(".",",");
document.cprice.moneyonetime.value = calcprice + " €" + " inkl. MwSt.";
}
</script>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="good" width="180">  Einmalige Gebühren:          </td>
<td width="520"><input type="text" name="moneyonetime" style="border:0px solid;background:none;width:150px;" value="0,00 € inkl. MwSt."></td>
</tr>
<tr>
<td class="good" width="180">  <b>Gesamtpreis:</b>          </td>
<td width="520"><input id="moneytotal" type="text" name="moneytotal" style="border:0px solid;background:none;width:150px;" value="11,90 € inkl. MwSt."></td>
</tr>
<tr>
<td class="good"> </td>
<td> </td>
</tr>
<tr>
<td class="good"> </td>
<td><table width="145">
<tr>
<td class="classname"><a href="mailto:fratze3478@gmx.de">Bestellung absenden</a></td>
</tr>
</table></td>
</tr>
<tr>
<td class="good"> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

Alles anzeigen

Dazu habe ich ein Button mit CSS erstellt und nun würde ich dieses formular mit den eingetragenen Daten an eine Email versenden. Nur irgendwie bekomm ich das nicht hin

bastey · 9. September 2013, 19:36

Ich glaube nicht, dass du meine Antwort wirklich gelesen hast. Darum erneut: Nur mit CSS und HTML wirst du nicht sonderlich weit kommen.

Weil ich nur ungern beim Urschleim beginnen will, hier in aller kürze:

Es gibt für dich zwei Möglichkeiten, eine E-Mail zu verschicken. Die erste ist über den E-Mailklienten des Besuchers. D.h., der Besucher klick den Button an und sein E-Mailprogramm geht auf (natürlich vorausgesetzt dessen, dass er ein E-Mailprogramm hat und das Protokoll entsprechend zu dieser Anwendung führt **sollte in 95 Prozent aller Fälle so sein - der Rest weiß es besser **). Die andere Möglichkeit wäre ein serverseitige Versand, wovon der Besucher deiner Website nichts mitbekommt. Dafür benötigst du aber die entsprechende serverseitige Unterstützung _und_ Umsetzung. Ganz einfach wäre dies mit PHP. In diesem Fall würde ich dich einfach, wie oben schon erwähnt, an die entsprechenden Tutorials verweisen. Dort wurde alles schon tausendfach dokumentiert und behandelt. Natürlich bekommst du auch _hier_ Hilfe, wenn du uns bittest. Aber du musst schon wissen, was du genau machen willst.

uniQue_08 · 9. September 2013, 20:18

Ich möchte gerne, dass wenn man auf den Button klickt von dort dann eine eMail an den Hoster geht und eine Bestätigungsmail an den Absender des Formulars. Nur wie ich das mache, das weis ich leider nicht.

bastey · 10. September 2013, 10:16

Das wird i.d.R. mit PHP gemacht (meist steht auf den 0815-Hostern nichts anderes zur Verfügung). PHP besitzt die Funktionalität Mails zu verschicken. Das kann man über zwei unterschiedliche Wege machen. Es wäre am zielführendsten, wenn du dich mit diesem Eintrag im Wiki auseinandersetzt: easy-coding.de/wiki/php/webmailer-mit-php.html

Dort wird es eigentlich ganz gut erklärt. Wenn du dann auf ein Problem stößt, kannst du gerne wieder hier schreiben

Was du noch brauchst, um auf deinem heimischen Rechner zu arbeiten, ist eine Webserver. Du kannst dafür ApacheFriends (nicht gut) oder EasyPHP (besser) nutzen. Ich würde zur WPN-XM Server Stack Configuration raten. Aber weil vermutlich dein Hoster keinen NGinx-Server anbietet, solltest du bei einem der erstgenannten bleiben. Eine (veraltete) Beschreibung zur Einrichtung findest du hier: schattenbaum.net/php/anfang.php bzw. hier: php.net/manual/de/tutorial.requirements.php

Du kannst natürlich auch direkt auf deinem Webserver arbeiten, auf welchen du via (vermutlich) FTP zugreifst. Aber das würde ich nicht unbedingt empfehlen.

per Button eMail senden?

per Button eMail senden?

Quellcode

Quellcode

Teilen

Benutzer online 1