Forum
03.12.2008, 18:39

Individuelle Mail-Formulare über die HTML-Includes

Sehr geehrte Kunden,

sollten Sie mal ein E-Mail-Formular selbst individuell gestalten wollen, dann haben wir dazu auf recht einfache Weise eine Möglichkeit bei den HTML-Includes geschaffen. Diese sind ja vorrangig dazu gedacht eigenen Content anzuzeigen. E-Mail-Formulare wurden meist per IFRAME eingebunden. Hier nun die interne einfache Möglichkeit.

Man legt über "Sonstiges" > "HTML-Includes" ein HTML-Include mit folgendem Inhalt an:


<form name="mail_form" method="POST" action="s01.php?shopid=s01&cur=eur&sp=de&ag=1&pp=htm&htmnr=19&htmtitel=Mein_E-Mail_Formular">
<table>
<tr>
<td>Ihre email:</td>
<td><input name="formular_email" type="text"></td>
</tr>
<tr>
<td>Ihre Frage:</td>
<td><input name="formular_frage" type="text"></td>
</tr>
</table>
<input type="image" src="img/ok.gif" border="0" name="submit">
</form>


Für dieses Beispiel haben wir HTML-Include-Nummer 18 verwendet. Die Adresse zu diesem E-Mail-Formular im Shop ist dann:

http://www.testinstallation.de/s01.php?shopid=s01&cur=eur&sp=de&ag=1&pp=htm&htmnr=18&htmtitel=Mein_E-Mail_Formular

Im <form...> Tag selbst in diesem HTML-Include haben wir in der Adresse "..htmnr=19.." verwendet. Bedeutet also HTML-Include-Nummer 19, das also angezeigt werden soll, wenn der Kunde das Formular abgeschickt hat.

Wir legen also ein HTML-Include-Nummer 19 mit z.B. folgendem Inhalt an:

<div style="margin-left:20px;">
<br>Vielen Dank für Ihre Nachricht!<br>Wir werden diese schnellstmöglich bearbeiten und uns bei Ihnen melden.<br><br><br>Mit freundlichen Grüßen<br>
Ihr Team von muster-shop.de<br><br></div>#mailformular


Das enthaltene Synonyme "#mailformular" ist nun der Schlüssel dafür, dass sämtliche POST Parameter dem Shopbetreiber (Sonstiges/Pers.Daten/Feld eMail) zugeschickt werden. Die Mail die man bekommt sieht natürlich recht einfach aus. Angezeigt werden die Feldnamen und deren Inhalte, die der Besucher eingetippt hat.

Formular an eine spezielle eMail Adresse senden:
Auch das ist möglich. dazu folgenden Code nutzen:
<div style="margin-left:20px;">
<br><b>Vielen Dank für Ihre Nachricht!<br>Schnellstmöglich werden wir bla bla bal...!</b><br><br></div>#mailformular#info@meinshop.de

Es ist dabei wichtig, dass dieser Paramater #mailformular# und die dahinter befindliche eMailadresse wirklich ganz am Ende des HTML-Includes gestellt werden.

Dieses Formular Beispiel kann man natürlich auf die unterschiedlichsten Dinge anwenden. z.B. hier:

wird es dafür genutzt um dem Kunden die Möglichkeit zu geben einen Artikel zu melden, dessen Preis man wo anders bei der Konkurrenz günstiger gesehen hat. Das ganze kann man sich noch für x andere Ideen vorstellen und natürlich auch sehr aufwändig designen. Beispielsweise auch für Umfragen!  

Wie immer können wir solche Einrichtungen auch übernehmen.

Das Formularbeispiel funktioniert ohne irgendwelche Feldprüfungen. Wer sich gut mit Javascript auskennt, der kann natürlich auch alle nötigen Prüfungen einbauen.
17.05.2011, 10:45

Formulareingaben per JavaScript überprüfen! (z.B. Pflichtfelder)

... und das muss wie folgt aussehen:

Das "form" muss erweitert werden:

<form name="mail_form" method="POST" action="s01.php?shopid=s01&cur=eur&sp=de&ag=1&pp=htm&htmnr=19&htmtitel" onsubmit="return chkFormular()">


