per Button eMail senden?

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • per Button eMail senden?

    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.
  • Ohne weiteres kommst du da nicht weit. Du kannst natürlich einen mailto-Link senden:

    Source Code

    1. <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.
    =O
  • Also ich habe bis jetzt das alles, siehe Code.

    Source Code

    1. <style type="text/css">
    2. <!--
    3. .classname {
    4. -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    5. -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    6. box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    7. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    8. background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    9. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    10. background-color:#79bbff;
    11. -webkit-border-top-left-radius:0px;
    12. -moz-border-radius-topleft:0px;
    13. border-top-left-radius:0px;
    14. -webkit-border-top-right-radius:0px;
    15. -moz-border-radius-topright:0px;
    16. border-top-right-radius:0px;
    17. -webkit-border-bottom-right-radius:0px;
    18. -moz-border-radius-bottomright:0px;
    19. border-bottom-right-radius:0px;
    20. -webkit-border-bottom-left-radius:0px;
    21. -moz-border-radius-bottomleft:0px;
    22. border-bottom-left-radius:0px;
    23. text-indent:0;
    24. border:1px solid #84bbf3;
    25. display:inline-block;
    26. color:#ffffff;
    27. font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
    28. font-size:13px;
    29. font-weight:bold;
    30. font-style:normal;
    31. height:27px;
    32. line-height:27px;
    33. width:145px;
    34. text-decoration:none;
    35. text-align:center;
    36. text-shadow:1px 1px 0px #528ecc;
    37. }
    38. a {
    39. color: #fff;
    40. text-decoration:none;
    41. font-weight: bold;
    42. }
    43. .classname:hover {
    44. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    45. background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    46. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    47. background-color:#378de5;
    48. color:#ffffff;
    49. text-decoration:none;
    50. }
    51. .classname:active {
    52. position:relative;
    53. top:1px;
    54. color:#ffffff;
    55. text-decoration:none;
    56. font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
    57. font-size: 13px;
    58. }
    59. .moep {
    60. font-size: 9px;
    61. font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
    62. color: #999;
    63. }
    64. .good {
    65. font-size: 13px;
    66. font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
    67. }
    68. .überschrift {
    69. font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
    70. }
    71. .artikel {
    72. font-size: 12px;
    73. font-family: "Droid Sans", "Helvetica Neue", Helvetica, sans-serif;
    74. color: #FFF;
    75. font-weight: bold;
    76. }
    77. -->
    78. </style>
    79. <table width="50%">
    80. <tr>
    81. <td><table width="700">
    82. <tr>
    83. <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>
    84. <h2>Counter-Strike Source<br>Clan/War Server</h2></td>
    85. </tr>
    86. <tr>
    87. <td><table width="100%">
    88. <tr>
    89. <td width="102" align="center" bgcolor="#2e709e" class="artikel">Artikel-Nr.: 00000</td>
    90. <td width="348">&nbsp;</td>
    91. <td width="250">&nbsp;</td>
    92. </tr>
    93. </table>
    94. </td>
    95. </tr>
    96. <tr>
    97. <td><table width="700">
    98. <tr>
    99. <td class="good" width="180">&nbsp;</td>
    100. <td width="520">&nbsp;</td>
    101. </tr>
    102. <tr>
    103. <td width="180">&nbsp;</td>
    104. <td width="520">&nbsp;</td>
    105. </tr>
    106. <tr>
    107. <td class="good" width="180"><span Style="color:#F00;">*</span>&nbsp;Vollst&auml;ndiger Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    108. <td width="520"><table width="100%">
    109. <tr>
    110. <td width="180"><input name="Nachname" type="text" size="25" maxlength="40"></td>
    111. <td width="340"><input name="Vorname" type="text" size="25" maxlength="40"></td>
    112. </tr>
    113. </table></td>
    114. </tr>
    115. <tr>
    116. <td width="180">&nbsp;</td>
    117. <td width="520"><table width="100%">
    118. <tr>
    119. <td width="185" valign="top" class="moep">&nbsp;Nachname</td>
    120. <td width="320" valign="top" class="moep">&nbsp;&nbsp;Vorname</td>
    121. </tr>
    122. </table></td>
    123. </tr>
    124. <tr>
    125. <td width="180">&nbsp;</td>
    126. <td width="520">&nbsp;</td>
    127. </tr>
    128. <tr>
    129. <td class="good" width="180"><span Style="color:#F00;">*</span>&nbsp;Anschrift:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    130. <td width="520"><table width="100%">
    131. <tr>
    132. <td width="285"><input name="Straße" type="text" size="44" maxlength="40"></td>
    133. <td width="220"><input name="Hausnummer" type="text" size="6" maxlength="5"></td>
    134. </tr>
    135. </table></td>
    136. </tr>
    137. <tr>
    138. <td width="180">&nbsp;</td>
    139. <td width="520"><table width="100%">
    140. <tr>
    141. <td width="295" valign="top" class="moep">&nbsp;Stra&szlig;e</td>
    142. <td width="205" valign="top" class="moep">&nbsp;&nbsp;Hausnr.</td>
    143. </tr>
    144. </table>
    145. </tr>
    146. <tr>
    147. <td class="good" width="180">&nbsp;</td>
    148. <td width="520"><table width="100%">
    149. <tr>
    150. <td width="73"><input name="PLZ" type="text" size="6" maxlength="10"></td>
    151. <td width="125"><input name="Stadt" type="text" size="15" maxlength="40"></td>
    152. <td width="297"><select name="Länder">
    153. <option value="Deutschland">Deutschland</option>
    154. <option value="Österreich">&Ouml;sterreich</option>
    155. <option value="Schweiz">Schweiz</option>
    156. <option value="anderes">anderes</option>
    157. </select>
    158. </td>
    159. </tr>
    160. </table></td>
    161. </tr>
    162. <tr>
    163. <td width="180">&nbsp;</td>
    164. <td width="520"><table width="100%">
    165. <tr>
    166. <td width="70" valign="top" class="moep">&nbsp;Postleitzahl</td>
    167. <td width="125" valign="top" class="moep">&nbsp;&nbsp;Stadt</td>
    168. <td width="300" valign="top" class="moep">&nbsp;&nbsp;Land</td>
    169. </tr>
    170. </table></td>
    171. </tr>
    172. <tr>
    173. <td width="180">&nbsp;</td>
    174. <td width="520">&nbsp;</td>
    175. </tr>
    176. <tr>
    177. <td class="good" width="180"><span Style="color:#F00;">*</span>&nbsp;e-Mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    178. <td><table width="520">
    179. <tr>
    180. <td><input name="email" type="text" size="25" maxlength="40"></td>
    181. </tr>
    182. </table></td>
    183. </tr>
    184. <tr>
    185. <td width="180">&nbsp;</td>
    186. <td width="520">&nbsp;</td>
    187. </tr>
    188. <tr>
    189. <td class="good" width="180"><span Style="color:#F00;">*</span>&nbsp;Vertragsart:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    190. <td><table width="520">
    191. <tr>
    192. <td><select name="VArten">
    193. <option value="Prepaid">Prepaid (Keine Vertragsbindung)</option>
    194. </select>
    195. </td>
    196. </tr>
    197. </table></td>
    198. </tr>
    199. <tr>
    200. <td class="good" width="180">&nbsp;&nbsp;Vorauszahlung:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    201. <td><table width="520">
    202. <tr>
    203. <td><select name="varid[]" id="varid0" class="selectfield" onchange="createprice()">
    204. <option value="VZ1">1 Monat (0.00&nbsp;%)</option>
    205. <option value="689">2 Monate&nbsp;(-5,00&nbsp;%)</option>
    206. <option value="1166">3 Monate&nbsp;(-7,50&nbsp;%)</option>
    207. </select>
    208. </td>
    209. </tr>
    210. </table></td>
    211. </tr>
    212. <tr>
    213. <td class="good" width="180"><span Style="color:#F00;">*</span>&nbsp;Zahlungsarten:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    214. <td><table width="520">
    215. <tr>
    216. <td><select name="VZahlung">
    217. <option value="ZA1">Bank-&Uuml;berweisung</option>
    218. <option value="ZA2">Paypal</option>
    219. <option value="ZA3">Paysafe Card</option>
    220. </select>
    221. </td>
    222. </tr>
    223. </table></td>
    224. </tr>
    225. <tr>
    226. <td width="180">&nbsp;</td>
    227. <td width="520">&nbsp;</td>
    228. </tr>
    229. <tr>
    230. <td class="good" width="180">&nbsp;&nbsp;Einrichtungsgeb&uuml;hr:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    231. <td><table width="520">
    232. <tr>
    233. <td><select name="varid[]" id="varid1" class="selectfield" onchange="createonetime()">
    234. <option value="690">Keine Einrichtungsgeb&uuml;hr&nbsp;(0,00&nbsp;&euro;)</option></select></td>
    235. </tr>
    236. </table></td>
    237. </tr>
    238. <tr>
    239. <td width="180">&nbsp;</td>
    240. <td width="520">&nbsp;</td>
    241. </tr>
    242. <tr>
    243. <td width="180">&nbsp;</td>
    244. <td width="520">&nbsp;</td>
    245. </tr>
    246. <script type="text/javascript">
    247. function createprice(){
    248. var fullp = 11.90;
    249. var months = 1;
    250. var price = 0;
    251. var percent = 0;
    252. if (document.getElementById("varid0").value == 689) {
    253. months = 2;
    254. percent = 0.05;
    255. }
    256. if (document.getElementById("varid0").value == 1166) {
    257. months = 3;
    258. percent = 0.075;
    259. }
    260. price = months * fullp;
    261. if(percent != 0){
    262. var temp = price * percent;
    263. price = price - temp;
    264. }
    265. price = Math.round(price * 100) / 100;
    266. price = price + " ";
    267. price = price.replace(".", ",");
    268. document.getElementById("moneytotal").value = price + "\u20AC" + " inkl. MwSt.";
    269. }
    270. function createonetime(){
    271. var fullp = 0;
    272. if (document.getElementById("varid1").value == 690) {
    273. var varid0 = 0.00;
    274. }
    275. perprice = 0;
    276. calcprice = fullp + varid0;
    277. calcprice = calcprice * perprice / 100 + calcprice;
    278. calcprice = calcprice.toFixed(2);
    279. calcprice = calcprice.replace(".",",");
    280. document.cprice.moneyonetime.value = calcprice + " €" + " inkl. MwSt.";
    281. }
    282. </script>
    283. <tr>
    284. <td>&nbsp;</td>
    285. <td>&nbsp;</td>
    286. </tr>
    287. <tr>
    288. <td class="good" width="180">&nbsp;&nbsp;Einmalige Geb&uuml;hren:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    289. <td width="520"><input type="text" name="moneyonetime" style="border:0px solid;background:none;width:150px;" value="0,00 &euro;&nbsp;inkl. MwSt."></td>
    290. </tr>
    291. <tr>
    292. <td class="good" width="180">&nbsp;&nbsp;<b>Gesamtpreis:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    293. <td width="520"><input id="moneytotal" type="text" name="moneytotal" style="border:0px solid;background:none;width:150px;" value="11,90 &euro;&nbsp;inkl. MwSt."></td>
    294. </tr>
    295. <tr>
    296. <td class="good">&nbsp;</td>
    297. <td>&nbsp;</td>
    298. </tr>
    299. <tr>
    300. <td class="good">&nbsp;</td>
    301. <td><table width="145">
    302. <tr>
    303. <td class="classname"><a href="mailto:fratze3478@gmx.de">Bestellung absenden</a></td>
    304. </tr>
    305. </table></td>
    306. </tr>
    307. <tr>
    308. <td class="good">&nbsp;</td>
    309. <td>&nbsp;</td>
    310. </tr>
    311. </table></td>
    312. </tr>
    313. </table></td>
    314. </tr>
    315. </table>
    Display All


    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 :(
  • 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.
    =O
  • 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.
    =O