Kontakt Postkarte
Scripte > Form-Mailer
Kontaktformular im Postkarten-Style
Dieses Script versendet eine E-Mail-Nachricht im Postkarten-Style.
Die E-Mail-Postkarte besitzt eine Vorder- und Rückseite, wo die Bild-Dateien entsprechend ausgetauscht werden können. Jeweils beim klick auf das Bild (Rückseite auf Porto), wird die Karte umgedreht. Die Prüfung und Fehlerausgabe erfolgt durch die Datei "mailcart.js". Der Empfänger erhält keine Poskarte, nur eine normale E-Mail.
Die E-Mail-Postkarte besitzt eine Vorder- und Rückseite, wo die Bild-Dateien entsprechend ausgetauscht werden können. Jeweils beim klick auf das Bild (Rückseite auf Porto), wird die Karte umgedreht. Die Prüfung und Fehlerausgabe erfolgt durch die Datei "mailcart.js". Der Empfänger erhält keine Poskarte, nur eine normale E-Mail.
Veränderungen/Anpassungen der Style-Eigenschaften werden in der CSS-Datei entsprechend vorgenommen.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per <?php include "...."; ?> , um Textänderungen des Menüs nur in einer Datei durchführen zu müssen. Hier muss aber die ausführende Datei die Dateiendung .php aufweisen, um den Code ausführen zu können.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.php ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.php"
Code für den <HEAD> Bereich
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj57_0/cart_style.css" />
<script type="text/javascript" src="wsX5Obj/Obj57_0/mailcart.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj57_0/mailcart.php"; ?>
alternative Einbindung:
<!-- Diese Zeile kann entfernt werden -->
<font size="-2">Zum Drehen der Postkarte das Motiv, oder die Briefmarke anklicken!</font>
<a name="Obj57_Anker"> </a>
<?php
if ($_POST) {
# Hier die Daten anpassen$an_mail="kontakt@home-wiekau.de"; // Eigene E-Mail-Adresse$an_name="Admin"; // Eigene Anrede (meist: Admin)$url_name="kontakt-postkarte.php"; // Script-Seite, wo das Script eingebunden ist$url_ende="kontakt_ok.php"; // Umleitung-Seite, nachdem gesendet wurde# Diese Nachricht wird an die eigene E-Mail-Adresse gesendet (keine Zeilenumbrüche!)$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']);# Meldung anzeigenecho "<table cellPadding='0' cellSpacing='0'>
<tr>
<td id='Obj57_layer'>
<div id='Obj57_filter'>
Hallo ".$_POST['vorname']." ".$_POST['nachname'].", <br>die Postkarte wurde <br>gesendet - Vielen Dank!
</div>
</td>
</tr>
</table> ";# Seite nach Senden aktualisierenecho '<meta http-equiv="refresh" content="8; url='.$url_ende.'">';} else
{
?>
<form name="Formular" action="<?php echo $url_name; ?>#Obj57_Anker"
method="post" onSubmit="return eingaben_ueberpruefen();" style="display: inline;"><a href="javascript:drehen(1);"><img src="wsX5Obj/Obj57_0/bild.jpg" id="bild" border="0"width="500" height="357" alt="Foto" title=" Postkarte umdrehen! " style="display: block;"></a><table width="500" class="Obj57_tabelle" style="display: none;" id="form">
<tr>
<td width="240">
<input class="Obj57_eingabe" type="text" name="vorname"><div class="Obj57_anschrift">Vorname</div><input class="Obj57_eingabe" type="text" name="nachname"><div class="Obj57_anschrift">Nachname</div><input class="Obj57_eingabe" type="text" name="email"><div class="Obj57_anschrift">E-Mail-Adresse</div><input class="Obj57_eingabe" type="text" name="betreff"><div class="Obj57_anschrift">Betreff</div><span class="Obj57_message">Deine Nachricht:</span><br><textarea class="Obj57_feld" name="nachricht"></textarea><input class="Obj57_button" type="submit" value="Postkarte absenden">
</td><td width="1%"><div class="Obj57_vertikale"></div></td><td valign="top">
<div class="Obj57_porto"><a href="javascript:drehen(2);"><img src="wsX5Obj/Obj57_0/porto.jpg" width="80" height="91"alt="Briefmarke" border="0" title=" Postkarte umdrehen! "></a></div><div class="Obj57_sendto"><!-- Hier die Postkarten-Anschrift eintragen -->An:<br><strong>X5forum</strong><br><strong>Home-Wiekau</strong><br>Musterstr. 1<br><br><strong>99999 Musterstadt</strong></div>
</td>
</tr>
</table>
</form>
<?php
}
?>
Code Datei "cart_style.css"
.Obj57_tabelle { background-image: url(papier.jpg); border: solid 1px #000; padding: 10px; }
.Obj57_vertikale { width: 1px; height: 335px; background-color: #797979; }
.Obj57_anschrift { font-family: Tahoma, Arial; font-size: 10px; color: #5F5F5F; }
.Obj57_message { font-family: Tahoma,Arial; font-size: 10px; color: #5F5F5F; text-decoration: underline blink; }
.Obj57_porto { position: absolute; left: 410px; }
.Obj57_eingabe {
border: 0px;width: 230px;border-bottom: solid 1px #000;background-color: transparent;font-family: "Comic Sans MS", Verdana, Sans-Serif;font-size: 12px;color: #0000A0;}
.Obj57_feld {
width: 230px;height: 145px;overflow: auto;border: solid 1px #000;background-color: transparent;font-family: "Comic Sans MS", Verdana, Sans-Serif;font-size: 12px;color: #0000A0;}
.Obj57_sendto {
font-family: "Comic Sans MS", Verdana, Sans-Serif;font-size: 16px;color: #000;margin-top: 150px;position: absolute;left: 300px;}
.Obj57_button {
font-family: Verdana, Sans-Serif;color: #000;text-decoration: underline;font-weight: bold;font-size: 12px;background-color: transparent;border: 0px;margin-top: 10px;margin-left: 35px;width: 155px;}
#Obj57_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: #000;text-align: center;background-color: #FFF;margin-left: 100px;filter: alpha(opacity=50);opacity: 0.5;}
#Obj57_layer {
width: 500px;height: 357px;background-image: url(bild.jpg);background-repeat: no-repeat;padding: 20px;}
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.