Neu ist hier das ]onsubmit="return chkFormular()" am Ende.

Und zusätzlich muss folgendes über dem HTML-Code hinzugefügt werden:

<script type="text/javascript">
function chkFormular () {
 if (document.mail_form.Email.value == "") {
   alert("Bitte Ihre E-Mail-Adresse eingeben!");
   document.mail_form.Email.focus();
   return false;
 }
 if (document.mail_form.Email.value.indexOf("@") == -1) {
   alert("Keine E-Mail-Adresse!");
   document.mail_form.Email.focus();
   return false;
 }
}
</script>


Damit wird dann geprüft, ob eine E-Mail-Adresse eingegeben wurde bzw. ob in der E-Mail-Adresse auch ein @-Zeichen verwendet wird.

Ansonsten erscheint eine Javascript-Popup-Meldung mit "Bitte Ihre E-Mail-Adresse eingeben!" bzw. "Keine E-Mail-Adresse!".

Wichtig ist hierbei dann auf die Inhalte im Javascript selbst (document.mail_form.Email.value) zu achten, also z.B. "mail_form" oder "Email" bzw. "formular_email". Diese müssen mit den Feldnamen (input name="XXX") im Kontaktformular übereinstimmen!

Einbauen kann man das ebenfalls in dem "Frage zum Artikel"-Formular:

"Rotes T" > "Seitentexte" > Feld: "ArtAnz_Formular":

<script type="text/javascript">
function chkFormular () {
var r_link='#href';
document.mail_form.action=r_link;
 if (document.mail_form.field_01.value == "") {
   alert("Bitte Ihre E-Mail-Adresse eingeben!");
   document.mail_form.field_01.focus();
   return false;
 }
 if (document.mail_form.field_01.value.indexOf("@") == -1) {
   alert("Keine E-Mail-Adresse!");
   document.mail_form.field_01.focus();
   return false;
 }
}
</script>
<table width="100%" style="border: 0 solid #FFFFFF"><tr><td width="*"><span class=b>Bitte E-Mail-Adresse und Ihre Frage im folgendem Formular eintragen und auf OK klicken.<br></span>
<table border="0" width="100%"><tr><td width="22%" align="right" class="nobr"><span class=b>Ihre E-Mail-Adresse:</span></td><form name="mail_form" method="POST" action="#" onsubmit="return chkFormular()">
<td width="78%"><input type="text" name="field_01" value="#mail"></td>
</tr>
<tr><td width="22%" align="right" class="nobr"><span class=b>Ihre Frage:</span></td><td width="78%"><p><textarea cols="33" rows="3" name="field_02"></textarea></p>
</td></tr><tr><td width="22%"></td><td width="78%"><input type="image" src="img/ok.gif" border="0" name="submit"></td></form>
</tr></table></td></tr></table>


P.S. Es sind theoretisch noch viele weitere Feldprüfungen möglich, siehe z.B. de.selfhtml.org/javascript/beispiele/formulareingaben.htm />
Und solche kann man noch sehr viel komplexer gestalten, so dass auch genau die Inhalte auf bestimmte Dinge geprüft werden. Die oben gezeigten Beispiele gehören da sicher zu den etwas simpleren.
05.01.2012, 12:38

Individuelle Mail-Formulare... mit Aufgaben-Stellung

Sehr geehrte Kunden,

hier eine weitere Möglichkeit mit kleiner Aufgaben-Stellung. Da für die Lösung kein Professor in Mathematik benötigt wird sollte das relativ einfach von jedem Kunden zu lösen sein.



Auch hier muss JavaScript im Browser aktiviert sein, damit diese Prüfung funktioniert...

Bei ausgeschaltetem JavaScript lässt sich das Formular weiterhin absenden, aber vielleicht lässt sich dadurch ja doch der eine oder andere Bot oder ungebetene Gast "abschrecken". Das muss man wohl einfach mal ausprobieren.

Eine perfekte Lösung wird es wohl nie geben, denn es SOLL und MUSS auch immer noch für einen erwünschten Kunden einfach sein solche Formulare absenden zu können!

