Irgendwann kommt meistens der Punkt an dem Ihr in eure Website eine Möglichkeit einbauen möchtet um Resonanz durch Besucher zu bekommen, bzw. Aufträge zu erhalten. Die Antwort hierauf ist ein Kontaktformular. Mit einem Kontaktformular könnt ihr verschiedene Funktionen erfüllen lassen, unter anderem könnt ihr Textnachrichten Empfangen den Status eines Objektes mittels einer Checkbox in eurem Kontakformular darstellen lassen oder einfach nur die Namen und Telefonnummern eurer User erhalten. In einem Kontaktformular sind eigentlich kaum Grenzen gesetzt, ausser ihr stellt diese auf.
Als erstes solltet Ihr überlegen, welche Abfragen ihr in eurem Kontaktformular einbauen möchtet, Absender, Name etc. Wichtig bei eurem Kontaktformular kann auch die Festlegung von Pflichtfeldern sein, welche der Absender ausfüllen muss.
Hier habt ihr ein kleines einfaches Kontaktformular jedoch ladet euch ZUVOR noch die pflichtfeld.js herunter.
<script src="pflichtfeld.js" type="text/javascript"><!--mce:0--></script> <div id="content" class="form"> <form id="kontaktformular" action="http://www.nettz.de/Formular-Chef/Formular-Chef.cgi" enctype="mulitpart/form-data" method="post"> <input name="empfaenger" type="hidden" value="infoX§Xcss-roots.de" /> <div> <label for="absender">Ihre E–mailadresse:* </label> max 25 Zeichen <input id="absender" maxlength="25" name="absender" type="numbers" /> <label for="telefon">Telefon:* </label> max 15 Zeichen <input id="telefon" maxlength="15" name="telefon" type="text" /> <label id="label1" style="cursor:pointer;" for="name">Name:* </label> max 15 Zeichen <input id="name" class="eingabefeld" maxlength="30" name="name" type="text" /></div> <div> <label for="nachricht">Ihre Nachricht:*</label> <textarea id="nachricht" cols="20" rows="5" name="nachricht"></textarea></div> <div> <input type="submit" value="Abschicken" /></div> <div class="kleinkram"> *Pflichtfelder</div> </form></div>
Und jetzt folgt noch der notwendige CSS-Bestandteil
* {margin:0; padding:0;} * img { border:0; } body { font:13px Arial, Verdana, Helvetica, sans-serif; color: #515050; } /**** Formularfelder **/ form p { padding-bottom:5px; } form { margin-top:10px; margin-left:10px; width:400px; padding:20px; border: 1px solid #8c8c8c; } label { display:block; cursor:pointer; /** Mauszeiger wird zur Hand **/ } input#absender, textarea, #telefon, #name /* breite und Rahmen der Textfelder definieren */ { width:400px; border: 1px solid #8c8c8c; margin-bottom:1em; } textarea /* Höhe des Textfeldes definieren */ { height:7em; } .kleinkram { font-size:9px; }
Nun zur Erklärung des HTML-Bestandteils, der Stylesheet sollte sich mittlerweile von selbst erklären.
<form id="kontaktformular" action="http://www.nettz.de/Formular-Chef/Formular-Chef.cgi" enctype="mulitpart/form-data" method="post"> <input name="empfaenger" type="hidden" value="infoX§Xcss-roots.de" /> </form> Mit dem Operator Action, übergebt ihr dem Kontaktformular praktisch wo das dazugehörige Formmailscript liegt, falls ihr ein eigenes habt, ersetzt die Adresse durch euren Pfad. Solltet ihr keines besitzen könnt ihr dieses hier verwenden, denn Formular Chef ist ein Free-Webmailer welcher ohne Registrierung oder der gleichen funktioniert. Die Elemente nach dem enctype kommen, arbeiten mit dem pflichtfelder.js Javascript zusammen, und überprüfen ob die in der Klammer nach dem Array angegebenen Namen der Labels mit Inhalten gefüllt sind. Die einzelnen Labels stehen für die einzelnen Formularfelder, welche ihr mit den angegebenen Attributen ausfüllen solltet. Das Element maxlength="15" veranlasst dass eine Maximale Zeichenangabe festgelegt wird die nicht überschritten werden kann. <pre lang="html">onchange="value=value.replace(/\D/g,'');"
Dieses Element bei der Telefonnummer sorgt dafür dass in dem Bereich eures Kontaktformulares keinerlei Sonderzeichen dargestellt werden, sondern gelöscht werden.
Textarea steht für das Nachrichtenfeld in der der Absender seine Hauptnachricht hineinschreibt.
So jetzt noch das letzte Element was euch fremd erscheinen könnte,
value="infoX§Xcss-roots.de"
Das X§X soll euch ein wenig vor Spamnachrichten schützen.
So in etwa sollte es dann aussehen:
