 Formularvorlage 01-B (Basis-SPAM-Schutz + CAPTCHA)
Dieses Formular können sie nach Ihren Bedürfnissen anpassen. Zur Zeit wird jedes Feld auf eine Eingabe (leer?) überprüft. Zusätzlich wird die Eingabe im Feld Emailadesse auf gültige / üngültige Zeichen getestet.
|
|
Adresse - Telefon - Email - Nachricht
Hier in diesem Beispiel 01-B gilt also: Alle Felder sind Pflichtfelder! Das können sie so belassen oder auch ändern. Die Erklärung dazu finden sie weiter unten.
update 14.08.2008 - CSS-Formatierungen überarbeitet
update 17.08.2008 - SPAM-Schutz eingefügt
update 18.08.2008 - Funktionen zur Löschung der Vorgaben + CAPTCHA
|
|
Bitte bedenken sie, dass man den Besucher mit unnötigen Pflicht-Eingaben beim Ausfüllen eines Formulars abschreckt. Über einen Pflicht-Eintrag für die Anschrift oder der Telefonnummer sollte von Fall zu Fall entschieden werden.
Aufwand zu Übernahme dieses Beispiels
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
- Formulartabelle in den Body-Bereich kopieren
- Email-Adresse anpassen
Für dieses Formular gilt:
- Alle Felder sind Pflichtfelder
- Ein Vorgabetext (als Erklärung) steht bereits im Feld
- Die Vorgaben werden automatisch gelöscht
- Es erfolgt eine Prüfung der Felder
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.
Ein Formular kann nur dann aus einem HTML-Dokument abgesand werden, wenn der Mail-Client des benutzten Browsers entsprechend konfiguriert ist.
Für den Fall, dass der Absender Schwierigkeiten mit dem Email- oder Formularversand hat, sollten sie die Emailadresse anzeigen. Zum Spamschutz vorzugsweise als geschützen Textstring oder als Grafik.
Siehe auch:  Spiderschutz Textdarstellung
Formulare sinnvoll einsetzen
Schutz vor Email-Spidern Basis-Spiderschutz
Ein Script schreibt das einleitende HTML-Tag für das Formular. Der Wert für das Attribut ' action="mailto: xxxx "' der normalerweise eine Emailadresse darstellt, wird dabei mit mehreren 'document.write-Anweisungen in das HTML-Dokument geschrieben.
|
 |
So ist es möglich die Empfänger-Emailadresse zu zerstückeln. Das dient als SPAM-Schutz und soll den Robots das Herausfischen der Emailadresse erschweren.
Siehe dazu: 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="vorlage01" method="post"');
document.write(' onSubmit="return Pruefen01();"');
document.write(' enctype="text/plain">');
//-->
</script>
Erklärung der Funktionen Leeren()
Hier erkläre ich kurz die Arbeitsweise des Formulars. Das gewählte Beispiel bezieht sich auf des Eingabefeld für die Telefonnummer mit dem Namen 'telefon'!
Der HTML-Code für das Eingabefeld 'telefon':
<input type="text"
size="40"
name="telefon"
value=" Ihre Telefonnummer"
onFocus="return LeerenTelefon()">
Zurücksetzen des Vorgabewertes
Sobald der Curser in das Eingabefeld für die Telefonnummer gesetzt wird, wird der Vorgabetext gelöscht und das Feld geleert. Das geschieht durch den Aufruf der Funktion 'LeerenTelefon()', sobald das Feld den Focus bekommt (onFocus).
function LeerenTelefon() {
if(document.vorlage01.telefon.value == " Ihre Telefonnummer") {
document.vorlage01.telefon.value = "";
document.vorlage01.telefon.focus();
return false;
}
Durch die Prüfung des Inhalts wird das Feld nur geleert, wenn die Vorgabe 'Ihre Telefonnummer' der einzige Inhalt ist. So wird bei einer Nachbesserung der bis zu diesem Zeitpunkt eingetragene Text nicht gelöscht.
Prüfungen
a Beispiel einer Prüfung - Feld leer?
Das Eingabefeld 'telefon' soll nicht leer sein. Beim Absenden wird eine Prüfung eingeleitet. Beispiel:
if(document.vorlage01.telefon.value == "") {
alert("Bitte Telefonnummer eintragen!");
document.vorlage01.telefon.focus();
return false;
}
Hier wird geprüft ob das Feld leer ist. Das geschieht im JavaScript innerhalb der Funktion Pruefen01(), die sämtliche Prüfungsroutinen enthält. Wenn das Eingabefeld leer ist, wird eine Alert-Box mit einen entsprechenden Meldung angezeigt.
alert("Bitte Telefonnummer eintragen!");
Dann wird die Eingabemarke in das Feld 'telefon' gesetzt mit
document.vorlage01.telefon.focus();
Da das Eingabefeld in meinem Beispiel bereits eine Vorgabe (erklärender Text) enthält, ist das Feld ja grundsätzlich nicht leer. Daher habe ich bei der Prüfung diesen Status ebenfalls als ungültig gewertet.
Phone = document.vorlage01.telefon.value;
Phone = Phone.slice(1);
if( Phone == "" || Phone == "Ihre Telefonnummer")
{
alert("Bitte Telefonnummer eintragen!");
document.vorlage01.telefon.focus();
return false;
}
Durch 'slice(1)' konnte ich der Vorgabe ein Leerzeichen voranstellen (reine Kosmetik)
b mathematisches CAPTCHA
Der vom Benutzer eingetragene Captcha-Code soll weitestgehend verhindern, dass das Formular von einem Roboter abgeschickt wird.
Bei dieser mathematischen Fragestellung einer Addition werden die verwendeten beiden Summanden per Zufallsgenerator ermittelt. Das Ergebnis wird mit dem eingetragenen Code verglichen.
Ich verwende hier zur Ermittlung der beiden Zufallzahlen die Sekunden- und Minutenwerte der Systemzeit. Da ich den oberen Grenzwert bei 10 festgelegt habe, sollte die Aufgabe leicht lösbar sein, solange die Addition im Zahlenraum bis 20 beherrscht wird.
Anpassungen
1 Emailadresse
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 Prüfungen
Innerhalb der Funktion PruefeObLeer() stehen die Anweisungen zur Überprüfung der Eingaben für alle Felder. Wenn ein Feld nicht geprüft werden soll, es also auch leer bleiben darf, löschen sie einfach den entsprechenden Teil innerhalb der Funktion, wobei xxxxxxx dem Feldnamen entpricht.
von //:: anfang Prüfung xxxxxxx
bis einschließlich //:: ende Prüfung xxxxxxx
3 CSS-Formatiereung
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.
Der im Head-Bereich der HTML-Datei notierte CSS-Code:
<style type="text/css">
<!--
#FormTab td{
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:normal;
color: #0070C0;
}
#FormTab .text16{
font-family:monospace,sans-serif;
font-size:16px;
font-weight:normal;
color: #FF007F;
}
input {
font-size:11px;
color: #5F5F5F;
background-color: #FAFAFA;
border: 1px solid #7F9DB9;
width:250px;
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-size:11px;
color: #5F5F5F;
background-color: #FAFAFA;
border: 1px solid #7F9DB9;
width:250px;
height:100px;
}
.butt {
cursor:hand;
width:80px;
}
-->
</style>
Beispiel für die Zuweisung der Unterklasse im Input-Tag des Buttons. Als Wert für das Attribut der CSS-Klasse wird wird butt" eingetragen:
<input class="butt" type="submit" value=" senden">
|
HOME
Demo 01
ZURÜCK