Teil 2: Einen einzigartigen Kontaktformular erstellen

Ich nenne das Teil 2, weil ich letzte Woche dieses Abenteuer auf Tutorial Blog begonnen habe, wo wir zuerst ein einzigartiges Kontaktformular entworfen haben

Ein einzigartiges Kontaktformular in Photoshop erstellen

Hier greifen wir dort auf, wo wir aufgehört haben, und erstellen dieses Ding tatsächlich mit HTML/CSS, fügen einige Validierungen mit jQuery hinzu und lassen es mit PHP laufen. Hier ist, was wir bauen

DEMO ANZEIGEN

 

1. Bilder aus Photoshop ausschneiden

Das große Hintergrundbild (alles außer den Formularelementen)

Die Seiten-Hintergrundtextur (für überall sonst)

Der Senden-Button

Die Hintergründe der Eingabefelder. Um dies zu erstellen, habe ich den Bereich zugeschnitten, exportiert, dann den "Farbüberlagerungs"-Ebenenstil auf dieser Ebene geändert und erneut exportiert. Dann habe ich beide exportierten Dateien geöffnet, eine übereinander gelegt und erneut exportiert.

Der Hintergrund der Textarea. Gleiche Technik wie oben.

 

2. Das Formular strukturieren

Dies ist in den meisten Belangen ein typisches <form>. Einige Labels und Eingabefelder mit einem Submit-Button am Ende. Was daran anders ist, sind die Divs für links und rechts, die wir einfügen müssen, da dies im Wesentlichen ein zweispaltiges Formular ist. Außerdem ist jede Eingabe in ein Div verpackt, da wir einen Hook benötigen, um die erstellten Hintergrundbilder korrekt anzuwenden.

Hier ist die gesamte Markup

<div id="page-wrap">

	<form method="post" action="contactengine.php" id="commentForm">
		<fieldset>

		<div id="formLeft">
			<label for="Name">Name:</label>
			<div class="input-bg">
				<input type="text" id="Name" name="Name" class="required" minlength="2" />
			</div>
			
			<label for="City">City:</label>
			<div class="input-bg">
				<input type="text" id="City" name="City" class="required" minlength="2" />
			</div>
			
			<label for="Email">Email:</label>
			<div class="input-bg">
				<input type="text" id="Email" name="Email" class="required email" />
			</div>
		</div>
		
		<div id="formRight">
			<label for="Message">Message:</label></td>
			<div class="message-bg">
				<textarea name="Message" id="Message" rows="20" cols="20" class="required"></textarea>
			</div>
			<br />
			<input type="image" src="images/send-button.jpg" name="submit" value="Submit" class="submit-button" />
		</div>

		<div class="clear"></div>

		</fieldset>
	</form>

</div>

 

3. Styling mit CSS

Ich werde nicht jedes Attribut erklären, da ich denke, dass vieles davon ziemlich einfach und selbsterklärend ist. Zuerst zeige ich den Code, dann erkläre ich einige der Highlights/weniger offensichtlichen Dinge unten.

* { margin: 0; padding: 0; }
body { font-size: 62.5%; font-family: Georgia, serif; background: url(images/page-bg.jpg); }
.clear { clear: both; }
fieldset { border: none; }

#page-wrap {
	width: 800px;
	margin: 0 auto;
	background: url(images/form-bg.jpg) top center no-repeat;
	min-height: 600px;
}
form {
	padding: 83px 0 0 76px;
}
h1 {
	text-align: center;
	padding-top: 200px;
}
#formLeft {
	width: 320px;
	float: left;
	}
	#formLeft input {
		width: 250px;
		margin: 0 0 20px 0;
		border: none;
		text-align: center;
		background: none;
		margin: 13px 0 0 8px;
		font-size: 1.4em;
	}
	#formLeft .input-bg {
		background: url(images/form-sm-bg.jpg) bottom left no-repeat transparent;
		height: 45px;
		margin-bottom: 10px;
		position: relative;
	}
	#formLeft .active {
		background: url(images/form-sm-bg.jpg) top left no-repeat transparent;
	}
