Kontakt Postkarte
Kontaktformular im Postkarten-Style
Dieses Script versendet eine E-Mail-Nachricht im Postkarten-Style. Hier muss der Server die Scripssprache PHP beherrschen und JavaScript aktiviert sein, da die Prüfung und Fehlerausgabe durch die Datei "mailcart.js" erfolgt.
Die aufrufende Datei muss somit die Dateiendung .php aufweisen.
Die E-Mail-Postkarte besitzt eine Vorder- und Rückseite. Jeweils beim klick auf das Bild (Rückseite auf Porto), wird die Karte umgedreht.
Wichtig: Der Empfänger erhält keine Poskarte, sondern eine ganz normale E-Mail.
Die ZIP-Datei entpacken und das Verzeichnis "mailcart" auf den Server kopieren.
Danach können die Dateien bild.jpg und poto.jpg gegen eigene Bilder ausgetauscht werden.
Veränderungen/Anpassungen der Style-Eigenschaften werden in der CSS-Datei entsprechend vorgenommen.
Es gibt zur Einbindung zwei Möglichkeiten.
Egal welche Möglichkeit in Betracht gezogen wird, es müssen folgende Parameter in der Datei angepasst werden:
$an_mail="kontakt@home-wiekau.de"; //--> Eigene E-Mail-Adresse
$an_name="Admin"; //--> Eigene Anrede (meist: Admin)
$url_name="kontakt-postkarte.php"; //--> Scrpit-Seite, wo das Script eingebunden ist
$url_ende="kontakt_ok.php"; //--> Seite die nach den Senden aufgerufen werden soll
Weiter unterhalb sollte dann noch die Postkarten-Anschrift entsprechend geändert werden.
Gleichzeitig kann der Text der E-Mail-Nachricht und die Versand-Ausgabe eigenen Bedürfnissen angepasst werden.
Code für den HEAD-Bereich:
[Vor dem /HEAD]
<link rel="stylesheet" type="text/css" href="mailcart/cart_style.css" />
<script type="text/javascript" src="mailcart/mailcart.js"></script>
Variante 1
[Objekt HTML]
Code für das HTML-Objekt:
<font size="-2">
Zum Drehen der Postkarte das Motiv, oder die Briefmarke anklicken!</font>
<?php
if ($_POST) {
# Hier die Daten anpassen
$an_mail="mail@domain.de"; //--> Eigene E-Mail-Adresse
$an_name="Admin"; //--> Eigene Anrede (meist: Admin)
$url_name="kontakt-postkarte.php"; //--> Scrpit-Seite, wo das Script eingebunden ist
$url_ende="kontakt_ok.php"; //--> Seite die nach den Senden aufgerufen werden soll
# Diese Nachricht wird an die eigene E-Mail-Adresse gesendet
$text = "Hallo ".$an_name.",\nDu hast eine neue Postkarten-Nachricht von ".$_POST['vorname']." ".$_POST['nachname']." erhalten:\n\n=====\n".$_POST['nachricht']."\n=====\n\nDu kannst den Besucher unter dieser E-Mail ".$_POST['email']." erreichen.
";
# E-Mail versenden
@mail($an_mail, $_POST['betreff'], $text, "From: " . $_POST['email']);
# Sendungsmeldung anzeigen
echo "<table cellPadding='0' cellSpacing='0'>
<tr>
<td id='layer'>
<div id='filter'>
Hallo ".$_POST['vorname']." ".$_POST['nachname'].", <br>
die Postkarte wurde <br>
gesendet - Vielen Dank!
</div>
</td>
</tr>
</table> ";
# Seite nach Senden aktualisieren
echo '<meta http-equiv="refresh" content="5; url='.$url_ende.'">';
}
else { ?>
<form name="Formular" action="<?php echo $url_name; ?>"
method="post" onSubmit="return eingaben_ueberpruefen();" style="display: inline;">
<a href="javascript:drehen(1);">
<img src="mailcart/bild.jpg" id="bild" border="0"
width="500" height="357" alt="" title=" Postkarte umdrehen! " style="display: block;">
</a>
<table width="500" class="tabelle" style="display: none;" id="form">
<tr>
<td width="240">
<input type="text" class="eingabe" name="vorname">
<div class="anschrift">Vorname</div>
<input type="text" class="eingabe" name="nachname">
<div class="anschrift">Nachname</div>
<input type="text" class="eingabe" name="email">
<div class="anschrift">E-Mail-Adresse</div>
<input type="text" class="eingabe" name="betreff">
<div class="anschrift">Betreff</div>
<span class="message">Deine Nachricht:</span><br>
<textarea name="nachricht" class="eingabefeld"></textarea>
<input type="submit" value="Postkarte absenden" class="button">
</td>
<td width="1%"><div class="vertikale_linie"></div></td>
<td valign="top">
<div class="porto">
<a href="javascript:drehen(2);">
<img src="mailcart/porto.jpg" width="80" height="91" alt="" border="0" title=" Postkarte umdrehen! ">
</a>
</div>
<div class="empfaenger">
<!-- Hier die Postkarten-Anschrift eintragen -->
An: <br>
<strong>X5forum<br>
Home-Wiekau</strong> <br>
Musterstr. 1 <br><br>
<strong>99999 Musterstadt </strong>
</div>
</td>
</tr>
</table>
</form>
<?php
}
?>
Code der CSS-Datei (cart_style.css):
.eingabe { border: 0px; width: 230px; border-bottom: solid 1px #000000; background-color: transparent; font-family: "Comic Sans MS", Verdana, Sans-Serif; font-size: 12px; color: #0000A0; }
.eingabefeld { width: 230px; height: 110px; overflow: auto; border: solid 1px #000000; background-color: transparent; font-family: "Comic Sans MS", Verdana, Sans-Serif; font-size: 12px; color: #0000A0; }
.tabelle {background-image: url(../mailcart/papier.jpg); border: solid 1px #000000; padding: 10px;}
.porto { position:absolute; left:410px; }
.empfaenger { font-family: "Comic Sans MS", Verdana, Sans-Serif; font-size: 16px; color: #000000; margin-top: 150px; position:absolute; left:300px; }
.button { font-family: Verdana, Sans-Serif; color: #000000; text-decoration: underline; font-weight: bold; font-size: 12px; background-color: transparent; border: 0; margin-top: 10px; margin-left: 35px; width: 155px; }
.vertikale_linie { width: 1px; height: 335px; background-color: #797979; }
.anschrift { font-family: Tahoma,Arial; font-size: 10px; color: #5F5F5F; }
.message { font-family: Tahoma,Arial; font-size: 10px; color: #5F5F5F; text-decoration: underline blink; }
#filter { width: 255px; height: 100px; padding-left: 15px; padding-top: 15px; font-family: "Comic Sans MS", Verdana, Sans-Serif; font-size: 17px; font-weight: bold; color: #000000; text-align: center; background-color: #FFFFFF; margin-left: 100px; filter: alpha(opacity=50); opacity: 0.5; }
#layer { width: 500px; height: 357px; background-image: url(../mailcart/bild.jpg); background-repeat: no-repeat; padding: 20px; }