WebDesign - Tips und Tricks: Formular als eMail senden mit JavaScript

Formular als eMail senden mit JavaScript

Es gibt zwei Gründe für den Versand von Formularen über die 'mailto:'-Methode:

Nicht jeder (günstige) Webspace bietet einen serverseitigen Formularversand an und man möchte in diesem Fall die Daten nicht über einen fremden Server schicken.
Eine meist gültige eMail-Adresse des Absenders wird hierbei zwangsläufig übermittelt!

Nur gibt es hier beim Internet Explorer (abgesehen von dem irreführenden Warnhinweis) und den neueren Outlook bzw. Outlook Express das Problem, daß die Formulardaten nicht weitergegeben werden und diese Programme mit einer leeren eMail gestartet werden.

Um dennoch die 'mailto:'-Methode nutzen zu können, habe ich eine JavaScipt-Lösung entwickelt, die die Sonderzeichen kodiert, die eingegebenen Formulardaten anzeigt und diese dann nach Bestätigung an das eMail-Programm weitergibt.

Dieses JavaScript ist speziell für das nachfolgende Beispiel konzipiert und müßte für andere Formulare entsprechend angepaßt werden.

<form id="FeedbackFormular" action="mailto:i2009@ingo-webdesign.de"

      method="post" enctype="text/plain"

      onsubmit="return sendFormular(this,'i2009@ingo-webdesign.de',700,300)">

...

<input type="hidden" name="FormName" value="Feedback-Formular" /> ...

<input name="Name" type="text" size="40" maxlength="75" /> ...

<textarea name="Meinung" rows="5" cols="40"></textarea> ...

<input type="radio" name="einverstanden" value="ja" /> ...

<input type="radio" name="einverstanden" checked="checked" value="nein" /> ...

<input type="checkbox" name="veroeffentlichen" checked="checked" value="Name" /> ...

<input type="checkbox" name="veroeffentlichen" value="eMail" /> ...

...

</form>


<script type="text/javascript">

function sendFormular(docForm,email,weite,hoehe)

{

  if (docForm.Meinung.value.length == 0)

  {

    alert ("Sie haben keinen Text eingegeben!");

    docForm.Meinung.focus();

    return false;

  }

// if (navigator.appName != "Microsoft Internet Explorer") return true;

  var t = new Array();

  t[0] = "Formular: " + docForm.FormName.value;

  t[1] = "- [Name]: " + docForm.Name.value;

  t[2] = "- [Meinung]: " + docForm.Meinung.value;

  t[3] = "- [Ich bin mit einer Veroeffentlichung]: ";

  if (docForm.einverstanden[0].checked == true)

    t[3] += "einverstanden";

  else if (docForm.einverstanden[1].checked == true)

    t[3] += "nicht einverstanden";

  t[4] = "- [veroeffentlicht werden darf]:";

  if (docForm.veroeffentlichen[0].checked == true)

    t[4] += " Mein Name,";

  if (docForm.veroeffentlichen[1].checked == true)

    t[4] += " Meine eMail-Adresse";

  var x = (screen.width - weite - 10) / 2;

  var y = (screen.height - hoehe - 32) / 2;

  var fenster = "width=" + weite + ",height=" + hoehe;

  fenster += ",left=" + x + ",top=" + y + ",scrollbars=yes";

  var Formular = window.open("","PopUp",fenster); Formular.focus();

  Formular.document.open();

  Formular.document.write("<html><head><title>Formular<\/title><\/head>");

  Formular.document.write("<body style=\"font:91% Verdana,sans-serif;\"");

// Formular.document.write(" onload=\"document.links[0].click();\"");

  Formular.document.writeln("><p>");

  var m = "";

  for (var i = 0; i <= 4; i++) /* Formularfelder 0 - 4 */

  {

    var z = ""; var cr = 0;

    for (var y = 0; y < Number(t[i].length); y++)

    {

      switch(t[i].charCodeAt(y))

      {

        case 13: z += "¦"; cr = 1; break;

        case 10: if (!cr) z += "¦"; break;

        case 32: z += "&#32;"; break;

        case 34: z += "&#34;"; break;

        case 38: z += "+"; break;

        case 60: z += "&#60;"; break;

        case 61: z += "&#61;"; break;

        case 62: z += "&#62;"; break;

        case 64: z += "&#64;"; break;

        case 196: z += "&#196;"; break;

        case 214: z += "&#214;"; break;

        case 220: z += "&#220;"; break;

        case 223: z += "&#223;"; break;

        case 228: z += "&#228;"; break;

        case 246: z += "&#246;"; break;

        case 252: z += "&#252;"; break;

        case 8364: z += "EUR"; break;

        default:

        if (t[i].charCodeAt(y) > 32 && t[i].charCodeAt(y) < 127)

          z += t[i].charAt(y);

        else z += "&#191;";

      }

    }


    t[i] = z; z = ""; var e = "";

    for (y = 0; y < Number(t[i].length); y++)

    {

      if (t[i].charAt(y) == "¦") {

        z += "<br>"; e += "%0D%0A";

      }

      else {

        z += t[i].charAt(y);

        if (t[i].charAt(y) == "?") e += "%3F";

        else {

          e += t[i].charAt(y);

          if (t[i].charAt(y) == "%") e += "25";

        }

      }

    }

    Formular.document.writeln(z + "<br>"); t[i] = e;

    if (i > 0) m += t[i] + "%0D%0A";

    if (i < 3)

    {

      Formular.document.writeln("<br>"); m += "%0D%0A";

    }

  }

  Formular.document.writeln("<\/p>");

  if (m.length > 1750)

  {

    Formular.document.write("<hr><p><b><i>Sie haben sehr viel Text ");

    Formular.document.write("eingegeben,<br>so dass eine automatische ");

    Formular.document.write("Uebernahme leider nicht moeglich ist.<br>");

    Formular.document.write("Bitte kopieren Sie Ihren obenstehenden Text ");

    Formular.document.write("(Strg-C) und<br>uebertragen ihn anschliessend ");

    Formular.document.writeln("in Ihr eMail-Programm (Strg-V).<\/b><\/i><\/p>");

    m = "- hier bitte Ihren Text einfuegen -";

  }

  Formular.document.write("<p><a href=\"mailto:" + email);

  Formular.document.write("?subject=" + t[0] + "&amp;body=" + m + "\"");

  Formular.document.write(" onclick=\"window.setTimeout('self.close()',100)\"");

  Formular.document.writeln(">eMail versenden<\/a><\/p><\/body><\/html>");

  Formular.document.close();

  return false;

}

