Kontakt Postkarte - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
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"
Download Button
x runter geladen!
Zum Drehen der Postkarte das Motiv, oder die Briefmarke anklicken!  
Foto
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">&nbsp;</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 anzeigen
echo "<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 aktualisieren
echo '<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.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 43 Heute
» 158 Gestern
» 201 Woche
» 3810 Monat
» 127180 Jahr
» 454936 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt