 Formulare, Vorlage 07 (mit Basis Spider-Schutz und Captcha)
Ein Formular gedacht zur Übermittlung von Informationen an den Webmaster mit Formular mit Textfeldern, Checkboxen und Radiobottons. Drei Pflichtfelder werden vor dem Senden überprüft. Falls eine Email-Adresse eingetragen wurde, wird der Eintrag auf Gültigkeit geprüft.
|
|
Formularvorlage 07 - Fehler an den Webmaster melden
Ein Feld zur Eingabe eines CAPTCHA-Codes soll weitgehend verhindern, dass das Formular von einem Roboter abgeschickt wird. Hier wird ein Semi-Capcha verwendet. Ein Basis-Spamschutz zum Schutz der Emailadresse ist ebenfalls berücksichtigt.
Siehe dazu:  Basiswissen Spam
Basiswissen CAPTCHAs
Webseite Fehler melden
Pflichtfelder sind farbig hinterlegt. Der Absender ist nicht verpflichtet eine Emailadresse einzutragen. Das Angebot an Checkboxen und Radiobuttons soll die Dateneingabe erleichtern.
Für einige Eingabefelder wird eine Erklärung als Vorgabetext angezeigt. Die Vorgaben werden automatisch gelöscht, sobald das Feld den Focus erhält.
Einen Link auf eine solche Fehler-Melden-Seite kann man im Menü, im Impressum und / oder auf der Error404-Seite notieren.
|
 |
|
Kontaktformular - Fehler melden
|
Aufwand zur Übernahme in ihre Seite
Den Quellcode entnehmen sie der Textdatei (Link oben in der Kopfzeile) und kopieren die Elemente in ihre HTML-Datei.
- CSS-Anweisungen für die Formatierungen in den Head-Bereich kopieren
- JavaSCript-Code in den Head-Bereich kopieren
- Formularcode in den Body-Bereich kopieren
- Captcha-Grafik herunterladen
- Email-Adresse anpassen
Das war's schon! Wenn sie mehr über Funktion und Anpassungen erfahren möchten, lesen sie ab hier weiter. Sie können diese Vorlage um einige Formularfelder erweitern, Prüfungen ausklammern oder hinzufügen und die CSS-Angaben ändern.
Schutz vor Email-Spidern
Ein Script schreibt das einleitende HTML-Tag für das Formular. Der Wert für das Attribut action="mailto: xxxxx " der normalerweise eine Emailadresse darstellt, wird dabei durch ein JavaScript mit mehreren 'document.write-Anweisungen in das HTML-Dokument geschrieben.
|
 |
So ist es möglich die Empfänger-Emailadresse zu zerstückeln. Das soll als Basis-SPAM-Schutz dienen und den Robots das Herausfischen der Emailadresse aus dem Formular erschweren.
Lesen sie zu diesem Thema: Basiswissen Spam
Das übliche einleitende Form-Tag, das sie normalerweise im HTML-Dokument notieren
<form action="mailto:JuppZupp@abc.de" method="post" ...
wird ersetzt durch JavaScript Schreibanweisungen. Das JavaScript schreibt nun das einleitende Form-Tag erst bei der Anzeige der Seite durch den Browser in das Dokument:
<script type="text/javascript" language="JavaScript">
<!--
document.write('<form action="mailto:JuppZupp');
document.write('@');
document.write('abc.de"');
document.write(' name="vorlage07" method="post"');
document.write(' onSubmit="return Pruefen07();"');
document.write(' enctype="text/plain">');
//-->
</script>
Anpassungen
1 Emailadresse anpassen
Damit die Post auch ankommt, müssen sie die Emailadresse im Formular anpassen. Diese Anpassung ist zwingend notwendig!
Ersetzen sie im Formularkopf die zwei Segmente der Adresse JuppZupp@abc.de mit den Werten der Emailadresse des Empängers.
<script type="text/javascript" language="JavaScript">
<!--
document.write('<form action="mailto:JuppZupp');
document.write('@');
document.write('abc.de"');
...
2 Captcha-Code ändern
CAPTCHAs sollen im Internet sicherstellen, dass nur Menschen und keine programmierten Bots bestimmte Dienste nutzen können. Das Funktionsprinzip ist einfach: Eine Grafik zeigt einen Text oder Ziffern die der Nutzer in ein Feld eintragen soll. Stimmt die Eingabe nicht mit dem Vergleichswert überein, wird das Formular nicht abgeschickt.
Hier wird die 'billige' Form eines CAPTCHAs verwendet. Ich nutze hier lediglich eine einzige feste Vorgabe, keine Zufallsgrafik.
Innerhalb der Funktion Pruefen07() steht auch die Anweisung zur Überprüfung des Captcha-Codes. Zur Zeit wird im Formular die Grafik 'captcha01.gif' angezeigt. Die Grafik zeigt die Keinbuchstaben 'abc'. Entsprechend wird die Eingabe 'abc' erwartet.
// Anfang Prüfung code?
if(document.vorlage07.code.value != "abc") {
alert("Bitte Code eintragen!");
...
Das können sie ändern indem sie eine andere Grafik anzeigen lassen. Variieren sie, wenn mehrere Formulare innerhalb ihres Projekts eingesetzt werden. Laden sie eine andere Grafik herunter und ändern den Vergleichswert.
       
3 Prüfung der Pflichtfelder
Beim Absenden (onSubmit) wird die Funktion Pruefen07() aufgerufen, welche die 3 Pflichtfelder überprüft. Ein 'return' im Aufruf sorgt für die Rückkehr zum Formular bei nicht bestandener Prüfung. Bei einer ungültigen Eingabe wird das Eingabezeichen automatisch im betreffenden Eingabefeld positioniert.
| Eingabefeld |
Eingabe erforderlich |
Gültigkeitsprüfung |
Name |
ja |
nein |
| Nachricht |
ja |
nein |
| CAPCHA-Code |
ja |
ja |
| E-Mail |
nein |
nur wenn nicht leer |
In den Eingabefeldern steht erklärender Text, der automatisch gelöscht wird. Die Funktionen Leerenxxxx() sind dafür zuständig, dass die Textvorgaben in den Eingabefeldern automatisch geleert werden, sobald die Felder den Fokus erhalten.
Innerhalb der Funktion Pruefen07() stehen die Anweisungen zur Überprüfung der Pfichtfelder und der Emailadresse.
Da hier der Eintrag der Emailadresse nicht vorgeschrieben ist, wird nur dann eine Prüfung durchgeführt, wenn das Feld nicht leer ist.
Möchten sie eine der Prüfungen nicht durchführen lassen, löschen sie den entsprechenden Codeblock innerhalb der Funktion. Die einzelnen Blöcke habe ich mit Kommentaren gekennzeichnet.
// Anfang Prüfung xxxxxxx
// Ende Prüfung xxxxxxx
4 CSS-Formatierungen ändern
update 10.08.2008 - CSS-Formatierungen überarbeitet
Die Formularelemente hier im Beispiel wurden mit CSS formatiert. Die Zuweisung der Formatierungen erfolgt über eine ID und auch über Unterklassen.
Rand mit Abständ wurde über einen Absatz (<p>) und mit einer zusätzlichen, umschließenden Tabelle realisiert. Diese zusätzliche Formatierung können sie natürlich entfernen.
#FormTab td{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
color: #5F5F5F;
}
.eingabe {
font-family:Arial;sans-serif;
font-size:12px;
color: #5F5F5F;
background-color: #FAFAFA;
border: 1px solid #7F9DB9;
width:350px;
height:20px;
line-height:130%;
}
.kurz {
font-family:Arial;sans-serif;
font-size:12px;
color: #5F5F5F;
background-color: #FAFAFA;
border: 1px solid #7F9DB9;
width:50px;
height:20px;
line-height:130%;
text-align:center;
}
textarea {
font-family:Arial;sans-serif;
font-size:12px;
color: #5F5F5F;
background-color: #FAFAFA;
border: 1px solid #7F9DB9;
width:350px;
height:100px;
}
.butt {
cursor:pointer;
color: #5F5F5F;
background-color: #FAFAFA;
width:100px;
}
|
Home • Formulare • Formularvorlage 07
Quellcode
SPAM-Schutz