Verfasst am Juli 14, 2009 von admin in Kategorie Wordpress Plugins
WP-LightForm stellt ein optisch ansprechendes und funktionell komfortables Kontaktformular dar, welches über Ajax mit Abfrageorganismen versehen wurde, so dass die Pflichtfelder ausgefüllt werden müssen. Sollten die Pflichtfelder nicht ausgefüllt werden wirft WP Light Form eine entsprechende Fehlermeldung aus, die optisch gut animiert worden ist.
Die Installation läuft im üblichen WordPress-Verfahren ab und muss lediglich durch einen weiteren Schritt ergänzt werden, nämlich das in die gewünschte Seite in die das Kontaktformular eingefügt werden soll der folgende Code impliziert wird.
Code:
[LightForm]
Downloaden könnt ihr euch das Plugin hier
Verfasst am Dezember 9, 2008 von admin in Kategorie News
Da ich kürzlich auf das Thema Kontaktformular gestoßen bin, dachte ich mir ich lasse euch an meinen Erkenntnissen teilhaben und habe euch deshalb ein kleines Tutorial mit Code-Beispielen erstellt. Ich danke Axel für die Hilfe mit dem Pflichtfelderteil. Der Pflichtfelderteil ist auf jeden Fall ein wichtiger Bestandteil den ihr nicht vergessen solltet.
Verfasst am Dezember 9, 2008 von admin in Kategorie Kontaktformular mit Pflichtfeldern
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:
