Gruß Jörg
Code: Alles auswählen
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>Kontaktformular</title>
<style>
form { float:left; }
label { display:block; width:100px; float:left; }
input,select { outline:none; }
#hilfebox { background:rgba(0,200,0,0.2); border:2px solid rgba(0,0,0,0.2); border-radius:10px; padding:10px; width:250px; margin-left:300px; display:none; }
</style>
<script type="text/javascript">
function zeigeHilfe($sHilfetext) {
// unsichtbaren Hilfecontainer mit Text fuellen
document.getElementById('hilfebox').innerHTML= $sHilfetext;
// Hilfecontainer einblenden
document.getElementById('hilfebox').style.display= 'block';
//document.getElementById('hilfebox').style.marginTop= $iTop+'px';
}
function versteckeHilfe() {
// Hilfecontainer ausblenden
document.getElementById('hilfebox').style.display= 'none';
}
function formularPruefen() {
// Variablen lokal deklarieren
var $sVname, $sNname, $sEmail, $iPLZ, $sOrt
// Text aus dem Feld lesen
$sVname= document.getElementById('Vorname').value;
$sNname= document.getElementById('Nachname').value;
$iPLZ= document.getElementById('Postleitzahl').value;
$sOrt= document.getElementById('Wohnort').value;
$sEmail= document.getElementById('absender').value;
// Inhalt pruefen
if( ! (/^\s*[a-zäöü][a-zßäöüéáí\s.-]+$/i).test($sVname) ) {
alert('Bitte den Vornamen eintragen.');// Fehlermeldung ausgeben
document.getElementById('Vorname').focus();
return false; // Abbruch der Funktion und Rueckgabe von false
}// if - Vorname korrekt - ENDE
if( ! (/^\s*[a-zäöü][a-zßäöüéáí\s.-]+$/i).test($sNname) ) {
alert('Nachname fehlt!'); // Fehlermeldung ausgeben
document.getElementById('Nachname').focus();
return false; // Abbruch der Funktion
}
if( ! (/(?:^\s*(?:(D)\s*-?)?\s*([0-9]{5})\s*$)|(?:^\s*(?:(?:([A-CE-Z]{1})|([A-Z]{2}))\s*-?)?\s*([0-9]{3,6})\s*$)/i).test($iPLZ) ) {
alert('Postleitzahl fehlt!'); // Fehlermeldung ausgeben
document.getElementById('Postleitzahl').focus();
return false; // Abbruch der Funktion}
}
if( ! (/^\s*[a-zäöü][a-zßäöüéáí\s.-]+$/i).test($sOrt) ) {
alert('Wohnort fehlt!'); // Fehlermeldung ausgeben
document.getElementById('Wohnort').focus();
return false; // Abbruch der Funktion
}
if( ! (/^\s*[^@ #]+@[^@ _#+*?=:;.]+\.[a-z]{2,}\s*$/i).test($sEmail) ) {
alert('Email fehlt!'); // Fehlermeldung ausgeben
document.getElementById('absender').focus();
return false; // Abbruch der Funktion
}
return true; // alle Pruefungen bestanden, Rueckgabe von true
}// function - formularPruefen - ENDE
</script>
</head>
<body onload="document.getElementsByTagName('form')[0].reset();">
<h1>Kontakt zu uns</h1>
<form action="[color=#FF0000]seitenname.php[/color]" onsubmit="return formularPruefen();">
<!-- form action="http://www.formular-chef.de/fc.cgi" method="post" enctype="multipart/form-data" -->
<input type="hidden" name="empfaenger" value="[color=#FF0000]hierkommteureemail@rein.com[/color]" />
<input type="hidden" name="pflicht" value="Vorname,Nachname,Postleitzahl,Wohnort,absender">
<p>
<label>Vorname:*</label>
<input name="Vorname" id="Vorname" onfocus="zeigeHilfe('Tragen Sie hier bitte den Vornamen ein.');" onblur="versteckeHilfe();" />
</p>
<p>
<label>Nachname:*</label>
<input name="Nachname" id="Nachname" onfocus="zeigeHilfe('Hier bitte den Nachnamen eingeben.');" onblur="versteckeHilfe();" />
</p>
<p>
<label>PLZ:*</label>
<input name="Postleitzahl" id="Postleitzahl" onfocus="zeigeHilfe('Hier bitte Ihre PLZ eingeben.');" onblur="versteckeHilfe();" />
</p>
<p>
<label>Wohnort:*</label>
<input name="Wohnort" id="Wohnort" onfocus="zeigeHilfe('Hier bitte Ihren Wohnort eingeben.');" onblur="versteckeHilfe();" />
</p>
<p>
<label>Email:*</label>
<input name="absender" id="absender" onfocus="zeigeHilfe('Die E-Mail-Adresse muss folgenden Aufbau haben: max.muster@web.de', '115px');" />
</p>
<p>
<label>Betreff:</label>
<select name="betreff">
<option>bitte wählen..</option>
<option>Allgemeine Frage</option>
<option>Verbesserungsvorschlag</option>
<option>Technisches Problem</option>
</select>
</p>
<p>
<label>Ihre Nachricht:</label>
<textarea name="Nachricht"></textarea>
</p>
<p>
<input type="submit" />
</p>
</form>
<div id="hilfebox">Hier steht später die Hilfe...</div>
</body>
</html>