Dieses Tutorial zeigt alle nötigen Schritte, um ein cooles iframe Kontaktformular mit jQuery und einem jQuery-Plugin zu realisieren. Ähnlich einem Modal Dialog kann es mit Klick auf einen Feedback Button von jeder beliebigen Seite einer Homepage geöffnet werden; d.h., dass eine Seite nicht mehr verlassen werden muß, um Feedback zu geben oder Anfragen zu stellen.

Das jQuery iframe Kontaktformular

Schritt Eins – Download aller nötigen Dateien

Für das Kontaktformular benötigen wir wir das jQuery-Plugin Fancybox, was uns die Möglichkeit der iframe Einbindung geben wird. Direkter Downloadlink der Fanybox. Nun benötigen wir noch die neueste jQuery Version. Die muss allerdings nicht unbedingt gedownloadet werden, man kann sie auch direkt über den jQuery Server einbinden:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

Schritt Zwei – Hintergrundbild des Kontaktformulars erstellen

Wir legen in Photoshop eine neue Datei an und nennen sie kontakt_bg, die Größe legen wir mit 660 × 600px fest. Siehe Grafik:

Nun füllen wir die Datei mit einer Farbe nach Wahl, ich habe die #82684b genommen. Im nächsten Schritt wählen wir das Auswahlrechteck-Werkzeug und markieren einen Bereich im oberen Drittel als Bereich für den Titel des Formulars. Siehe Grafik:

Mit dem Füllwerkzeug füllen wir den soeben markierten Bereich mit einer Kontrastfarbe, ich habe die #4d3a24 gewählt. Am unteren Rand der “Titelzone” setzen wir mit dem Linienzeichner-Werkzeug noch eine 1px starke Linie in Schwarz (#000000).

Mit dem horizontalen Textwerkzeug beschriften wir nun unsere Grafik. Ich nutze hier für den Schriftzug Kontakt folgende Einstellungen:

Die Farbe für den Schriftzug Kontakt ist bei mir die #b26610 und ich habe als Effekt hier den Standard-Schlagschatten (über Stile zu erreichen) gewählt.

Nun sieht unsere Grafik bis jetzt so aus:

Selbstverständlich muss auch noch eine Kennzeichnung hinzugefügt werden, wie das Kontaktformular nach Gebrauch geschlossen werden kann. Hierfür habe ich die Calibri in 30pt Bold in Farbe #be6604 genommen. Effekte setze ich in diesem Fall keine. Wer mag, kann jetzt noch in den Contentbereich der Grafik einen kleinen Spruch setzen.

Als nächstes verpassen wir unserer Grafik noch schnieke runde Ecken, denn sie soll ja auch was hermachen. Über Bild – Arbeitsfläche erweitern wir die Arbeitsfläche um 10px.

Nachdem wir das gemacht haben, markieren wir unsere Ebene1, drücken die Taste Strg auf unserem Keyboard und klicken die Ebene 1 (den Hintergrund) an. Dieser wird somit markiert und wir können über Auswahl – Auswahl verändern – Abrunden nun einen Radius von 10 Pixeln eingeben.

Nun gehen wir erneut ins Menü und kehren die Auswahl um und drücken die Taste Entf auf dem Keyboard. Jetzt können wir über “Auswahl – Kante verbessern* noch etwas Feinschliff am Radius machen. Danach wieder bitte Auswahl umkehren und Entf drücken. Mit dem Freistellungswerkzeug schneiden wir nun die überflüssigen Ränder ab, so dass nur unsere schöne Background Grafik bleibt.

Über Datei – Für Web und Geräte speichern speichern wir unsere Hintergrundgrafik nun als PNG24 ab.

Schritt Drei – HTML Seite mit dem Kontaktformular erstellen

Da unser Kontaktformular die iframe Technologie nutzt, was nichts anderes heißt, dass eine externe Html Seite in ein über der Webseite liegendes Fenster geladen wird (praktisch eine Lightbox für ein Formular), muss nun eine spezielle Seite mit dem Formular erstellt werden. Dies kann eine externe statische HTML-Seite sein oder eine Seite im Content Management System. die dann aber nicht so aussehen darf, wie alle anderen Seiten im CMS. Im Download-Paket ist bereits eine fertige Seite namens kontakt.htm enthalten, wo der Aufbau der benötigten Seite sehr schön ersichtlich ist.

Die kontakt.htm Seite (oder wie auch immer Ihr sie nennen wollt) nutzt eine spezielle CSS Datei namens kontakt.css, die auf der Seite des Kontaktformulars eingebunden wird. Der Aufbau der Seite ist recht einfach:

