Kontakt Postkarte - Website X5 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. 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"
Download Button
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!

 
Foto
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj57_0/cart_style.css" />
<script src="wsX5Obj/Obj57_0/mailcart.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj57_0/mailcart.php"; ?>

alternative Einbindung:
<!-- Einstellung Abstand vom linken Rand, bei Änderung auch in cart_style.css (porto und sendto) anpassen-->
<div style="padding-left: 100px;">
<!-- Die 1. Zeile kann entfernt werden -->
<p class="Obj57_top">Zum Drehen der Postkarte das Motiv, oder die Briefmarke anklicken!</p>
<a name="Obj57_Anker">&nbsp;</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">
<!-- Hier die Postkarten-Anschrift eintragen -->
An:<br>
<strong>X5forum</strong><br>
Home-Wiekau<br>
Musterstr. 1<br><br>
<strong>99999 Musterstadt</strong>
</div>
</td>
</tr>
</table>
</form>
<?php
}
?>
</div>
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.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 28 Heute
            » 105 Gestern
            » 964 Woche
            » 3636 Monat
            » 53939 Jahr
            » 278145 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt