[Tutorial] PHP Emailformular

S

sevY

Hi,

da ja einige Fragen aufgetreten sind, habe ich anbei mal ein Script, welches ein PHP Emailformular darstellt.
Die Eingaben des Formulars werden mittels Javascript überprüft. Dabei ist eine kleine „JavaScript Detection“ eingebaut, die es erlaubt, bei fehlendem JavaScript den Button zum Versenden des Formulars „auszublenden“.
Wird die Email erfolgreich abgeschickt, bekommt der User eine Mitteilung, in dem sich eine JavaScript alert() Box öffnet und ihm dieses mitgeteilt wird. Diese Methode wird auch für die Fehlerbenachrichtigung verwendet.
Pflichtfelder sind hier NAME und (TELEFON oder EMAIL).
Die Email wird dazu noch auf Integrität gecheckt.

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.singleline
    {
    width:176px;
    height:12px;
    margin:0px 0px 5px 0px;
    padding:2px 2px 2px 2px;
    border-width:1px;
    border-color:#949fae;
    border-style:solid;
    background-color:#ffffff;
    color:#617188;
    font-family:Verdana,Helvetica,Arial,sans-serif;    
    font-size:10px;
    line-height:12px;
    font-weight:normal;
    text-decoration:none;  
    }

.multiline 
    {
    width:362px;
    height:80px;
    margin:0px 0px 8px 0px;
    padding:2px 2px 2px 2px;
    border-width:1px;
    border-color:#949fae;
    border-style:solid;
    background-color:#ffffff;
    color:#617188;
    font-family:Verdana,Helvetica,Arial,sans-serif;    
    font-size:10px;
    line-height:12px;
    font-weight:normal;
    text-decoration:none;    
    overflow:hidden;
    }
      

.submit 
    {
    width:100px;
    margin:5px 0px 0px 0px;
    padding:0;
    border-width:1px;
    border-color:#949fae;
    border-style:solid;
    background-color:#ffffff;
    color:#617188;
    font-family:Verdana,Helvetica,Arial,sans-serif;    
    font-size:9px;
    line-height:12px;
    font-weight:bold;
    text-decoration:none;
    }
</style>

<script language="javascript" type="text/javascript">
function integrityCheck(x)
    {
    var a=false;
    var res=false;
    if(typeof(RegExp)=='function')
        {
        var b=new RegExp('abc');
        if(b.test('abc')==true)
            {
            a=true;
            }
        }
    if(a==true)
        {
        reg=new RegExp('^([a-zA-Z0-9\\-\\.\\_]+)'+
            '(\\@)([a-zA-Z0-9\\-\\.]+)'+
            '(\\.)([a-zA-Z]{2,4})$');
        res=(reg.test(x));
        }
    else
        {
        res=(x.search('@') >= 1 && x.lastIndexOf('.') > x.search('@') && x.lastIndexOf('.') >= x.length-5)
        }
    return(res);
    }

function checkForm(name,phone,mail)
    {
    if(document.contact.name.value=='' || document.contact.name.value=='Name*') 
        {
        alert('Bitte geben Sie einen Namen ein!');
        document.contact.name.focus();
        return false;
        break;
        }
    else if((document.contact.phone.value=='' || document.contact.phone.value=='Telefon*') && integrityCheck(document.contact.mail.value)==false) 
        {
        alert('Bitte geben Sie eine Telefonnummer oder eine Emailadresse ein!');
        document.contact.phone.focus();
        return false;
        break;
        }
    else
        {
        document.contact.submit();
        return true;
        break;
        }
    }
</script>
<title>Form</title>
</head>
<?php 
$recipient='yves@das-studio.com';
if(isset($_POST['target']))
    {
    $boundary=strtoupper(md5(uniqid(time())));
    $header="From:".$_POST['name']."<".$_POST['mail'].">\n";
    $header.="Reply-To: ".$_POST['mail']."\n"; 
    $header.="X-Mailer: PHP/" .phpversion(). "\n";          
    $header.="X-Sender-IP: ".$_SERVER["REMOTE_ADDR"]."\n";
    $content=
    $_POST['message'].'
    

    Name: '.$_POST['name'].'
    Telefon: '.$_POST['phone'].'
    Browser: '.$_SERVER['HTTP_USER_AGENT'].'
    Gateway: '.getHostByAddr($_SERVER['REMOTE_ADDR']).'
    IP: '.$_SERVER['REMOTE_ADDR'];

    if(mail($recipient,$_POST['subject'].', Anfrage vom '.date('d.m.Y'),$content,$header))
        {
        $notify='onload="javascript:alert(\'Vielen Dank, '.$_POST['name'].'. Ihre Email wurde zugestellt.\');"';
        }
    }
echo'<body'.(isset($notify) ? ' '.$notify.'>' : '>');
?>
<form name="contact" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <input type="hidden" name="target" value="0" />
    <input class="singleline" type="text" name="name" value="Name*" />
    <input class="singleline" type="text" name="phone" value="Telefon*" /><br />
    <input class="singleline" type="text" name="mail" value="Email*" />
    <input class="singleline" type="text" name="subject" value="Betreff" /><br />
    <textarea class="multiline" name="message">Nachricht</textarea><br />
    <script language="javascript" type="text/javascript">
        var submit='<input class="submit" type="button" value="Email" onclick="javascript:checkForm(document.contact.name.value,document.contact.phone.value,document.contact.mail.value);">';
        document.write(submit);
    </script>
    <noscript>
        <img src="img/enable_javascript.gif" alt="Enable JavaScript" />
    </noscript>
    </form>  
</body>
</html>

Gruß

Yves
 
Yves schrieb:
PHP:
<script language="javascript" type="text/javascript">
function integrityCheck(x)

Diese Einbindung ist nicht xhtml verträglich. Deshalb schlägt der Validator ja bei dir auch Alarm.

PHP:
   document.contact.name.value

Das ist eine Internet Explorer Abkürzung. Browserübergreifend geht das mit

document.forms["contact"].elements["name"].value

PHP:
        return false;
        break;

Das break wird nicht gebraucht, die Funktion wird mit return beendet, und das break überhaupt nicht erreicht.

PHP:
        $notify='onload="javascript:alert(\'Vielen Dank, '.$_POST['name'].'. Ihre Email wurde zugestellt.\');"';

Das "javascript:" ist unnötig, da intrinsische Event Attribute eh nur Scriptinhalt enthalten können. Es erzeugt allerdings kein Fehler, weil es von ECMAScript als Label interpretiert wird.

PHP:
    <script language="javascript" type="text/javascript">
        var submit='<input class="submit" type="button" value="Email" onclick="javascript:checkForm(document.contact.name.value,document.contact.phone.value,document.contact.mail.value);">';
        document.write(submit);
    </script>
    <noscript>
        <img src="img/enable_javascript.gif" alt="Enable JavaScript" />
    </noscript>

Es ist nicht nötig für ein Formular die User zu Javascript zu nötigen. Einfach das Abschicken erlauben und in PHP validieren. Clientseitige Validierung ist immer nur ergänzend zur Erhöhung des Komforts.

Dazu ist noch das document.write() nicht mit xhtml vereinbar.
 
Hi,

erstmal Danke das du Dir die Mühe machst, mein Script zu korrigieren.

Nogger schrieb:
Yves schrieb:
PHP:
<script language="javascript" type="text/javascript">
function integrityCheck(x)

Diese Einbindung ist nicht xhtml verträglich. Deshalb schlägt der Validator ja bei dir auch Alarm.
Wie denn?



Nogger schrieb:
PHP:
   document.contact.name.value

Das ist eine Internet Explorer Abkürzung. Browserübergreifend geht das mit

document.forms["contact"].elements["name"].value
Laut selfHTML scheint meine Schreibweise ok zu sein…
http://de.selfhtml.org/javascriptintro.htm#standards_varianten_versionen

Deine Version funktioniert bei mir nicht in Safari.

Nogger schrieb:
PHP:
        return false;
        break;

Das break wird nicht gebraucht, die Funktion wird mit return beendet, und das break überhaupt nicht erreicht.
Stimmt. Habe ich geändert.

Nogger schrieb:
PHP:
        $notify='onload="javascript:alert(\'Vielen Dank, '.$_POST['name'].'. Ihre Email wurde zugestellt.\');"';

Das "javascript:" ist unnötig, da intrinsische Event Attribute eh nur Scriptinhalt enthalten können. Es erzeugt allerdings kein Fehler, weil es von ECMAScript als Label interpretiert wird.
War auch so gedacht.
Ich definiere generell der Übersicht wegen immer ein „wenig“ mehr, auch wenn es nicht unbedingt sein muss.

Nogger schrieb:
PHP:
    <script language="javascript" type="text/javascript">
        var submit='<input class="submit" type="button" value="Email" onclick="javascript:checkForm(document.contact.name.value,document.contact.phone.value,document.contact.mail.value);">';
        document.write(submit);
    </script>
    <noscript>
        <img src="img/enable_javascript.gif" alt="Enable JavaScript" />
    </noscript>

Es ist nicht nötig für ein Formular die User zu Javascript zu nötigen. Einfach das Abschicken erlauben und in PHP validieren. Clientseitige Validierung ist immer nur ergänzend zur Erhöhung des Komforts.

Naja, da hast du prinzipiell recht.
Nur finde ich es besser, das das Formular vor Eingabe auf „Plausibilität und Pflichtfelder“ überprüft wird.
Wenn ich mich nicht irre, kann man sich doch bei serverseitiger Validierung das Javascript gänzlich sparen, oder wie verhindert man, das ein Formular nicht abgesendet wird, falls z.B. Inhalte fehlen.

Nogger schrieb:
Dazu ist noch das document.write() nicht mit xhtml vereinbar.
Gibt es eine Alternative?

Yves
 
Hi,

so kann man XHTML & CSS konform trotzdem JavaScript nutzen:

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="expires" content="14" />
<meta name="description" content="x" />
<meta name="keywords" lang="de" content="x" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="14 days" />
<meta name="author" content="x" />
<meta name="publisher" content="x" />
<script language="javascript" type="text/javascript">
function validateEmail(x) 
****{ 
****var a=false; 
****var res=false; 
****if(typeof(RegExp)=='function') 
********{ 
********var b=new RegExp('abc'); 
********if(b.test('abc')==true) 
************{ 
************a=true; 
************} 
********} 
****if(a==true) 
********{ 
********reg=new RegExp('^([a-zA-Z0-9\\-\\.\\_]+)'+ 
************'(\\@)([a-zA-Z0-9\\-\\.]+)'+ 
************'(\\.)([a-zA-Z]{2,4})$'); 
********res=(reg.test(x)); 
********} 
****else 
********{ 
********res=(x.search('@') >= 1 && x.lastIndexOf('.') > x.search('@') && x.lastIndexOf('.') >= x.length-5) 
********} 
****return(res); 
****} 

function validateForm(name,phone,mail) 
****{ 
****if(document.contact.name.value=='' || document.contact.name.value=='Name*') 
********{ 
********alert('Bitte geben Sie einen Namen ein!'); 
********document.contact.name.focus(); 
********return false; 
********} 
****else if((document.contact.phone.value=='' || document.contact.phone.value=='Telefon*'**) && validateEmail(document.contact.mail.value)==false)
********{ 
********alert('Bitte geben Sie eine Telefonnummer oder eine Emailadresse ein!'); 
********document.contact.phone.focus(); 
********return false; 
********} 
****else 
********{ 
********document.contact.submit(); 
********return true;  
********} 
****} 
</script>
<style type="text/css">
body,form 
    {
    margin:0;
    padding:0;   
    border:0;
    color:#617188;
    font-family:Verdana,Helvetica,Arial,sans-serif;    
    font-size:10px;
    line-height:12px;
    font-weight:normal;
    text-decoration:none;
    }
.singleline
    {
    width:176px;
    height:12px;
    margin:0px 0px 5px 0px;
    padding:2px 2px 2px 2px;
    border-width:1px;
    border-color:#949fae;
    border-style:solid;
    background-color:#ffffff;
    color:#617188;
    font-family:Verdana,Helvetica,Arial,sans-serif;    
    font-size:10px;
    line-height:12px;
    font-weight:normal;
    text-decoration:none;  
    }

.multiline 
    {
    width:362px;
    height:80px;
    margin:0px 0px 8px 0px;
    padding:2px 2px 2px 2px;
    border-width:1px;
    border-color:#949fae;
    border-style:solid;
    background-color:#ffffff;
    color:#617188;
    font-family:Verdana,Helvetica,Arial,sans-serif;    
    font-size:10px;
    line-height:12px;
    font-weight:normal;
    text-decoration:none;    
    overflow:hidden;
    }
    
.submit 
    {
    width:100px;
    margin:5px 0px 0px 0px;
    padding:0;
    border-width:1px;
    border-color:#949fae;
    border-style:solid;
    background-color:#ffffff;
    color:#617188;
    font-family:Verdana,Helvetica,Arial,sans-serif;    
    font-size:9px;
    line-height:12px;
    font-weight:bold;
    text-decoration:none;
    }
</style>
<title>x</title>
</head>
<body>
<form name="contact" action="test.html" method="post">
    <input type="hidden" name="target" value="0" />
    <input class="singleline" type="text" name="name" value="Name*" tabindex="1" />
    <input class="singleline" type="text" name="phone" value="Telefon*" tabindex="2" /><br />
    <input class="singleline" type="text" name="mail" value="Email*" tabindex="3" />
    <input class="singleline" type="text" name="subject" value="Betreff" tabindex="4" /><br />
    <textarea class="multiline" name="message" tabindex="5" rows="" cols="">Nachricht</textarea><br /> 
    
****<script language="javascript" type="text/javascript"> 
        if(document.createElementNS)
            { 
            var button=document.createElementNS("http://www.w3.org/1999/xhtml","input"); 
            button.setAttribute("class", "submit");
            button.setAttribute("type", "button"); 
            button.setAttribute("value", "Email"); 
            button.setAttribute("onclick", "javascript:validateForm(document.contact.name.value,document.contact.phone.value,document.contact.mail.value);"); 
            document.getElementsByTagName("form")[0].appendChild(button); 
            } 
    </script> 
    <noscript> 
********Javascript required. Please enable. 
****</noscript> 
</form>** 
<p>
    <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" />
    </a>
</p>
<p>
    <a class="right" href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" /></a>
</p>
</body> 
</html>

Das wäre der HTML Teil.

Interessant wäre, wenn du am o.g. Beispiel mal verdeutlichen kannst, wie die korrekte Schreibweise der Pfadangabe im DOM sein soll, damit die IE Abkürzung Ihre Koffer packen kann.

Der Übersicht halber sollte das ganze ausgelagert werden.

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="expires" content="14" />
<meta name="description" content="x" />
<meta name="keywords" lang="de" content="x" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="14 days" />
<meta name="author" content="x" />
<meta name="publisher" content="x" />
<link rel="stylesheet" type="text/css" href="default.inc.css" />
<link rel="shortcut icon" type="image/ico" href="img/favicon.ico" />
<script language="javascript" type="text/javascript" src="function.inc.js"></script>
<title>x</title>
</head>
<body>
<form name="contact" action="test.html" method="post">
    <input type="hidden" name="target" value="0" />
    <input class="singleline" type="text" name="name" value="Name*" tabindex="1" />
    <input class="singleline" type="text" name="phone" value="Telefon*" tabindex="2" /><br />
    <input class="singleline" type="text" name="mail" value="Email*" tabindex="3" />
    <input class="singleline" type="text" name="subject" value="Betreff" tabindex="4" /><br />
    <textarea class="multiline" name="message" tabindex="5" rows="" cols="">Nachricht</textarea><br /> 
    
****<script language="javascript" type="text/javascript"> 
        if(document.createElementNS)
            { 
            var button=document.createElementNS("http://www.w3.org/1999/xhtml","input"); 
            button.setAttribute("class", "submit");
            button.setAttribute("type", "button"); 
            button.setAttribute("value", "Email"); 
            button.setAttribute("onclick", "javascript:validateForm(document.contact.name.value,document.contact.phone.value,document.contact.mail.value);"); 
            document.getElementsByTagName("form")[0].appendChild(button); 
            } 
    </script> 
    <noscript> 
********Javascript required. Please enable. 
****</noscript> 
</form>** 
<p>
    <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" />
    </a>
</p>
<p>
    <a class="right" href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" /></a>
</p>
</body> 
</html>

Als letztes stünde dann die Überarbeitung der Formvalue-Validation mit einem Mix aus server- und clientseitig an.
Hier benötige ich ebenfalls Deinen Tipp.


Gruß Yves
 
Tach,

Yves schrieb:
so kann man XHTML & CSS konform trotzdem JavaScript nutzen:

Jein. Die Einbindung ist noch nicht korrekt. Siehe http://www.w3.org/TR/xhtml1/#h-4.8

Interessant wäre, wenn du am o.g. Beispiel mal verdeutlichen kannst, wie die korrekte Schreibweise der Pfadangabe im DOM sein soll, damit die IE Abkürzung Ihre Koffer packen kann.

Ich habe nochmals nachgeschlagen.

document.forms["formname"].elements["elementname"] ist der W3C Weg.

document.formname.elementname wird von vielen/manchen/allen Browsern unterstützt, besser ist es trotzdem die andere Möglichkeit zu nehmen.

http://www.jibbering.com/faq/faq_notes/form_access.html

Sicher, daß du dich nicht vertippt hast, und es deshalb bei dir nicht funktioniert hat?

PHP:
<html>
<body>

<form name="test">
<input name="feld" value="testinhalt">
</form>

<script>
alert(document.forms["test"].elements["feld"].value);
</script>

</body>
</html>

Was aber auch letztlich egal ist, denn bei xhtml ist beides nicht erlaubt, wie ich lernen durfte. http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html (der Artikel hat mich mal wieder darin bestärkt bei HTML 4.01 zu bleiben).

Dem Form-Element eine ID geben und per getElementById() zugreifen ist da angesagt.

PHP:
            button.setAttribute("onclick", "javascript:validateForm(document.contact.name.value,document.contact.phone.value,document.contact.mail.value);");

Wie gesagt, da kann statt "javascript:" auch "HohohoDerWeihnachtsmannIstDa:" stehen :)

PHP:
            document.getElementsByTagName("form")[0]

Das würde ich nicht nehmen, weil es fragil ist in Bezug auf den Dokumentenaufbau. Irgendwann baut jemand dann oben noch ein Suchfeld ein und schon funktioniert es nicht mehr, weil es nicht mehr das erste Formular ist.

Als letztes stünde dann die Überarbeitung der Formvalue-Validation mit einem Mix aus server- und clientseitig an.
Hier benötige ich ebenfalls Deinen Tipp.

Erstell die Formularverarbeitung erstmal nur auf Basis von PHP. Mit den gewünschten Prüfungen und Fehlerausgabe. Nur serverseitig kann man sicherstellen, daß die Prüfungen auch wirklich durchlaufen werden. Es ist trivial einfach ein Formular unter Umgehung von clientseitigen Javascriptprüfungen abzuschicken. Wer sich auf diese verläßt hat verloren.

Als zweiten Schritt kannst du dann Prüfungen mit Javascript einbauen. Diese dienen rein der Bequemlichkeit der Benutzer, weil das Formular auf Fehleingaben schneller reagiert als bei Rundreise der Formulardaten zum Server und wieder zurück.

Gleichzeitig funktioniert das Formular nun sowohl mit, als auch ohne Javascript.
 
Hi Yves und alle anderen Foren-Benutzer,

ich lese in diesem Forum schon einige Zeit sehr interessiert mit und habe mich nun entschlossen das ich auch etwas "geben" möchte :).

@ Yves: Tip zum Email-Formular:
Es ist sowohl eine client- wie auch serverseitige Prüfung zu empfehlen. Am Server ist eh klar wie mans macht, einfach mit PHP prüfen...
Am Client würde ich dir empfehlen eine Javascript-Funktion checkAndSendForm() zu erstellen, welche du beim Versenden aufrufst. Diese Funktion soll dann die Werte prüfen und wenn alles passt das Formular absenden, ansonst mit alert() eine Fehlermeldung ausgeben zB.

Vorteil der client-seitigen Prüfung ist das falls das Formular aufgrund fehlender Eingaben dann nicht abgesendet wird, weder du die Inputfelder mit PHP befüllen musst, noch der User wieder alles von vorne eingeben muss. Würdest du es das Formular submitten und es wäre nicht alles eingegeben müsstest du ja damit es gut benutzt werden kann die User-Eingaben wieder in die Inputboxen schreiben.

Um überhaupt alles abzufangen kannst du die Wiederherstellung der Userdaten, falls die PHP-Prüfung fehl schlägt, ja zusätzlich einbauen.

Den Absenden - Button auszublenden würde ich nicht empfehlen, es sieht dann einfach wie ein unvollständiges Formular aus. Evtl. schreibt dir dann jemand nicht weil er denkt das Formular kann man sowieso nicht absenden.


Hoffe nicht am Thema vorbei geredet und evtl. jemand damit geholfen zu haben!

Liebe Grüße,
Oliver
 
EvoX:
Würdest du es das Formular submitten und es wäre nicht alles eingegeben müsstest du ja damit es gut benutzt werden kann die User-Eingaben wieder in die Inputboxen schreiben.

Hallo Oliver, herzlich willkommen zur aktiven Teilnahme bei MU! Freut mich!
Ich handhabe das generell nur so, wie von Dir oben beschrieben. Javascript mache ich gar nicht, weil man immer einen Browser findet, der wieder einen "eigenen Standard" verfolgt. Ich fühle mich dabei auch immer zusehr ausgebremst. Dann ist da die leidige Frage Javascript an oder aus. Kurz: ich ignoriere Javascript so lange wie möglich. Ein einfaches PHP-Formular, mit Vorgabevariablen aus $_POST und einer vorgeschalteten Typ/Content-Prüfung tut es völlig. Als optisches goodie färbe ich Pflichtfelder dezent ein und fehlerhafte Eingaben werden ebenfalls per CSS rötlich hinterlegt. Das Prinzip habe ich mir einmal ausgetüftelt und seit dem Javascript an den Haken gehängt. Meiner persönlichen Meinung nach ist Javascript eine unzuverlässige Krücke, die ich nur nehme wenn es nicht anders geht.
 
Hi wegus,

gebe dir recht das ein formular wie von dir beschrieben völlig ausreicht und dabei völlig auf JS verzichtet werden kann.

Pflichtfelder einzufärben und fehlerhafte Eingaben mit CSS rötlich zu hinterlegen finde ich eine sehr gute Variante, sieht auch viel schöner aus als ein JS-Alert().

Ob JS nun eine Krücke ist oder nicht, trau ich micht nicht zu beurteilen. Würde es aber generell nicht so bezeichnen da es schon für einige wichtige Dinge zu gebrauchen ist. zB. bei Auswahl eines Dropdowns eine Aktion ausführen etc...

Aber grundsätzlich ist es nicht schlecht so lange wie möglich darauf zu verzichten, solange der Aufwand dadurch nicht erheblich steigt.
 
@EvoX: Das war auch nur meine persönliche Meinung! Ich handhabe es so. Natürlich kann man auch anders zum Ziel kommen! Du weißt ja, zwei Programmierer drei Lösungsansätze ;)
 
Hi,

bis auf die Formeingabe Validation zu Überarbeiten habe ich es nun geschafft, das ganze erfolgreich durch den W3C Validator zu schicken.
Korrekte Pfadangaben habe ich auch verwendet, sowie im Javascript ein wenig die Pfadangaben als Funktionsparameter übergeben und dann gegebenenfalls mit .value konkateniert.

Code:
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="expires" content="14" />
<meta name="description" content="W3C konformer XHTML PHP-Mailer" />
<meta name="keywords" lang="de" content="W3C,konform,XHTML,CSS,PHP,Mail" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="14 days" />
<meta name="author" content="Open Source" />
<meta name="publisher" content="Open Source" />
<link rel="stylesheet" type="text/css" href="default.inc.css" />
<link rel="shortcut icon" type="image/ico" href="img/favicon.ico" />
<script language="javascript" type="text/javascript" src="function.inc.js"></script>
<title>W3C konformer XHTML PHP-Mailer</title>
</head><body>
<form id="mailform" name="contact" action="/~Yves/W3C Mailform/mail.php" method="post">
    <input type="hidden" name="target" value="0" />
    <input class="singleline" type="text" name="name" value="Name*" tabindex="1" />
    <input class="singleline" type="text" name="phone" value="Telefon*" tabindex="2" /><br />
    <input class="singleline" type="text" name="mail" value="Email*" tabindex="3" />
    <input class="singleline" type="text" name="subject" value="Betreff" tabindex="4" /><br />
    <textarea class="multiline" name="message" tabindex="5" rows="" cols="">Nachricht</textarea><br />
    <script language="javascript" type="text/javascript">
        if(document.createElementNS)
            {
            var button=document.createElementNS("http://www.w3.org/1999/xhtml", "input");
            button.setAttribute("class", "submit");
            button.setAttribute("type", "button");
            button.setAttribute("value", "Email");
            button.setAttribute("onclick", "javascript:validateForm(document.forms['contact'].elements['name'],document.forms['contact'].elements['phone'],document.forms['contact'].elements['mail'],document.forms['contact']);");
            document.getElementById("mailform").appendChild(button);
            }
    </script>
    <noscript>
        <img src="img/enable_javascript.gif" alt="Enable JavaScript" />
    </noscript>
</form>
<p>
    <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" />
    </a>
</p>
<p>
    <a class="right" href="http://jigsaw.w3.org/css-validator/">
        <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" />
    </a>
</p>
</body>
</html>
[/php]
Anbei mal eine Zip mit allen Dateien, vielleicht möchte ja jemand mitbasteln.


Also: client/server Formvalidation steht noch aus. Der Rest funktioniert W3C konform.

Yves
 
So,

jetzt ist alles fertig.

Ich habe eine Version mit PHP Form Validation und eine Version mit JavaScript Form Validation erstellt.

Beides in Ordner gepackt und zu einer Zip verfasst.

Alle Tipps von euch sind berücksichtigt, die Script funktionieren und der W3C Validator hat auch ein OK gegeben.


Hier nochmal die PHP Version