Im Grunde genommen ist die Seite nichts weiter als eine weiße HTML-Seite mit dem zentrierten Formular incl. dem nötigen Code, um ein Kontaktformular darzustellen und funktionstüchtig zu machen. Tuts & Tipps wird ja von Textpattern angetrieben, also habe ich; um die Demo funktionstüchtig zu machen; eine neue Section erstellt, die als Seitenvorlage den obigen Quellcode mit den nötigen Txp-Tags des zem_contact_reborn Plugins nutzt. Dieses Plugin erstellt mir dann das reine Formular und macht es funktionstüchtig.

Schritt Vier – Button zum Aufrufen unseres Formulars erstellen

Wir öffnen Photoshop und erstellen eine neue Datei mit folgenden Einstellungen:

Im nächsten Schritt legen wir die Vordergrundfarbe auf Schwarz fest und die Hintergrundfarbe auf Weiß. Nun nutzen wir das Füllwerkzeug und füllen die Grafik mir der Vordergrungfarbe Schwarz. Jetzt wechseln wir zwischen Vorder und Hintergrundfarbe und setzen mit dem Horizontalen Textwerkzeug einen Feedback Schriftzug. Meine Einstellungen des Textwerkzeugs:

Die Schriftfarbe ist hier Weiß. Das Resultat bis jetzt:

Die Hintergrundfarbe legen wir jetzt wieder als Weiß fest. Mit der Maus nun einmal auf die Ebene 1 klicken (den Hintergrund)klicken und über Bild – Arbeitsfläche die Arbeitsfläche um jeweils 5px erweitern.

Als Ergebnis erhalten wir einen weißen Rand um unsere Button-Grafik. Abschliessend drehen wir das Bild gegen den Uhrzeigersinn.

Nun für Web und Geräte abspeichern als PNG24. Fertig!

Schritt Fünf – CSS für Button erstellen und nötige Änderungen am Fancybox.css

Das zur korrekten Darstellung des Buttons nötige CSS sieht so aus:

a#kontakt{
  position: absolute;
  top: 205px;
  left: 0;
  background: url(feedback_button.png) no-repeat;
  background-position: 90% 100%;
  width: 35px;
  height: 109px;
  border:1px solid #999;
  display: block;
  text-indent: -9999px; /* -- Image Replacement für den Kontaktlink --*/
  }
a#kontakt:hover{
  position: absolute;
  top: 205px;
  left: 0;
  width: 40px;
  height: 109px;
}

Änderungen am jquery.fancybox-1.3.0.css

Damit unser Formular korrekt dargestellt wird, muß eine Zeile des CSS (Zeile 83) in background: transparent; geändert werden:

Da wir unser Formular auch korrekt schliessen möchten müssen noch die Positions- und Größenangaben wie folgt geändert werden:

Der für die Darstellung des Feedback Buttons nötige HTML Code sieht übrigens so aus:

<a id="kontakt" href="http://deineseite.de/deinformular/" title="Bla, bla">Feedback></a>

Der nötige jQuery Code für den Aufruf des Formulars:

$(document).ready(function() {
     $("#kontakt").fancybox({
	      'width'			: 660,
	      'height'			: 600,
	      'transitionIn'	        : 'none',
	      'transitionOut'	        : 'none',
              'overlayShow'             :  false,
	      'type'			: 'iframe'
	 });
});

Ich habe diesen Codeteil der Einfachheit halber gleich mit in das *jquery.fancybox-1.3.0.pack.js* geschrieben und keine extra Datei dafür erstellt.

Abschliessende Arbeiten

Jede Seite einer Homepage, welche das Kontaktformular aufrufen können soll, muß erstens den Feedback Link enthalten (siehe obiger HTML Code) und zweitens muß im <head> Bereich das jquery.fancybox-1.3.0.css integriert sein (aus Performancegründen kann es jedoch auch in das Style.css der Webseite integriert werden, dann kann man sich diesen folgenden Schritt sparen).

<link rel="stylesheet" type="text/css" href="http://deineseite.de/jquery.fancybox-1.3.0.css" media="screen" />

Desweiteren muß das für die Box nötige JavaScript entweder im head Bereich, oder aber aus Performancegründen besser vor das schliessende body Element.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="http://deineseite.de/jquery.fancybox-1.3.0.pack.js"></script>

Auf der Demoseite kann das fertige Ergebnis nicht nur angeschaut, sondern auch ausprobiert werden. Das Kontaktformular spamt eine Freemail-Adresse voll. Im Download-Paket befinden sich alle nötigen Dateien incl. der PSD´s. Ich wünsche viel Spaß beim Kontaktformular entwerfen und nachbauen!

Bekannte Bugs

Der Internet Explorer zeigt die Hintergrundgrafik unseres Formulars leider nicht völlig korrekt an, dort wo die Ecken abgerundet sind, zeigt er sehr kleine weiße Ecken an. Falls wer einen Workaround anbieten kann, bitte in den Kommentaren posten.

Danke, dass Du diese Seite ausgedruckt hast! Bitte besuche uns gerne wieder, um weitere hilfreiche Artikel zu lesen.