Guten Tag,
ich habe mir heute aus dem Internet eine Vorlage für eine PHPMail rausgesucht, welche auch wunderbar Funktioniert.
Jedoch möchte ich die E-Mail auch noch Designen, also dort wo sie später ankommt.
Das ist mein derzeitiger HTML Code mit den Eingabefeldern etc.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bewerben</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bewerben">
<meta name="author" content="CuzImCloud">
<link href="css/bewerben.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny|Russo+One" rel="stylesheet">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:100,300,regular,700,900' type='text/css'>
<link rel="shortcut icon" type="image/x-icon" href="../img/fav.png">
</head>
<body>
<form method="post" action="skript.php">
<div class="balken">
<a href="../team.html" class="myButton">Team</a>
<a href="#" class="myButton">Forum</a>
<a href="../index.html" class="myButton">Startseite</a>
<a href="../index.html" class="myButton2">Bewerben</a>
<a href="#" class="myButton">Voten</a>
</div>
<div class="ueberschrift">
<div class="bewerben1"><p style="color: white; margin-bottom: 20px; margin-top: -50px; font-size: 25px;">Du möchtest dich bei uns Bewerben? Dann Tue dies gerne hier.</p><br /></div>
<div class="bewerben1"><p style="color: white; margin-bottom: 20px; margin-top: -40px; font-size: 25px;">Wir freuen uns auf deine Bewerbung!</p></div>
<hr></hr><br /><br />
<div class="req">Felder mit einem <span class="required" style="color:red"> * </span>sind Pflichtfelder!</div>
<label>Name</label><span class="required" style="color:red"> *</span><br />
<br />
<input type="text" name="Name" class="inputName" placeholder="Dein Ingame Name" size="35" autocomplete="off" style="color: white;" required/><br /><br />
<label>E-Mail</label><span class="required" style="color:red"> *</span><br />
<br />
<input type="text" name="E-Mail Adresse:\n" class="inputEMail" placeholder="Deine E-Mail Adresse" size="35" autocomplete="off" style="color: white;" required/><br /><br /><br />
<!-- Hier ist das Dropdown Menü -->
<form method="POST">
<b>Als was möchtest du dich Bewerben?:</b><span class="required" style="color:red" required> *</span><br /><br />
<select name="rang" class="dropAls" size="1" style="width: 328px;" required>
<option value="" disabled selected>« Bitte auswählen »</option>
<option style="color: black" disabled>---------------------------------------------------------------------------------</option>
<option style="color: black">Moderator</option>
<option style="color: black">Supporter</option>
<option style="color: black">Designer</option>
</select>
</form>
<br /><br />
<!-- Hier ist das Dropdown Menü -->
<label>Nachricht</label><span class="required" style="color:red"> *</span><br />
<br />
<textarea name="Nachricht" cols="60" rows="8" class="inputNachricht" placeholder="Bitte erzähle einiges über dich!
Bitte nenne die unten genannten Forderungen!
Dein Name:
Dein Alter
Wieso bewirbst du dich bei uns?
Warum sollten wir genau dich annehmen?"
autocomplete="off"></textarea><br /><br />
<input type="submit" name="submit" value="Senden"/>
</form>
</div>
</body>
</html>
<!-- Hier fangen wir an die Seite zu Designen!! -->
<style>
body {
background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55) 70%, rgba(66, 134, 244, 0.45) 99%),
url("../img/bg.jpg") no-repeat center center;
background-size: cover;
text-align: center;
background-attachment: fixed;
margin-top: 70px;
}
.req {
text-align: center;
margin-top: -30px;
margin-bottom: 40px;
font-family: arial;
}
:required {
color: red;
}
.myButton:hover {
background-color: rgba(216,0,0,0.4);
}
.balken {
justify-content: space-between;
padding-right: none;
padding: 15px;
margin-top: -60px;
margin-bottom: 20px;
background-color: rgba(16,0,0,0.4);
color: white;
text-align: center;
height: 70px;
}
.myButton2 {
background-color:#007dc1;
display:inline-block;
color:Red;
border-radius: 10px;
font-family:Arial Black;
font-size:13px;
padding:25px 70px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
padding-right: none;
background-color: rgba(16,0,0,0.4);
text-align: center;
}
.myButton {
background-color:#007dc1;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding:17px 70px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
border-radius: 10px;
padding-right: none;
background-color: rgba(16,0,0,0.4);
text-align: center;
}
.ueberschrift {
background: rgba(0,0,0,0.4);
padding: 87px;
margin-left: 6px;
font-size: 17px;
color: white;
font-family: Arial Black;
}
input::placeholder {
text-align: center;
}
.inputName{
outline: 0;
border-radius: 5px;
}
.inputEMail {
outline: 0;
border-radius: 5px;
}
.inputNachricht {
outline: 0;
border-radius: 5px;
}
.inputGrund {
outline: 0;
border-radius: 5px;
}
.dropAls {
outline: 0;
border-radius: 5px;
width: 335px;
text-align: center;
font
height: 50px;
color: white;
background-color: rgba(240,255,255,0.10);
text-align: center;
font-family: Arial Black;
}
.dropAls:option {
background-color: blue;
}
input {
background-color: rgba(240,255,255,0.10);
text-align: center;
font-family: Arial Black;
}
textarea {
background-color: rgba(240,255,255,0.10);
font-family: Arial Black;
color: white;
}
textarea.placeholder {
text-align: center;
}
.bewerben1 {
font-family: Russo One;
}
</style>
Alles anzeigen
Und das hier ist die php Datei mit der mail Funktion (Internet):
PHP
<?php
// ======= Konfiguration:
$mailTo = 'EMAIL';
$mailFrom = '"Bewerbung';
$mailSubject = 'Feedback';
$returnPage = 'gesendet.php';
$returnErrorPage = 'error.php';
$mailText = "";
// ======= Text der Mail aus den Formularfeldern erstellen:
// Wenn Daten mit method="post" versendet wurden:
if(isset($_POST)) {
// alle Formularfelder der Reihe nach durchgehen:
foreach($_POST as $name => $value) {
// Wenn der Feldwert aus mehreren Werten besteht:
// (z.B. <select multiple>)
if(is_array($value)) {
// "Feldname:" und Zeilenumbruch dem Mailtext hinzufügen
$mailText .= $name . ":\n\n";
// alle Werte des Feldes abarbeiten
foreach($valueArray as $entry) {
// Einrückungsleerzeichen, Wert und Zeilenumbruch
// dem Mailtext hinzufügen
$mailText .= " " . $value . "";
} // ENDE: foreach
} // ENDE: if
// Wenn der Feldwert ein einzelner Feldwert ist:
else {
// "Feldname:", Wert und Zeilenumbruch dem Mailtext hinzufügen
$mailText .= $name . ": " . $value . "\n\n\n\n\n\n\n";
} // ENDE: else
} // ENDE: foreach
} // if
// ======= Korrekturen vor dem Mailversand
// Wenn PHP "Magic Quotes" vor Apostrophzeichen einfügt:
if(get_magic_quotes_gpc()) {
// eventuell eingefügte Backslashes entfernen
$mailtext = stripslashes($mailtext);
}
// ======= Mailversand
// Mail versenden und Versanderfolg merken
$mailSent = @mail($mailTo, $mailSubject, $mailText, "From: ".$mailFrom);
// ======= Return-Seite an den Browser senden
// Wenn der Mailversand erfolgreich war:
if($mailSent == TRUE) {
// Seite "Formular verarbeitet" senden:
header("Location: " . $returnPage);
}
// Wenn die Mail nicht versendet werden konnte:
else {
// Seite "Fehler aufgetreten" senden:
header("Location: " . $returnErrorPage);
}
// ======= Ende
exit();
?>
Alles anzeigen
Wie kann ich das genau Designen?
Also das ich BSP in der E-Mail ein Logo hinzufügen kann, oder eine Tabelle erstellen kann.
Vielleicht kann mir das jemand Anhand meines Codes zeigen.
Gruß
CuzImCloud!