PHP:
[CODE]<?php
require_once('head.inc.php');
require_once('config.inc.php');
if(isset($_POST['target']))
    {
    if(empty($_POST['name']) || $_POST['name']=='Name*')
        {
        $invalid[0]=true;
        }
    if(empty($_POST['phone']) || $_POST['phone']=='Telefon*' || !eregi('^\+*[0-9]([/-]?[0-9])*$',$_POST['phone']))
        {
        $invalid[1]=true;
        }
    if(empty($_POST['mail']) || $_POST['mail']=='Email*' || !eregi('^[0-9a-zA-ZüöäÜÖÄ]([-_.]?[0-9a-zA-ZüöäÜÖÄ])*@[0-9a-zA-ZüöäÜÖÄ]([-.]?[0-9a-zA-ZüöäÜÖÄ])*\\.[a-zA-Z]{2,3}$',$_POST['mail']))
        {
        $invalid[2]=true;
        }
    if(isset($invalid))
        {
        $notify='onload="javascript:alert(\'Bitte korrigieren Sie die markierten Felder!\');"';
        }
    else
        {  
        $boundary=strtoupper(md5(uniqid(time())));
        $header="From:".$_POST['name']."<".$_POST['mail'].">\n";
        $header.="Reply-To: ".$_POST['mail']."\n";
        $header.="X-Mailer: PHP/" .phpversion(). "\n";        
        $header.="X-Sender-IP: ".$_SERVER["REMOTE_ADDR"]."\n";
        $content=
        $_POST['message'].'
  

        Name: '.$_POST['name'].'
        Telefon: '.$_POST['phone'].'
        Browser: '.$_SERVER['HTTP_USER_AGENT'].'
        Gateway: '.getHostByAddr($_SERVER['REMOTE_ADDR']).'
        IP: '.$_SERVER['REMOTE_ADDR'];
  
        if($_POST['target']==0)
            {
            $selected=implode(',',$recipient);
            }
        else
            {
            $selected=$recipient[$_POST['target']];
            }
        if(mail($selected,$_POST['subject'].', Anfrage vom '.date('d.m.Y'),$content,$header))
            {
            $notify='onload="javascript:alert(\'Vielen Dank, '.$_POST['name'].'. Ihre Email wurde zugestellt.\');"';
            }
        }
    }
echo'<body'.(isset($notify) ? ' '.$notify.'>' : '>');
?>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
    <input type="hidden" name="target" value="0" />
    <input class="<?php echo (!$invalid[0] ? 'singleline' : 'singleline_inputerror');?>" type="text" name="name" value="<?php echo (!isset($_REQUEST['name']) ? 'Name*' : $_REQUEST['name']);?>" tabindex="1" />
    <input class="<?php echo (!$invalid[1] ? 'singleline' : 'singleline_inputerror');?>" type="text" name="phone" value="<?php echo (!isset($_REQUEST['phone']) ? 'Telefon*' : $_REQUEST['phone']);?>" tabindex="2" /><br />
    <input class="<?php echo (!$invalid[2] ? 'singleline' : 'singleline_inputerror');?>" type="text" name="mail" value="<?php echo (!isset($_REQUEST['mail']) ? 'Email*' : $_REQUEST['mail']);?>" tabindex="3" />
    <input class="singleline" type="text" name="subject" value="<?php echo (!isset($_REQUEST['subject']) ? 'Betreff' : $_REQUEST['subject']);?>" tabindex="4" /><br />
    <textarea class="multiline" name="message" tabindex="5" rows="" cols=""><?php echo (!isset($_REQUEST['message']) ? 'Nachricht' : $_REQUEST['message']);?></textarea><br />
    <input class="submit" type="submit" value="Email">
</form>
<p>
    <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" />
    </a>
</p>
<p>
    <a class="right" href="http://jigsaw.w3.org/css-validator/">
        <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" />
    </a>
</p>
</body>
</html>
[/CODE]

Wenn jemand noch Verbesserungen hat, gerne :)


Viele Grüße

Yves
 
Baue doch erstmal die Änderungen ein, die ich heute morgen beschrieben habe, damit es wirklich xhtml konform wird.
 
Wenn der Validator sagt, das es XHTML konform ist, was ist dann deiner Meinung nach falsch???
 
So, nochmal ein Update… dann werden auch die Variablen für die Forminhalte nach erfolgreichem Versand gelöscht, damit wieder die Ausgangswerte zu sehen sind. Und ein Vertippsler korrigiert. Anbei die zip.

Für eine Weiterleitung könnte man noch header() benutzen.