Auf der folgenden Seite finden Sie noch weitere Beispiele: www.web-toolbox.net/webtoolbox/formulare/formulare-captcha.htm />
Vielen Dank an dieser Stelle an
www.321goldundsilbershop.de/ für diese Info.

Den folgenden Code kann man z.B. über das "rote T" > "Seitentexte" in das Feld "ArtAnz_Formular" packen:

<div style="border:1px solid #CECECE; width:350px; height:150px;">
<script type="text/javascript" language="JavaScript">
var zufallszahl01;
var zufallszahl02;

function Schreiben01() {
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
zufallszahl01 = sec % 10;
zufallszahl01 +=1;
zufallszahl02 = (min + sec) % 10;
zufallszahl02 +=1;
document.write("Aufgabe: " + zufallszahl01 + " + " + zufallszahl02 + " = ");
}

function Fragen01() {
document.write('<input class="kurz" onFocus="this.style.background='#FFFFFF';" type="text" id="antwort01" maxlength="3" value="">');
return
}

function Kontrolle01() {
var r_link='#href';
document.mail_form.action=r_link;
var Ergebnis01 = zufallszahl01 + zufallszahl02;
var Eintrag01 = document.getElementById("antwort01").value;

 
  if (document.mail_form.field_01.value == "") {
    alert("Bitte Ihre E-Mail-Adresse eingeben!");
    document.mail_form.field_01.focus();
    return false;
  }
  if (document.mail_form.field_01.value.indexOf("@") == -1) {
    alert("Keine E-Mail-Adresse!");
    document.mail_form.field_01.focus();
    return false;
  }
if(Ergebnis01 != Eintrag01)
  {
  alert("Sorry, Lösung nicht korrekt!");
  document.getElementById("antwort01").value = "";
  document.getElementById("antwort01").focus();
  return false;
  }
}
</script>

<form name="mail_form" method="POST" action="#" onsubmit="return Kontrolle01()">

<table>
<tbody>
<tr>
<td colspan="3" rowspan="1" style="vertical-align: top;"><span class="c2">Stellen Sie hier Ihre Fragen zu dem Artikel</span><br>
</td>
</tr>
<tr>
<td nowrap>Ihre E-Mail-Adresse:</td>
<td colspan="2"><input name="field_01" type="text" value="#mail"></td>
</tr>
<tr>
<td>Ihre Frage:</td>
<td colspan="2"><textarea name="field_02" cols="22" rows="2"></textarea></td>
</tr><tr>
<td><script type="text/javascript" language="JavaScript">Schreiben01()</script></td>
<td><script type="text/javascript" language="JavaScript">Fragen01()</script></td>
<td align="right" valign="bottom"><input src="img/ok.png" name="submit" border="0" type="image"></td>
</tr>
</tbody>
</table>

</form></div>


Hier noch mal der bisherige Standard:

<script type="text/javascript">
function chkFormular () {
var r_link='#href';
document.mail_form.action=r_link;
 if (document.mail_form.field_01.value == "") {
   alert("Bitte Ihre E-Mail-Adresse eingeben!");
   document.mail_form.field_01.focus();
   return false;
 }
 if (document.mail_form.field_01.value.indexOf("@") == -1) {
   alert("Keine E-Mail-Adresse!");
   document.mail_form.field_01.focus();
   return false;
 }
}
</script><div style="border:1px solid #CECECE; width:360px; height:150px;">
<table width="100%"><tr><td width="*"><span class=c2>Frage zum Artikel?</span><br><br>
<table border="0" width="100%"><tr><td width="22%" align="right" class="nobr"><span class=b>E-Mail:</span></td><form name="mail_form" method="POST" action="#" onsubmit="return chkFormular()">
<td width="78%"><input type="text" name="field_01" value="#mail"></td>
</tr>
<tr><td width="22%" align="right" class="nobr"><span class=b>Frage:</span></td><td width="78%"><p><textarea cols="30" rows="2" name="field_02"></textarea></p>
</td></tr><tr><td width="22%"></td><td width="78%"><input type="image" src="img/ok.png" border="0" name="submit"></td></form>
</tr></table></td></tr></table></div>


Forum-Archiv

Alle Beiträge aus:

2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002,