#formRight {
	width: 360px;
	float: right;
	padding-right: 44px;
	}
	#formRight textarea {
		width: 298px;
		height: 209px;
		display: block;
		border: none;
		background: none;
		margin: 0 0 0 20px;
		padding: 13px 0 13px 0;
		font-family: Helvetica, sans-serif;
		font-size: 1.3em;
	}
	#formRight .message-bg {
		background: url(images/message-bg.jpg) bottom left no-repeat transparent;
		height: 238px;
	}
	#formRight .active {
		background: url(images/message-bg.jpg) top left no-repeat transparent;
	}
label {
	display: block;
	font-size: 1.3em;
	text-indent: 10px;
	font-weight: bold;
}
label.error {
	position: absolute;
	top: -16px;
	right: 49px;
	padding: 3px;
	color: #da3939;
	font-size: 1.0em;
	text-align: right;
	font-style: italic;
	font-weight: normal;
}
input.submit-button {
	float: right;
	padding-right: 31px;
}

Beachten Sie, dass ich den * Selektor verwende, auch wenn ich Formulare verwende. Der * Selektor und Formulare vertragen sich nur dann nicht, wenn Sie border: none; dort anwenden, was das Standard-Styling für Submit-Buttons und ähnliches ruiniert. Wir werden ohnehin schon einen guten Job machen, das Standard-Styling zu ruinieren, also sei es so =)

Erinnern Sie sich an die Hooks, die wir zum Umwickeln der Eingaben verwendet haben? Wir wenden das Hintergrundbild auf diese Hooks an und nicht auf die Eingabe selbst. Eingaben mögen keine Hintergrundbilder. Wir haben auch eine "active"-Klasse für die Eingaben erstellt, bei der das Hintergrundbild von unten links nach oben links verschoben wird. Das Anwenden und Entfernen dieser Klasse ist das, was unsere aktuelle Feldhervorhebung erzeugt, die wir später behandeln werden.

Jeder dieser zusätzlichen Hooks hat auch eine relative Positionierung. Das liegt an der "Fehler"-Meldung, die während der Formularvalidierung dynamisch zur Seite hinzugefügt wird. Um diese Meldungen korrekt zu positionieren, werden sie absolut innerhalb dieser relativ positionierten Elternteile positioniert.

Eine Sache, die wir hier **nicht** getan haben, ist das Anwenden eines Hintergrundbildes auf den Submit-Button. Sie erzielen bessere Cross-Browser-Ergebnisse, indem Sie Ihren Submit-Button vom Typ="image" machen und ihm ein src-Bild geben, anstatt vom Typ="submit" und ein Hintergrundbild anzuwenden.

 

4. Aktuelle Feldhervorhebung mit jQuery

Teilweise für gute Benutzerfreundlichkeit und teilweise für gute Ästhetik implementieren wir die Hervorhebung des aktuellen Feldes. Deshalb haben wir diese Formular-Hintergrundbilder mit zwei verschiedenen Farben erstellt. CSS bietet einige Unterstützung dafür mit seiner :focus Pseudo-Klasse, aber das hilft uns aus zwei Gründen nicht. Erstens funktioniert es nur bei Formularelementen, und wir müssen das Styling des übergeordneten Elements des Formularelements ändern, was mit CSS nicht möglich ist. Zweitens ist die :focus-Klasse nicht weit verbreitet.

Wir werden jQuery dafür verwenden, da es alle Ereignistypen unterstützt, die wir benötigen: hover, focus und blur. Der gewünschte Effekt ist, dass beim Überfahren mit der Maus eines dieser Formularelemente das Hintergrundbild des übergeordneten Elements zu unserer alternativen Version wechselt, die anzeigt, dass es sich um das aktuelle Feld handelt.

Da wir zwei verschiedene Arten von Elementen haben, für die wir dies tun möchten, müssen wir zwei separate, aber sehr ähnliche jQuery-Schnipsel schreiben.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$("#formLeft .input-bg").hover(function() {
		$(this).addClass("active");
	}, function() {
		$(this).removeClass("active");
	});
	
	$("#formLeft input").focus(function() {
		$(this).parent().addClass("active");
	});
	$("#formLeft input").blur(function() {
		$("#formLeft .input-bg").removeClass("active");
	});
	
	$("#formRight .message-bg").hover(function() {
		$(this).addClass("active");
	}, function() {
		$(this).removeClass("active");
	});
	
	$("#formRight textarea").focus(function() {
		$(this).parent().addClass("active");
	});
	$("#formRight textarea").blur(function() {
		$("#formRight .message-bg").removeClass("active");
	});
});
</script>

Das sieht wahrscheinlich komplizierter aus, als es ist... all dies tut, ist das Hinzufügen und Entfernen der Klasse "active" von den entsprechenden Elementen, wenn verschiedene Ereignisse auftreten. Dies bewirkt, dass die aktuelle Feldhervorhebung beim Überfahren mit der Maus sowie beim Tab-Wechsel zu den Eingabefeldern funktioniert.

Mehr über aktuelle Feldhervorhebung hier.

 

5. Validierung des Formulars

Formularvalidierung ist nützlich sowohl für die sendende als auch für die empfangende Partei eines Kontaktformulars. Für den Absender stellt sie sicher, dass er Dinge wie die Angabe einer gültigen E-Mail-Adresse getan hat. Die Chancen stehen gut, dass er, wenn er ein Kontaktformular benutzt, nichts dagegen hätte, zurück kontaktiert zu werden, daher ist dies eine Anstrengung, um sicherzustellen, dass dieses Feld korrekt ausgefüllt ist. Für den Empfänger ist die Formularvalidierung ein guter Anfang zum Schutz vor Spam. Außerdem stellt sie direkter sicher, dass alle Übermittlungen die als am wichtigsten deklarierten Informationen enthalten.

Da wir bereits das allmächtige jQuery verwenden, nutzen wir es, um unsere Formularvalidierung direkt auf der Client-Seite zu handhaben. Glücklicherweise gibt es dafür bereits ein tolles Plugin. Fügen Sie einfach das Skript auf Ihrer Seite ein (nach der Haupt-jQuery-Bibliothek natürlich) und fügen Sie Ihrem Formular Validierung hinzu, indem Sie es über seine ID referenzieren.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	...
	$("#commentForm").validate();
});
</script>

Dieses Plugin sucht nach spezifischen Klassennamen (und in einigen Fällen nach anderen Attributen) aus Ihren Eingaben, um seine Validierung durchzuführen. Zum Beispiel möchten wir, dass unser Feld "Name" ein Pflichtfeld ist und dass der Wert mindestens zwei Zeichen lang ist. Fügen Sie einfach zwei neue Attribute zu unserem Eingabeelement hinzu: class="required" und minlength="2".

<input type="text" name="Name" class="required" minlength="2" />

Für die E-Mail-Adressvalidierung fügen Sie einfach den Klassennamen wie folgt hinzu.

<input type="text" name="Email" class="required email" />

Für fortgeschrittenere und andere Arten von Validierungen, siehe die Dokumentation des Plugins.

 

6. Mit PHP zum Laufen bringen

Unsere Formularvalidierung verhindert, dass der Submit-Button die "action" unseres Formulars auslöst, wenn eines der Felder nicht besteht. Aber wenn alle Felder gültig sind, möchten wir, dass unser Formular tatsächlich **etwas tut**, richtig? Da dies ein Kontaktformular ist, soll ein E-Mail generiert und an eine angegebene E-Mail-Adresse gesendet werden.

In unserer Markup ist die "action" für unser Formular hier deklariert.

<form method="post" action="contactengine.php" id="commentForm">

