Kontakt Postkarte - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Kontakt Postkarte

Scripte > Form-Mailer

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


W
eiter 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.


Zum Drehen der Postkarte das Motiv, oder die Briefmarke anklicken!

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
}
?
>

Variante 2

[Objekt HTML]

Code für das HTML-Objekt:

<?php include "mailcart/mailcart.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; }

Feedbacks zu ""

es gibt insgesamt 1 Kommentar(e)


  1. Olaf schreibt am 09.03.2015, 12.31 Uhr

    Hallo! Das mit der Postkarte ist eine nette Geschichte. Danke dafür! Was muss ich wo abändern, damit die Postkarte zentriert, also am oberen Rand mittig, erscheint? Und das mit Vorder- und Rückseite. Danke für die Hilfe!


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 8 Online
 » 23 Heute
 » 440 Woche
 » 3259 Monat
 » 3259 Jahr
 » 249837 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü