Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 7. Juli 2015

CSS Contact Form: Schicke Kontaktformulare sehr einfach

Die Gestaltung benutzerfreundlicher und ansprechender Formulare ist nicht immer einfach. Pflichtfelder sollten gut erkennbar und Fehlermeldungen auffällig sein. Dazu kommt, dass Felder wie Radio-Buttons und Checkboxen nur auf Umwegen mit gänzlich eigenem Aussehen versehen werden können. Wie man Kontaktformulare raffiniert, übersichtlich und sehr individuell gestalten kann, zeigt das CSS Contact Form von CodyHouse.

Anzeige

csscontactform-teaser_DE

Formular mit dezenten Animationen und SVG-Icons

Das Design des Kontaktformulars besticht durch große Eingabefelder, die gerade auf mobilen Geräten ein einfaches Auswählen und Ausfüllen ermöglichen. Nichts erinnert bei diesem Formular an das Standardaussehen von HTML-Formularen. Auch die Radio-Buttons und Checkboxen sind individuell gestaltet. Der Klick auf einen Button wird zudem durch eine dezente Animation quittiert.

Die <label>-Elemente der Eingabefelder werden wie Platzhalter innerhalb des jeweiligen Eingabefeldes positioniert.

Sobald man anfängt, ein Eingabefeld mit Inhalt zu füllen, wandert der jeweilige Label-Text per Animation aus dem Eingabefeld und wird darüber dargestellt. Diese Art von Labels wird als Floating Labels bezeichnet. Über einen Klassennamen lassen sich Formulare mit und ohne diese Floating Labels auszeichnen.

<form class="cd-form floating-labels">
  …
</form>

Das Beispiel zeigt, wie das <form>-Element ausgezeichnet sein muss. Die Klasse cd-form ist obligativ, floating-labels ist optional. Ohne die zweite Bezeichnung werden die Labels einfach oberhalb des jeweiligen Eingabefeldes platziert.

css-contact-formular-beispiel


Demo-Formular

Außerdem sind die exemplarischen Eingabefelder mit jeweils einem passenden Icon im SVG-Format versehen. So sind Eingaben für E-Mail-Adresse, Name und Unternehmen auch ohne Textbezeichnung erkennbar. Die verwendeten Icons stammen aus der Nuclo-Bibliothek, einem Satz kostenpflichtiger Icons. Diese lassen sich aber auch einfach gegen andere Icons austauschen.

Einfache HTML-Auszeichnung, anpassbare Stylesheets

Die HTML-Auszeichnung des Formulars ist einfach. Neben den verschiedenen Eingabe-Elementen – <input>, <textarea> und <select> – stellt CSS Contact Form auch für die Elemente <label>, <fieldset> und <legend> entsprechende CSS-Eigenschaften zur Verfügung. Über Klassennamen werden die Elemente im Stile des Frameworks dargestellt.

Dabei entscheidet man beispielsweise, ob man Formular-Elemente mit oder ohne Icon darstellen möchte.

<div class="icon">
  <label class="cd-label" for="cd-name">Name</label>
  <input class="user" type="text" name="cd-name" id="cd-name" required>
</div>

Das Beispiel zeigt ein Eingabe-Element samt Label. Anhand der Klassen wird das Aussehen per CSS gesteuert. Elemente, die das required-Attribut besitzen, werden per CSS so dargestellt, dass in der rechten oberen Ecke per Hintergrundgrafik ein roter Punkt dargestellt wird.

Die Stylesheet-Datei, die mitgeliefert wird, ist in drei Bereiche unterteilt. Im ersten Bereich ist das Grundlayout festgelegt – also Farben, Abstände, Schriften, Aussehen für Pflichtfelder sowie für fehlerhaft ausgefüllte Felder. Im zweiten Bereich sind die Icons definiert. Hier werden SVG-Grafiken jeweils als Hintergrundgrafik verwendet und positioniert.

Der letzte Bereich ist zuständig für die Floating Labels. Dort sind also die Animationen für die Labels hinterlegt, die beim Ausfüllen eines Eingabefeldes aus dem Feld hinaus bewegt und darüber platziert werden.

css-contact-formular-beispiel-floating


Floating Labels: Label wandert bei der Eingabe aus dem Feld und wird in kleinerer Schriftgröße darüber platziert

jQuery und Modernizr zur Unterstützung

Für die Floating Labels ist etwas JavaScript notwendig. Eine kleine Funktion sorgt dafür, dass diese bei der Eingabe von Text ausgelöst werden. Da diese Funktion jQuery voraussetzt, muss die Bibliothek ebenfalls eingebunden werden.

Im Download-Paket, das alle notwendigen CSS- und JavaScript-Dateien beinhaltet, ist auch Modernizr vorhanden. Zusammen mit einer exemplarischen HTML-Datei mit Demo-Formular hat man ein erstes Formular, das man prima als Ausgangsbasis für ein eigenes Formular nutzen kann.

Neben einer einfachen Stylesheet-Datei ist auch eine SASS-Datei im Paket enthalten. Wer CSS also lieber per SASS auszeichnet, findet im Paket eine entsprechende Datei zur Bearbeitung.

Fazit

Das CSS Contact Form von CodyHouse stellt eine gute Basis für eigene schicke und zeitgemäße Formulare bereit. Die HTML- und CSS-Auszeichnung ist übersichtlich und gut kommentiert. JavaScript wird sehr zurückhaltend eingesetzt. Das Formular sieht gut aus, ist aber dennoch einfach gehalten. So kann man es mit einigen Anpassungen gut in eigene Projekte übernehmen.

CodyHouse erlaubt die Verwendung der Quelldateien für eigene Projekte – auch für kommerzielle. Allerdings ist es nicht erlaubt, den Quelltext anderweitig zu vertreiben – auch nicht in veränderter Form.

Die per CSS Contact Form ausgezeichneten Formulare laufen in allen modernen Browsern, einschließlich Internet Explorer ab Version 9.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.