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 Anpassungen an die Homepage werden in der Datei "cart_style.css", Grundeinstellungen in der Datei "settings.php" und Textanpassungen in der Datei "mailcart.php" vorgenommen. Zu beachten wäre, das die Ausrichtung der Postkarte vom linken Seitenrand über die 1. Zeile im Code erfolgt <div style="padding-left: 100px;"> und bei Änderungen in der Datei "cart_style.css" entsprechend angepasst werden muss.

Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Skript auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per <?php include "...."; ?> , um Änderungen 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. Datei "settings.php" öffnen und anpassen.

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"

Downloads:

Hier ist ein sehr einfacher, aber wirkungsvoller Spamschutz zum Einsatz gekommen. Ein Passwort wird vorgegeben und Nutzer muss das Passwort entfernen (das Passwortfeld leeren) um das Formular absenden zu können.

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

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<?php include "wsX5Obj/Obj57_0/mailcart.php"; ?>

alternative Einbindung:

<p class="Obj57_top">Zum Drehen der Postkarte das Motiv, oder die Briefmarke anklicken!</p>
<a name="Obj57_Anker"> </a>
<?php
if ($_POST) {
include "settings.php";
# E-Mail versenden
@mail($an_mail, $_POST['betreff'], $text, "From: " . $_POST['email']. "\n" . 'Content-Type:text/plain; charset="UTF-8"');
# 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 weiterleiten
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 Obj57_check();" style="display: inline;">
<a href="javascript:Obj57_turn(1);">
<img src="wsX5Obj/Obj57_0/bild.jpg" id="bild" width="500" height="357" alt="Foto"
title=" Postkarte umdrehen! " style="display: block;">
</a>
<table width="500" class="Obj57_table" style="display: none;" id="form">
<tr>
<td width="240">
<div class="Obj57_label">Vorname</div>
<input class="Obj57_input" type="text" name="vorname">
<div class="Obj57_label">Nachname</div>
<input class="Obj57_input" type="text" name="nachname">
<div class="Obj57_label">E-Mail-Adresse</div>
<input class="Obj57_input" type="text" name="email">
<div class="Obj57_label">Betreff</div>
<input class="Obj57_input" type="text" name="betreff">
<div class="Obj57_label">Deine Nachricht</div>
<textarea class="Obj57_feld" name="nachricht"></textarea>
<div class="Obj57_label">
Passwort:
<input class="Obj57_passwd" name="captcha" type="text">
<a class="Obj57_red">Feld muss geleert werden!!!</a>
</div>
<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:Obj57_turn(2);">
<img src="wsX5Obj/Obj57_0/porto.jpg" width="80" height="91"
alt="Briefmarke" title=" Postkarte umdrehen! ">
</a>
</div>
<div class="Obj57_sendto">

An:<br>
<strong>X5forum</strong><br>
Home-Wiekau<br>
Musterstr. 1<br><br>
<strong>99999 Musterstadt</strong>
</div>
</td>
</tr>
</table>
</form>
<?php
}
?>

</div>

Nach dem <BODY> Tag

Code Datei "settings.php"

<?php

# Hier die Daten anpassen

$an_mail="kontakt@home-wiekau.de"; // Eigene E-Mail-Adresse
$an_name="Admin";                  // Eigene Anrede (meist: Admin)
$url_name="wsx5obj57.php";         // Script-Seite, wo das Script eingebunden ist
$url_ende="wsx5sys07_a.php";       // Umleitung-Seite, nachdem gesendet wurde

# Diese Nachricht wird an die eigene E-Mail-Adresse gesendet (keine Zeilenumbrüche!)

$text = "Hallo ".$an_name.",\nEs ist eine neue Postkarten-Nachricht von ".$_POST['vorname']." ".$_POST['nachname']." eingegangen:\n\n----------\n".$_POST['nachricht']."\n----------\n\nDer Besucher ist unter dieser E-Mail ereichbar: ".$_POST['email']." .";

Code Datei "cart_style.css"

/* Erste Zeile kann entfernt werden, wenn im HTML-Code auch entfernt wurde */

.Obj57_top { font-size: -2px; text-align: left; margin-bottom: -8px; }

.Obj57_table { background-image: url(papier.jpg); border: 1px solid #000; padding: 5px; }

.Obj57_label { font-family: Tahoma, Arial; font-size: 10px; color: #5F5F5F; text-align: left; margin-left: 10px; }

.Obj57_input {

width: 230px;
border: 1px solid #5F5F5F!important;
background-color: transparent;
font-family: "Comic Sans MS", Verdana, Sans-Serif;
font-size: 12px;
color: #0000A0!important;
padding: 2px;
}

.Obj57_feld {

width: 230px;
height: 130px;
overflow: auto;
border: 1px solid #5F5F5F;
background-color: transparent;
font-family: "Comic Sans MS", Verdana, Sans-Serif;
font-size: 12px;
color: #0000A0;
margin-bottom: 8px;
}

.Obj57_passwd {

width: 50px;
border: 1px solid #f00!important;
background-color: transparent;
font-family: "Comic Sans MS", Verdana, Sans-Serif;
font-size: 12px;
color: #5F5F5F!important;
}

.Obj57_sendto {

font-family: "Comic Sans MS", Verdana, Sans-Serif;
font-size: 16px;
color: #000;
margin-top: 150px;
position: absolute;
left: 300px;
text-align: left;
}

.Obj57_button {

font-family: Verdana, Sans-Serif;
color: #5F5F5F!important;
font-weight: bold!important;
font-size: 12px;
background-color: #B4DA9F!important;
border: 1px solid #5F5F5F!important;
text-align: middle!important;
margin-top: 8px;
padding: 2px;
width: 155px;
}

.Obj57_button:hover { color: #fff!important; background-color: #7C6031!important; }

.Obj57_vertikale { width: 1px; height: 335px; background-color: #797979; }

.Obj57_porto { position: absolute; left: 410px; }

.Obj57_red { color: #f00!important; }

#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 ""

Olaf

09.03.2015, 11:31

+0 -0

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!

Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Bewertung:

Name:

E-Mail:

Kommentar:

Datei Upload:

Captcha:

Vielen Dank für Dein Feedback.

Bitte Dein Feedback Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen. Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.