PHP:
<?php
require_once('head.inc.php');
require_once('config.inc.php');
if(isset($_POST['target']))
    {
    if(empty($_POST['name']) || $_POST['name']=='Name*')
        {
        $invalid[0]=true;
        }
    if(empty($_POST['phone']) || $_POST['phone']=='Telefon*' || !eregi('^\+*[0-9]([/-]?[0-9])*$',$_POST['phone']))
        {
        $invalid[1]=true;
        }
    if(empty($_POST['mail']) || $_POST['mail']=='Email*' || !eregi('^[0-9a-zA-ZüöäÜÖÄ]([-_.]?[0-9a-zA-ZüöäÜÖÄ])*@[0-9a-zA-ZüöäÜÖÄ]([-.]?[0-9a-zA-ZüöäÜÖÄ])*\\.[a-zA-Z]{2,3}$',$_POST['mail']))
        {
        $invalid[2]=true;
        }
    if(isset($invalid))
        {
        $notify='onload="javascript:alert(\'Bitte korrigieren Sie die markierten Felder!\');"';
        }
    else
        {  
        $boundary=strtoupper(md5(uniqid(time())));
        $header="From:".$_POST['name']."<".$_POST['mail'].">\n";
        $header.="Reply-To: ".$_POST['mail']."\n";
        $header.="X-Mailer: PHP/" .phpversion(). "\n";        
        $header.="X-Sender-IP: ".$_SERVER["REMOTE_ADDR"]."\n";
        $content=
        $_POST['message'].'
  

        Name: '.$_POST['name'].'
        Telefon: '.$_POST['phone'].'
        Browser: '.$_SERVER['HTTP_USER_AGENT'].'
        Gateway: '.getHostByAddr($_SERVER['REMOTE_ADDR']).'
        IP: '.$_SERVER['REMOTE_ADDR'];
    
        if(mail($recipient,$_POST['subject'].', Anfrage vom '.date('d.m.Y'),$content,$header))
            {
            $notify='onload="javascript:alert(\'Vielen Dank, '.$_POST['name'].'. Ihre Email wurde zugestellt.\');"';
            unset($_POST['name']);
            unset($_POST['phone']);
            unset($_POST['mail']);
            unset($_POST['subject']);
            unset($_POST['message']);
            }
        }
    }
echo'<body'.(isset($notify) ? ' '.$notify.'>' : '>');
?>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
    <input type="hidden" name="target" value="0" />
    <input class="<?php echo (!$invalid[0] ? 'singleline' : 'singleline_inputerror');?>" type="text" name="name" value="<?php echo (!isset($_POST['name']) ? 'Name*' : $_POST['name']);?>" tabindex="1" />
    <input class="<?php echo (!$invalid[1] ? 'singleline' : 'singleline_inputerror');?>" type="text" name="phone" value="<?php echo (!isset($_POST['phone']) ? 'Telefon*' : $_POST['phone']);?>" tabindex="2" /><br />
    <input class="<?php echo (!$invalid[2] ? 'singleline' : 'singleline_inputerror');?>" type="text" name="mail" value="<?php echo (!isset($_POST['mail']) ? 'Email*' : $_POST['mail']);?>" tabindex="3" />
    <input class="singleline" type="text" name="subject" value="<?php echo (!isset($_POST['subject']) ? 'Betreff' : $_POST['subject']);?>" tabindex="4" /><br />
    <textarea class="multiline" name="message" tabindex="5" rows="" cols=""><?php echo (!isset($_POST['message']) ? 'Nachricht' : $_POST['message']);?></textarea><br />
    <input class="submit" type="submit" value="Email" />
</form>
<p>
    <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" />
    </a>
</p>
<p>
    <a class="right" href="http://jigsaw.w3.org/css-validator/">
        <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" />
    </a>
</p>
</body>
</html>
 
Hiho,
feine Sache das du so einen Script geschrieben hast.

Eine kleine Sache ist mir aufgefallen, die aber nur ein Schönheitsfehler ist :)

PHP:
$header="From:".$_POST['name']."<".$_POST['mail'].">\n";
$header.="Reply-To: ".$_POST['mail']."\n";
$header.="X-Mailer: PHP/" .phpversion(). "\n";
$header.="X-Sender-IP: ".$_SERVER["REMOTE_ADDR"];
Das letzte \n sollte weggelassen werden, da die eigentliche Mail sonst mit einem Zeilenumbruch beginnt.

Eine andere Sache ist vlt. noch anstatt \n - \r\n zu benutzen, allerdings hängt das ja immer vom MTA ab (GMail funktioniert zB nur mit \n), kommt halt drauf an.

Ansonsten sehr fein,
grüße osai.
 
Hallo,

freut mich das du das Formular nun super hingekriegt hast! Ebenfalls super das du es hier im Forum zur Verfügung stellst!

Ciao,
Oliver
 
Hi,

aus dem Grunde habe ich \n genommen, da das alle können.

Das letzte \n bitte entfernen, da hast du recht :)

@eVox:

Danke für die Blumen. Ich finde das jetzt so auch gut.
Alles schön W3C valid und für die, die kein PHP haben, eine JS Version.


Gruß

Yves
 
jepp, so schauts super aus :)

grüße osai.
 
Zurück
Oben Unten