</script>

Das Grundprinzip hierbei ist die Übermittlung der Formulardaten direkt über den 'mailto:'-Link durch Anhängen mittels '?body='. Damit dies funkioniert, müssen einige Sonderzeichen kodiert werden. Die Routine hierfür kodiert bei dieser Gelegenheit auch kritische Zeichen und ersetzt Sonderzeichen wie '€', die je nach Konfiguration des eMail-Programms nicht korrekt dargestellt werden.
Zu beachten ist, daß Ampersands ('&') im Text dem eMail-Programm auch kodiert nicht übergeben werden können und daher durch '+' ersetzt werden müssen.

Sofern ein Text eingegeben wurde, werden die Formulardaten ausgelesen (hier ist die wesentliche Anpassung an eigene Formulare erforderlich) und ein neues Fenster in der angegebenen Größe zentriert geöffnet. Es folgt die Kodierung der Formulardaten, wobei ich zur Kennzeichnung der Zeilenumbrüche das Sonderzeichen "¦" verwende (da Browser Zeilenumbrüche in einer Textarea unterschiedlich kodieren, ist hier eine Abfrage erforderlich, um doppelte Zeilenumbrüche zu vermeiden). Die Formulardaten werden dann in das neue Fenster geschrieben (mit <br> für die Zeilenumbrüche) und außerdem in einer Variablen gespeichert (mit "%0D%0A" für die Zeilenumbrüche, was aber leider im Mozilla nicht funktioniert, weshalb ich zur Übersicht die Feldbezeichnungen mit "-[...]: " deutlich abgegrenzt habe).

Sollte der (URL-codierte) Text länger als ca. 1750 Byte sein, ist eine Übergabe an einige eMail-Programme auf diese Weise leider nicht mehr möglich! In diesem Fall wird der Benutzer gebeten, seinen Text aus dem PopUp manuell in die eMail zu übertragen.

Zum Schluß wird noch ein eMail-Link mit den Formulardaten der zuvor gespeicherten Variablen (bzw. dem Hinweis zum manuellen Einfügen) in das Fenster geschrieben und eine JavaScript-Anweisung notiert, um das Fenster nach Anklicken des Links wieder zu schließen. Andere Browser als der Internet Explorer benötigen hierbei ein Timeout, da der eMail-Client nicht gestartet wird, wenn das aufrufende Fenster vorher geschlossen wurde. Ich habe hier nur 1/10 Sekunde gewählt, um andererseits zu verhindern, daß das eMail-Fenster durch das Schließen in den Hintergrund gerät.

Wer diese Art der Datenübergabe nur für den Internet Explorer nutzen will und nicht für andere Browser, in denen die normale Übermittlung von Formulardaten weniger Probleme bereitet, entfernt hierzu einfach die Kommentareinleitung (//) bei der Browserabfrage. Dann kann die Funktion mit dem Rückgabewert 'true' vorzeitig verlassen und die normale 'mailto:'-Methode des Formulars fortgesetzt werden.

Diese Methode über ein zusätzliches JavaScript-Fenster hat gegenüber der normalen mailto:-Funktion auch den Vorteil, daß der irritierende Warnhinweis des Internet-Explorers vor dem Starten des eMail-Programms entfällt. Sie ist aber auch erforderlich, da es offenbar nicht möglich ist, den Formularinhalt per JavaScript wirksam dem action-Attribut zu übergeben.
Leider erfordert sie auch einen zusätzlichen Klick. Im Internet Explorer und einigen anderen Browsern läßt sich dieser Klick 'onload' über 'document.links[0].click()' simulieren. Diesen Trick habe ich hier auskommentiert, da er nicht in allen Browsern funktioniert und auch zur unbemerkten Installation von Dialern oder anderen Programmen mißbraucht wird.

Für validen XHTML Strict Code sollte dieses JavaScript (wie hier) ausgelagert werden.

Datenschutzerklärung


Testformular - Sie können es für Rückmeldungen gern verwenden.
Ihr Name:
Ihre Meinung zu diesem Beitrag:
Ich wäre mit einer Veröffentlichung:	einverstanden	nicht einverstanden
veröffentlicht werden dürfte:	Mein Name	Meine eMail-Adresse

barrierefreies Webdesign Ingo Turski

Formular als eMail senden mit JavaScript