Ein anderes Kontaktformular mit RW (Teil 1)

Das Kontaktformular von RW beinhaltet leider kein Captcha. Da nicht alle User das excellente FormLoom kaufen wollen, man könnte die freie Lite Version des Forms To Go-Programm benutzen die reCAPTCHA unterstützt.
Sicherlich es ist eine ganz andere Arbeit so ein Formular zu erstellen als würde man das Kontaktformular-Plugin von RW benutzen. Das Plugin erzeugt automatisch nicht nur die Felder und deren Namen auf der Seite sondern auch die mailer.php Datei die für das Versenden des Formular zuständig ist.

Forms To Go (die PHP-Version) erzeugt gerade diese PHP Datei die zuständig für die Validierung und das Versenden des Formulars. Das Formular selbst muss man selber erstellen.
In diesen drei Artikel versuche ich ein “vollständigen” Kontaktformular zu erstellen und mit Hilfe von Forms To Go in RW einzubinden.

1. Formulare definieren
Zuerst ein Formular wird definiert durch:

<form>
<!-- hier folgen die Formularelemente -->
</form>

Für das Absenden des Formulars ist die Datei zuständig die in dem Pflichtatribut action aus dem

aufgeführt wird:

<form action="/cgi-bin/versenden.pl">
<form action="../../cgi-bin/senden.cgi">
<form action="kontakt.php">

Eine der zwei möglichen Übertragungsmethoden (method=”get” oder method=”post”) muss sich in der
befinden:

<form action="/cgi-bin/versenden.pl" method="post">
<!-- hier folgen die Formularelemente -->
</form>

Weitere Erklärungen: Formulare definieren

2. Eingabefelder und Bereiche
Ein Feld wird durch einem

<input />

definiert:

<input name="vorname" type="text">

Soll dieses Feld auch eine Beschriftung bekommen, dann wird diese Beschriftung durch das label-Tag erzeugt:

<label>Vorname: </label><input name="vorname" type="text">

Mehrere Felder kann man mit

<fieldset>

gruppieren:

<fieldset>
	<legend>Persönliche Daten</legend>
	<div
		<label for="vorname">
			Vorname:
		</label>
		<input name="vorname" placeholder="Ihr Vorname" type="text" />
	</div>
	<div>
		<label for="familienname">
			Familienname:
		</label>
		<input name="familienname" placeholder="Ihr Nachname" type="text" />
	</div>
</fieldset>
<fieldset>
	<legend>Addresse</legend>
	<div>
		<label for="strasse">
			Straße:
		</label>
		<input name="strasse" placeholder="Ihre Straße" type="text" />
	</div>
	<li class="fm-opt">
		<label for="plz">
			PLZ:
		</label>
		<input name="plz" placeholder="12345" type="text" />
	</div>
	<div>
		<label for="ort">Ort:
		</label>
	<input name="ort" placeholder="Ihre Stadt" type="text" />
	</div>
	<div>
		<label for="land">
			Land:
		</label>
		<input name="land" placeholder="Ihr Land" type="text" />
	</div>
</fieldset>

Mit “etwas” CSS bekäme so ein Formular ein Aussehen :-)

Hier bekommt mehr Informationen über Formulare.

3. Das Formular
Aus Seiten wie Prettier Accessible Forms (hier die deutsche Übersetzung) oder Fancy Form Design Using CSS Article habe ich die Formatierung der Feldgruppen mit einer geordneten Liste übernommen.

Das Formular beinhaltet ein “Fake”-Feld für die Spam-Roboter. Das Feld wird später mit Forms To Go so validiert dass dadrin nichts zu befinden sein muss (der Roboter “weiss” davon nichts und wird versuchen etwas in dem Feld zu schreiben. Das wird aber von der Validierung nicht durchgelassen.)

Das Formular besitzt durch

<strong><!--ERRORMSG--></strong>

auch Platzhalter für die Meldungen die erscheinen sollen wenn ein Feld nicht erwartungsgemäß ausgefüllt/nicht ausgefüllt wurde.

In Kombination mit dem Paragraph:

<p id="fm-intro">
	Die <strong>fett</strong> markierten Felder sind Pflichtfelder.
</p>

und ein JavaScript das später in der RW-Seite eingefügt wird kann man die optionalen Felder verbergen.

Das Formular besitzt mehrere Feldertypen und durch die zwei Klassen

class="fm-req" und class="fm-opt"

kann man eigentlich ALLES erstellen was auch das Kontaktformular-Plugin erstellen kann. LEIDER aber die Lite-Version von Forms To Go KANN NICHT das Uploaden einer Datei validieren. Dafür müsste man doch die 30$ für die PHP-Version bezahlen.

Hier also ist das Formular:

<h3>
	Formular Layout
</h3>
<div id="formular">
	<!-- Um 'Optionale Felder verbergen' Function anzuzeigen muss ein Absatz p id="fm-intro" eingefügt werden -->
	<div style="width: 47%; float: left;">
		<p id="fm-intro">
			Die <strong>fett</strong> markierten Felder sind Pflichtfelder.
		</p>
	</div>
	<div style="margin-left: 53%;">
		<p id="fm-intro">
			<?php echo "Datum: " . date('d.m.Y') . "<br />" . "Zeit: " . date('H:i:s') . "<br />" . "IP-Adresse: " . $_SERVER['REMOTE_ADDR'] . "<br />" . "Browser: " . $_SERVER['HTTP_USER_AGENT']; ?>
		</p>
	</div>
	<div class="2ColFooter" style="clear: both;"></div>
	<form id="fm-form" method="post" action="submit.php" name="fm-form">
		<div style="display:none;visibility:hidden;">
			<label>
				Spam:
				<strong><!--ERRORMSG:spam--></strong>
			</label>
			<input type="text" name="spam" size="1" value="" />
		</div>
		<fieldset>
			<legend>Persönliche Daten</legend>
			<ol>
				<li class="fm-req">
					<label for="fm-vorname">
						Vorname:
						<strong class="required"><!--ERRORMSG:vorname--></strong>
					</label>
					<input name="vorname" id="fm-forname" placeholder="Ihr Vorname" type="text" />
				</li>
				<li class="fm-req">
					<label for="fm-familienname">
						Familienname:
						<strong><!--ERRORMSG:familienname--></strong>
					</label>
					<input name="familienname" id="fm-familienname" placeholder="Ihr Nachname" type="text" />
				</li>
			</ol>
		</fieldset>
		<fieldset>
			<legend>Addresse</legend>
			<ol>
				<li class="fm-opt">
					<label for="fm-strasse">
						Straße:
					</label>
					<input id="fm-strasse" name="strasse" placeholder="Ihre Straße" type="text" />
				</li>
				<li class="fm-opt">
					<label for="fm-plz">
						PLZ:
					</label>
					<input id="fm-plz" name="plz" placeholder="12345" type="text" />
				</li>
				<li class="fm-req">
					<label for="fm-ort">
						Ort:
						<strong><!--ERRORMSG:ort--></strong>
					</label>
					<input id="fm-ort" name="ort" placeholder="Ihre Stadt" type="text" />
				</li>
				<li class="fm-opt">
					<label for="fm-state">
						Bundesland:
					</label>
					<select id="fm-state" name="state">
						<option value="" selected="selected">
							Wählen Sie ein Bundesland
						</option>
						<option value="BW">
							Baden-Würtemberg
						</option>
						<option value="BY">
							Bayern
						</option>
						<option value="B">
							Berlin
						</option>
						<option value="BB">
							Brandenburg
						</option>
						<option value="HB">
							Bremen
						</option>
						<option value="HH">
							Hamburg
						</option>
						<option value="HS">
							Hessen
						</option>
						<option value="MV">
							Mecklenburg-Vorpommern
						</option>
						<option value="NS">
							Niedersachsen
						</option>
						<option value="NRW">
							Nordrhein-Westfalen
						</option>
						<option value="RLP">
							Rheinland-Pfalz
						</option>
						<option value="SAR">
							Saarland
						</option>
						<option value="SX">
							Sachsen
						</option>
						<option value="SXA">
							Sachsen-Anhalt
						</option>
						<option value="SH">
							Schleswig-Holstein
						</option>
						<option value="TH">
							Thüringen
						</option>
					</select>
				</li>
				<li class="fm-opt">
					<label for="fm-land">
						Land:
					</label>
					<input id="fm-land" name="land" placeholder="Ihr Land" type="text" />
				</li>
			</ol>
		</fieldset>
		<fieldset>
			<legend>Kontakt Informationen</legend>
			<ol>
				<li class="fm-req">
					<label for="fm-telefon">
						Telefon:
						<strong><!--ERRORMSG:telefon--></strong>
					</label>
					<input id="fm-telefon" name="telefon" placeholder="Ihre Telefonnummer" type="text" title="Geben Sie die Telefonnummer in xxx-xxx-xxxx-Format" />
				</li>
				<li class="fm-opt">
					<label for="fm-fax">
						Fax:
					</label>
					<input id="fm-fax" name="fax" placeholder="Ihre Faxnummer" type="text" title="Geben Sie die Faxnummer in xxx-xxx-xxxx-Format" />
				</li>
				<li class="fm-opt">
					<label for="fm-handy">
						Handy:
					</label>
					<input id="fm-handy" name="handy" placeholder="Ihre Handynummer" type="text" />
				</li>
				<li class="fm-req">
					<label for="fm-email">
						E-Mail:
						<strong><!--ERRORMSG:email--></strong>
					</label>
					<input id="fm-email" name="email" placeholder="Ihre E-Mail-Adresse" type="text" tabindex="" />
				</li>
				<li class="fm-opt">
					<label for="fm-url">
						Homepage:
					</label>
					<input id="fm-url" name="url" placeholder="Ihre Homepage" type="text" />
				</li>
				<li class="fm-multi">
					<div class="fm-opt">
						<p>
							Möchten Sie über die zukünftige Updates informiert werden?
						</p>
						<label for="fm-newsopt-ja"><input name="newsopt" type="radio" id="fm-newsopt-ja" value="ja" checked="checked"> Ja</label>
						<label for="fm-newsopt-nein"><input id="fm-newsopt-nein" name="newsopt" type="radio" value="nein"> Nein</label>
					</div>
				</li>
			</ol>
		</fieldset>
		<fieldset>
			<legend>Kommentar</legend>
			<ol>
				<li class="fm-req">
					<label for="fm-betreff">
						Betreff: 
						<strong><!--ERRORMSG:betreff--></strong>
					</label> 
					<input id="fm-betreff" name="betreff" placeholder="Betreff" type="text" />
				</li>
				<li class="fm-req">
					<label for="fm-kommentar">
						Kommentar: 
						<strong><!--ERRORMSG:kommentar--></strong>
					</label> 
					<textarea name="kommentar" cols="15" rows="5" id="fm-kommentar" placeholder="Ihr Kommentar"></textarea>
				</li>
			</ol>
		</fieldset>
		<div class="fm-req">
			<strong><!--ERRORMSG:reCAPTCHA--></strong>
			<?php
				require_once('recaptchalib.php');
				$publickey = "YOUR_PUBLIC_KEY"; // you got this from the signup page
				echo recaptcha_get_html($publickey);
			?>
		</div>
		<div id="fm-submit" class="fm-req">
			<input type="submit" name="Submit" id="submit" value="Nachricht senden" />
			<input type="reset" name="Clear" id="clear" value="Abbrechen" />
		</div>
	</form>
</div>

In dem zweiten Teil werde ich dieses Formular mit Forms To Go validieren und in einer RW-Homepage einbinden

Kommentieren ist momentan nicht möglich.