Dies ruft die Datei "contactengine.php" auf und sendet ihr Variablen aus unserem Formular als POST-Variablen. Es ist dann unsere Aufgabe, diese Variablen zu erfassen, eine formatierte E-Mail daraus zu erstellen und die E-Mail zu versenden.

Hier ist, wie das gemacht wird. Dies ist der gesamte Inhalt der Datei contactengine.php.

<?php

// CHANGE THE THREE VARIABLES BELOW

$EmailFrom = "[email protected]";
$EmailTo = "[email protected]";
$Subject = "Contact Form Submission";

$Name = Trim(stripslashes($_POST['Name'])); 
$Tel = Trim(stripslashes($_POST['Tel'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Tel: ";
$Body .= $Tel;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page
// CHANGE THE URL BELOW TO YOUR "THANK YOU" PAGE
if ($success){
  print "<meta http-equiv="refresh" content="0;URL=contactthanks.html">";
}
else{
  print "<meta http-equiv="refresh" content="0;URL=error.html">";
}
?>

Das Herzstück ist die "mail"-Funktion, die tatsächlich den Versand der E-Mail übernimmt. Beachten Sie, dass wir sie aufrufen, während wir eine Variable ($success) setzen. Diese Variable gibt uns an, ob die Mail erfolgreich gesendet wurde oder nicht. Wenn TRUE, können wir zu unserer "Dankeschön"-Seite weiterleiten. Andernfalls sollten wir den Benutzer darüber informieren, dass etwas schief gelaufen ist und zu einer Fehlerseite weiterleiten.

 

Demo & Download

Da haben Sie es, Leute! Ein schön aussehendes und voll funktionsfähiges Formular.

Demo ansehen
(Versuchen Sie nicht, mich tatsächlich über dieses Formular zu kontaktieren. Wenn Sie mich kontaktieren müssen, verwenden Sie mein reguläres Kontaktformular).

BEISPIEL HERUNTERLADEN
(Enthält Photoshop-Datei)

 

Probleme…

Safari wendet gerne seinen leuchtend blauen Rand um alle Textfelder und Textareas an. Zum Zeitpunkt des Schreibens gibt es keine Möglichkeit, dagegen anzukämpfen. Dies beeinträchtigt die Benutzerfreundlichkeit des Formulars überhaupt nicht, es sieht nur mit diesem Design etwas seltsam aus.UPDATE: gaga wies unten darauf hin, dass das Setzen von outline: none auf diesen Formularelementen den Safari-Glowy-Blue-Rand eliminiert. Das wusste ich nicht, danke!

IE & Opera setzen gerne vertikale Scrollbalken auf Textareas, egal was passiert. Wieder keine große Sache, aber ich finde, es sieht ein wenig dumm aus, wenn sie nicht benötigt werden.

 

Was ist mit einem Captcha?

Wie Sie sicher wissen, hilft Validierung, aber eliminiert Spam-Formulare bei weitem nicht. Wenn Sie ein Formular erstellen, bei dem Sie der Meinung sind, dass es von Spam bedroht ist, sollten Sie die Hinzufügung eines Captchas in Erwägung ziehen. Ein Captcha ist eine dieser Sachen wie "Tippen Sie die Buchstaben, die Sie sehen:", und Sie erhalten eine kleine Grafik mit einigen Buchstaben, die von vielen Linien und ähnlichem verdeckt sind. Manchmal sehen Sie Captchas, die so einfach sind wie "Was ist 1+1?", denn selbst ein sehr, sehr einfaches Captcha ist sehr wirksam bei der Bekämpfung von zufälligem Formular-Spam.

Ich denke, das schönste frei verfügbare Captcha ist reCAPTCHA, das gut funktioniert, relativ einfach zu implementieren ist und beim Digitalisieren von Büchern hilft.

In einem alten Beitrag habe ich gezeigt, wie man reCAPTCHA in einem Kontaktformular verwendet, und es funktioniert immer noch. Wenn Sie also daran interessiert sind, reCAPTCHA zu diesem Kontaktformular hinzuzufügen, schauen Sie sich dieses Beispiel an.