Via Formular Email erstellen

  • Themenstarter Themenstarter shawn-man
  • Beginndatum Beginndatum
S

shawn-man

Hallo zusammen,

ich habe hier mal ein kleines Projekt von einem Freund bekommen, welches ich leider nicht so lösen kann, da mein Wissen in diesem Bereich leider nicht allzu enorm sind.

Darum gehts:
Der jeweilige Benutzer hat ein kleines Formular, welches nach Ausfüllen und Drücken des "Erstellen" Buttons eine fertig erstellte Email (outlook 2002) öffnet.

Wie bekommt man es hin das die Textfelder, wie beispielsweise KDNAME und/oder KDNR auch in den
Body oder der Betreffzeile der eMail übertragen werden?

Hier mal das, was ich bekommen habe, bzw. das was bisher gemacht wurde:

Code: 
<html>
<title>:ServiceTicket:</title>
<head>

</head>


<table border="1" width="400">
  <tr>
    <td>
<table border="0" bgcolor="87CEFA" width="390">
  <tr>
    <td>

<font face="verdana" size="3"><b>Ticketvorlage erstellen?</b></font>
<p>
<form name="doublecombo">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Bitte Bereich wählen</option>
<option>EINKAUF</option>
<option>VERKAUF</option>
</select>
<select name="stage2" size="1">
<option value="">Bitte Team wählen</option>
</select>
</p>
<p><font face="verdana" size="1">
Ticketnummer:<br><input name="TICKETNR" type="text" size="15" maxlength="8" /><br>
Kundenname:<br><input name="KDNAME" type="text" size="30" maxlength="75" /><br>
Kundennr:<br><input name="KDNR" type="text" size="20" maxlength="10" /><p>
</font>
<input type="button" name="test" value="Erstellen!" onClick="go()">

<form method="post">
<input type="button" value="Neu?"
onclick="window.location.reload()">

</form>
<font face="verdana" size="1">Beta-Version 1.0</font>

<script>

<!--
var subject="Ticket   "
var subject2="[TICKETNR]"
var subject3="   [KDNR]"
var bcc="GEHTIMMERANDENTEAMLEITER@TESTPAGE.DE"
var body_start="%0DHallo*"
var body_inhalt1="%0D%0DKd.Name: [KDNAME] "
var body_inhalt2="%0D%0D%0D%0D%0D%0DTel. Kontakt möglich unter: [TELNR] "
var body_ende="%0D%0D----------------------------------------------------------%0DDanke und %0Dmit freundlichen Grüßen%0D%0D// Team Empfang //%0D// Tel.: ****-****** //%0D// Fax: ***-****** //"
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Bitte Team wählen","")

group[1][0]=new Option("","#")
group[1][1]=new Option("TEAM 1 E","mailto:TEAMEINKAUF1@TESTPAGE.de?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[1][2]=new Option("TEAM 2 E","mailto:TEAMEINKAUF2@TESTPAGE.de?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[1][3]=new Option("TEAM 3 E","mailto:TEAMEINKAUF3@TESTPAGE.de?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[1][4]=new Option("TEAM 4 E","mailto:TEAMEINKAUF4@TESTPAGE.de?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[1][5]=new Option("TEAM 5 E","mailto:TEAMEINKAUF5@TESTPAGE.de?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")

group[2][0]=new Option("","#")
group[2][1]=new Option("TEAM 1 V","mailto:TEAMVERKAUF1@TESTPAGE.DE?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[2][2]=new Option("TEAM 2 V","mailto:TEAMVERKAUF2@TESTPAGE.DE?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[2][3]=new Option("TEAM 3 V","mailto:TEAMVERKAUF3@TESTPAGE.DE?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[2][4]=new Option("TEAM 4 V","mailto:TEAMVERKAUF4@TESTPAGE.DE?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[2][5]=new Option("TEAM 5 V","mailto:TEAMVERKAUF5@TESTPAGE.DE?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")
group[2][6]=new Option("TEAM 6 V","mailto:TEAMVERKAUF6@TESTPAGE.DE?SUBJECT="+subject+""+subject2+""+subject3+"   &BCC="+bcc+"&body=  "+body_start+""+body_inhalt1+""+body_inhalt2+""+body_ende+"")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=false
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->

</script>


    </td>
  </tr>
</table>
    </td>
  </tr>
</table>
</html>

Danke im voraus.

MfG
shawn-man

Es kann wohl nur in html/java/javascript umgesetzt werden, da die technischen Voraussetzungen für PHP oder Derartiges nicht gegeben sind.

Danke
shawn-man
 
Hi,

wenn der Versand per Mail erfolgen soll, müssen vor dem Senden die action- und method-Attribute gefüllt werden.

Da hierfür variable Werte herangezogen werden, würde ich die Selekt-Gruppen und die Vorgabewerte anders organisieren.
- In den Optionen stehen nur die Zieladressen
- Der Body-String wird erst kurz vor dem Senden endgültig generiert

Beispiel:
Code: 
<table border="1" width="400">
  <tr>
    <td>
	    <table border="0" bgcolor="87CEFA" width="390">
	      <tr>
	        <td>
	          <font face="verdana" size="3"><b>Ticketvorlage erstellen?</b></font>
	          <form name="doublecombo">
	            <p>
	              <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
	                <option>Bitte Bereich wählen</option>
	                <option>EINKAUF</option>
	                <option>VERKAUF</option>
	              </select>
	              <select name="stage2" size="1">
	                <option value="">Bitte Team wählen</option>
	              </select>
	            </p>
	            <p>
	              <font face="verdana" size="1">
	              Ticketnummer:<br><input name="TICKETNR" type="text" size="15" maxlength="8" /><br>
	              Kundenname:<br><input name="KDNAME" type="text" size="30" maxlength="75" /><br>
	              Telefonnummer:<br><input name="TELNR" type="text" size="30" maxlength="75" /><br>
	              Kundennr:<br><input name="KDNR" type="text" size="20" maxlength="10" />
	              </font>
	            <p>
              <input type="button" name="test" value="Erstellen!" onClick="sendMail(this.form);">
	          </form>

	          <form method="post">
	            <input type="button" value="Neu?" onclick="window.location.reload()">
	          </form>
	          <font face="verdana" size="1">Beta-Version 1.0</font>

<script type="text/javascript">
<!--
// Defaultwerte
var subject="Ticket   ";
var subject2="[TICKETNR]";
var subject3="   [KDNR]";
var bcc="GEHTIMMERANDENTEAMLEITER@TESTPAGE.DE";
var body_start="%0DHallo*";
var kdname = "[KDNAME]";
var telnr = "[TELNR]";
var body_ende="%0D%0D----------------------------------------------------------%0DDanke und %0Dmit freundlichen Grüßen%0D%0D// Team Empfang //%0D// Tel.: ****-****** //%0D// Fax: ***-****** //";

// Sonstiges
var groups=document.doublecombo.example.options.length
var group=new Array(groups)

for (i=0; i<groups; i++)
  group[i]=new Array()

// Arrays für Selectgruppen
group[0][0]=new Option("Bitte Team wählen","")
group[1][0]=new Option("","#")
group[1][1]=new Option("TEAM 1 E","mailto:TEAMEINKAUF1@TESTPAGE.de");
group[1][2]=new Option("TEAM 2 E","mailto:TEAMEINKAUF2@TESTPAGE.de");
group[1][3]=new Option("TEAM 3 E","mailto:TEAMEINKAUF3@TESTPAGE.de");
group[1][4]=new Option("TEAM 4 E","mailto:TEAMEINKAUF4@TESTPAGE.de");
group[1][5]=new Option("TEAM 5 E","mailto:TEAMEINKAUF5@TESTPAGE.de");

group[2][0]=new Option("","#")
group[2][1]=new Option("TEAM 1 V","mailto:TEAMVERKAUF1@TESTPAGE.DE");
group[2][2]=new Option("TEAM 2 V","mailto:TEAMVERKAUF2@TESTPAGE.DE");
group[2][3]=new Option("TEAM 3 V","mailto:TEAMVERKAUF3@TESTPAGE.DE");
group[2][4]=new Option("TEAM 4 V","mailto:TEAMVERKAUF4@TESTPAGE.DE");
group[2][5]=new Option("TEAM 5 V","mailto:TEAMVERKAUF5@TESTPAGE.DE");
group[2][6]=new Option("TEAM 6 V","mailto:TEAMVERKAUF6@TESTPAGE.DE");

var temp=document.doublecombo.stage2

function redirect(x){
  for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null

  for (i=0;i<group[x].length;i++){
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
  }

  temp.options[0].selected=false
}

function sendMail(objForm){
  if(objForm.example.selectedIndex){
    if(objForm.stage2.selectedIndex){
      // Methode festlegen
      objForm.method = "post";

      // E-Mail-Adresse
      objForm.action = objForm.stage2.options[objForm.stage2.selectedIndex].value + "?";
      // Subject
      objForm.action += "subject="+subject+((objForm.TICKETNR.value!="")?objForm.TICKETNR.value:subject2)+((objForm.KDNR.value!="")?objForm.KDNR.value:subject3);
      // Body
      kdname = (objForm.KDNAME.value!="")? objForm.KDNAME.value : kdname;
      telnr  = (objForm.TELNR.value!="")? objForm.TELNR.value : telnr;
	    var body_inhalt1="%0D%0DKd.Name: "+kdname+" ";
	    var body_inhalt2="%0D%0D%0D%0D%0D%0DTel. Kontakt möglich unter: "+telnr+" ";
      objForm.action += "&body="+escape(body_start+body_inhalt1+body_inhalt2+body_ende);
      // BCC
      objForm.action += "&bcc="+bcc;

      // E-Mail-Versand anstossen
      objForm.submit();
    }
  }
}
//-->
</script>
	        </td>
	      </tr>
	    </table>
    </td>
  </tr>
</table>

Beachte, dass die Funktion go durch sendMail im HTML-Bereich ersetzt wurde.

Ausserdem sei angemerkt, dass die Browser sowie die E-Mail-Clients die Optionen unterschiedlich handhaben. So wird z.B. vom Firefox die body-Option nicht unterstützt. Stattdessen werden alle Formularelemente mit den zugehörigen Werten in den Bodybereich geschrieben.

Ciao
Quaese
 
Super geil :D

Danke erstmal dafür Wo kann ich die Preise vergeben? *he he*
So, in etwa hat man sich das vorgestellt.

Aber so 2 Sachen habe ich noch.

Der Inhalt der Email sieht nach Sendevorgang so aus:
Code: 
%250DHallo*%250D%250DKd.Name%3A%20Torben%20Test%20%250D%250D%250D%250D%250D%250DTel.%20Kontakt%20m%F6glich%20unter%3A%200177-12312312%20%250D%250D----------------------------------------------------------%250DDanke%20und%20%250Dmit%20freundlichen%20Gr%FC%DFen%250D%250D//%20Team%20Empfang%20//%250D//%20Tel.%3A%20****-******%20//%250D//%20Fax%3A%20***-******%20//
Und mit der Formatierung habe ich da ein paar kleine Probleme.

Ebenso fehlt in der Betreffzeile zwischen TICKETNR und KDNR ein oder zwei Leerzeichen.

Wie kann ich das einfach realisieren?

Danke schonmal
 
Hi,

ich denke, die Leerzeichen solltest du selbst an die erforderlichen Stellen einfügen können.

Die zusätzlichen Zeichen zu deinem geposteten Text entstehen durch die Funktion escape.
Code: 
objForm.action += "&body="+escape(body_start+body_inhalt1+body_inhalt2+body_ende);

Ciao
Quaese
 
Guten Morgen.

Code: 
objForm.action += "&body="+escape(body_start+body_inhalt1+body_inhalt2+body_ende);

wurde von mir bereits in unescape geändert.
Leerzeichen werden im Bodybereich übernommen, nützt aber leider nichts wenn der Text so an einander gereiht wird. Einen Zeilenumbruch habe ich bis dato "nicht" hinbekommen.

Sobald man über das Formular die Ticketnummer und die Kundennummer einträgt und dann sendet, setzen sich beide Nummern direkt hintereinander (aber nur wenn Sie im Formular angegeben werden, lässt man sie weg, werden die Leerzeichen berücksichtigt ?).

Gibt es denn evtl. die Möglichkeit einen Zeilenumbruch zu erzwingen?
Ich habe von
Code: 
<p> bis \n
Alles ausprobiert, leider ohne Erfolg.
 
Ich krieg es einfach nicht hin.

Wo müsste ich den z.B. im CODE von Quaese, \n in Kombination mit enctype="text/plain" ansetzen?
 
Das sollte dann so aussehen:
Code: 
<table border="1" width="400">
  <tr>
    <td>
	    <table border="0" bgcolor="87CEFA" width="390">
	      <tr>
	        <td>
	          <font face="verdana" size="3"><b>Ticketvorlage erstellen?</b></font>
	          <form name="doublecombo" enctype="text/plain">
	            <p>
	              <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
	                <option>Bitte Bereich wählen</option>
	                <option>EINKAUF</option>
	                <option>VERKAUF</option>
	              </select>
	              <select name="stage2" size="1">
	                <option value="">Bitte Team wählen</option>
	              </select>
	            </p>
	            <p>
	              <font face="verdana" size="1">
	              Ticketnummer:<br><input name="TICKETNR" type="text" size="15" maxlength="8" /><br>
	              Kundenname:<br><input name="KDNAME" type="text" size="30" maxlength="75" /><br>
	              Telefonnummer:<br><input name="TELNR" type="text" size="30" maxlength="75" /><br>
	              Kundennr:<br><input name="KDNR" type="text" size="20" maxlength="10" />
	              </font>
	            <p>
              <input type="button" name="test" value="Erstellen!" onClick="sendMail(this.form);">
	          </form>

	          <form method="post">
	            <input type="button" value="Neu?" onclick="window.location.reload()">
	          </form>
	          <font face="verdana" size="1">Beta-Version 1.0</font>

<script type="text/javascript">
<!--
// Defaultwerte
var subject="Ticket   ";
var subject2="[TICKETNR]";
var subject3="   [KDNR]";
var bcc="GEHTIMMERANDENTEAMLEITER@TESTPAGE.DE";
var body_start="\nHallo*";
var kdname = "[KDNAME]";
var telnr = "[TELNR]";
var body_ende="\n\n----------------------------------------------------------\nDanke und \nmit freundlichen Grüßen\n\n// Team Empfang //\n// Tel.: ****-****** //\n// Fax: ***-****** //";

// Sonstiges
var groups=document.doublecombo.example.options.length
var group=new Array(groups)

for (i=0; i<groups; i++)
  group[i]=new Array()

// Arrays für Selectgruppen
group[0][0]=new Option("Bitte Team wählen","")
group[1][0]=new Option("","#")
group[1][1]=new Option("TEAM 1 E","mailto:TEAMEINKAUF1@TESTPAGE.de");
group[1][2]=new Option("TEAM 2 E","mailto:TEAMEINKAUF2@TESTPAGE.de");
group[1][3]=new Option("TEAM 3 E","mailto:TEAMEINKAUF3@TESTPAGE.de");
group[1][4]=new Option("TEAM 4 E","mailto:TEAMEINKAUF4@TESTPAGE.de");
group[1][5]=new Option("TEAM 5 E","mailto:TEAMEINKAUF5@TESTPAGE.de");

group[2][0]=new Option("","#")
group[2][1]=new Option("TEAM 1 V","mailto:TEAMVERKAUF1@TESTPAGE.DE");
group[2][2]=new Option("TEAM 2 V","mailto:TEAMVERKAUF2@TESTPAGE.DE");
group[2][3]=new Option("TEAM 3 V","mailto:TEAMVERKAUF3@TESTPAGE.DE");
group[2][4]=new Option("TEAM 4 V","mailto:TEAMVERKAUF4@TESTPAGE.DE");
group[2][5]=new Option("TEAM 5 V","mailto:TEAMVERKAUF5@TESTPAGE.DE");
group[2][6]=new Option("TEAM 6 V","mailto:TEAMVERKAUF6@TESTPAGE.DE");

var temp=document.doublecombo.stage2

function redirect(x){
  for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null

  for (i=0;i<group[x].length;i++){
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
  }

  temp.options[0].selected=false
}

function sendMail(objForm){
  if(objForm.example.selectedIndex){
    if(objForm.stage2.selectedIndex){
      // Methode festlegen
      objForm.method = "post";

      // E-Mail-Adresse
      objForm.action = objForm.stage2.options[objForm.stage2.selectedIndex].value + "?";
      // Subject
      objForm.action += "subject="+subject+((objForm.TICKETNR.value!="")?objForm.TICKETNR.value:subject2)+((objForm.KDNR.value!="")?objForm.KDNR.value:subject3);
      // Body
      kdname = (objForm.KDNAME.value!="")? objForm.KDNAME.value : kdname;
      telnr  = (objForm.TELNR.value!="")? objForm.TELNR.value : telnr;
	    var body_inhalt1="\n\nKd.Name: "+kdname+" ";
	    var body_inhalt2="\n\n\n\n\n\nTel. Kontakt möglich unter: "+telnr+" ";
      objForm.action += "&body="+escape(body_start+body_inhalt1+body_inhalt2+body_ende);
      // BCC
      objForm.action += "&bcc="+bcc;

      // E-Mail-Versand anstossen
      objForm.submit();
    }
  }
}
//-->
</script>
	        </td>
	      </tr>
	    </table>
    </td>
  </tr>
</table>
 
Ich bin der Ochs vom Berg.
Besten Dank...

Hab es einfach nicht gerallt, oder übersehen, oder wie auch immer.

Jetzt stellt sich der Body-Bereich der Email wesentlich besser dar. Jetzt das ABER:
Es werden leider nicht mehr die vordefinierten Sachen wie

- var body_start="Hallo*";
oder
-var body_ende="\n\n----------------------------------------------------------\nDanke und \nmit freundlichen Grüßen\n\n// Team Empfang //\n// Tel.: ****-****** //\n// Fax: ***-****** //";

in den Body mit aufgenommen, sondern nur noch tatsächlich die Inhalte, die man auch in Formular eintragen kann...?
 
Probiers mal hiermit:

Code: 
function sendMail(objForm)
{

  if(objForm.example.selectedIndex){
    if(objForm.stage2.selectedIndex){
      // E-Mail-Adresse
      var action = objForm.stage2.options[objForm.stage2.selectedIndex].value + "?";
      // Subject
      action += "subject="+subject+((objForm.TICKETNR.value!="")?objForm.TICKETNR.value:subject2)+((objForm.KDNR.value!="")?objForm.KDNR.value:subject3);
      // Body
      kdname = (objForm.KDNAME.value!="")? objForm.KDNAME.value : kdname;
      telnr  = (objForm.TELNR.value!="")? objForm.TELNR.value : telnr;
	    var body_inhalt1="\n\nKd.Name: "+kdname+" ";
	    var body_inhalt2="\n\n\n\n\n\nTel. Kontakt möglich unter: "+telnr+" ";
      action += "&body="+escape(body_start+body_inhalt1+body_inhalt2+body_ende);
      // BCC
      action += "&bcc="+bcc;
      location.replace(action);
      
    }
  }
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück