Formularvorlage 8 Bestellung
    
 Home • Formulare • Formularvorlage 8 Demo  Quellcode 

 Formulare, Vorlage 08   (mit Captcha)

Ein Formular gedacht zur Übermittlung von Informationen für eine Bestellung. Außerdem demonstriere ich hier Rechenoperationen innerhalb eines Formulars mit einem zeitnahen Update der Rechenergebnisse.

Formularvorlage 08 - Bestellung eines Artikels

UPDATE  17.03.2012  Korrektur bei der Prüfung der Radiobuttons

Untertitel: Rechnen in Formularen.

Formular zur Bestellung eines Artikels der per Nachname oder Vorauskasse bezahlt wird. Die Formulardaten werden via Email versand. Einen Einsatz findet dieses Anwendungsbeispiel dort, wo lediglich ein Artikel oder eine kostenpflichtige Dienstleistung angeboten wird.

Vorkasse oder Nachname? Die Kosten werden sofort berechnet! Änderungen im Formularfeld für die Anzahl (Menge) und bei der Auswahl der Bezahlung (Radiobuttons) generieren eine sofortige Neuberechnung und die Anzeige der Kosten sowie eines Infotextes.

Bestellformular für den kleinen Anwendungsbereich. Natürlich könnte man die Anzahl der angebotenen Artikel erweitern und das Formular anpassen.

Zur Bestellung von Eintrittskarten, selbst gestrickten Wollmützen :-) , FanAufklebern, kostenpflichtigen Broschüren, eigenen Gedichtbändchen, ... reicht dieses Formular völlig aus.
Anklicken zur Vorschau


Screenshots eingabeabhängige, sofortige Anzeigeänderung






   Formulareigenschaften

Pflichtfelder für Kontaktdaten sind markiert (Sternchen). Der Absender ist verpflichtet eine Emailadresse einzutragen. Die Auswahl der Bezahlung über Radiobuttons soll die Dateneingabe erleichtern.

  • Eingabefelder Anschrift + Kontakt
  • Eingabefeld für die Menge
  • Auswahl der Bezahlung
  • sofortige Anzeige des Endpreises
  • dynamischer Infotext
  • Eingabe Mitteilungstext
  • Kontrolle der Pflichtfelder + gültige Email
  • Basis-Spamschutz
  • mathematisches Captcha
  • Funktion zur Darstellung des Betrags (2 Nachkommastellen)

Ein Feld zur Eingabe eines CAPTCHA-Codes soll weitgehend verhindern, dass das Formular von einem Roboter abgeschickt wird. Hier wird ein mathematisches Capcha verwendet.

Siehe dazu: Basiswissen Spam    Basiswissen CAPTCHAs



   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
  • Email-Adresse im Formular anpassen
  • Preis + Kosten anpassen
  • Artikelbezeichnung anpassen
4 Variablen erleichtern die Anpassung: 
// Beträge und Bankverbindung
// Dezimalzeichen = ein Punkt

var Preis = 5.95;
var Nachname = 5.70;
var Voraus = 3.20;
var Konto = "Halsabschneiderbank Berlin,\nKontoNr: 123456789, BLZ 000 00 000";
Zeilenumbrüche bei der Bankverbindung durch '\n' einfügen




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.

SPAM-Schutz Emailadresse CAPTCHA Prüfungen CSS

 
   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"');
...



  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 Vergleichsfunktion.

Innerhalb der Prüfung steht die Anweisung zur Überprüfung des Captcha-Codes. Im Formular wird eine Additionsaufgabe (20 + 5) angezeigt. Entsprechend wird die Eingabe '25' erwartet.

  // Spamschutz
  else if(document.Anfrage.frage.value != "25"){
  alert("Bitte geben Sie die Zahl 25 ein!")

 

3  Prüfung der Pflichtfelder

Beim Absenden (onSubmit) wird die Funktion check() aufgerufen, welche die 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.


 

4  CSS-Formatierungen ändern

Die Formularelemente im Beispiel wurden mit CSS formatiert. Die Zuweisung der Formatierungen erfolgt über CSS-Unterklassen.

Der (rote) Rand mit Abstand wurde über eine zusätzliche, alles umschließende Tabelle (ContentTab) realisiert. Diese zusätzliche Formatierung können Sie natürlich entfernen.

.ContentTab {
border: 1px solid #FF0000;
background-color: #FFFFFF;
width: 540px;
}

.radio {
color: #2C6ED5;
font-size: 12px;
border: none;
padding: 2px;
border: none;
padding: 5px;
width: 20px;
height: 22px;
}

.lang {
color: #1F1F1F;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
padding: 3px;
width: 320px;
height: 22px;
}

.kurz {
color: #1F1F1F;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
padding: 3px;
width: 80px;
height: 22px;
}

.butt {
color: #1F1F1F;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
border: 1px solid #7F9DB9;
background-color: #F4FFF4;
padding: 3px;
width: 120px;
height: 22px;
}

.Anzeige1 {
color: #0000FF;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
padding: 3px;
width: 320px;
height: 22px;
}

.Anzeige2 {
color: #1F1F1F;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
padding: 3px;
width: 80px;
height: 22px;
}

.keinRand {
border: 1px solid #FFFFFF;
}

.textfeld {
color: #1F1F1F;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
border: 1px solid #7F9DB9;
background-color: #FFFFFF;
padding: 3px;
width: 320px;
height: 100px;
}

.textfeld2 {
color: #1F1F1F;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
border: none;
background-color: #FFFFFF;
padding: 3px;
width: 320px;
height: 40px;
overflow: hidden;
}