10 Codeschnipsel zum Erstellen ansprechender Formulare

Jede Website benötigt normalerweise irgendeine Art von Formular, sei es eine Checkout-Seite oder eine einfache Kontaktseite.

Es ist entscheidend sicherzustellen, dass Ihre Formulare funktionieren, daher ist Benutzerfreundlichkeit die Nummer 1. Aber auch die Ästhetik ist wichtig, da vertrauenswürdige Designs immer ansprechender sind.

Wenn Sie keine Designideen mehr haben, könnte diese Sammlung hilfreich sein. Es ist eine Sammlung von 10 Formularentwürfen mit freiem Quellcode. Sie finden viele verschiedene Farbschemata, Eingabefeldstile, typografische Stile und vieles mehr.

Außerdem werden diese alle kostenlos gehostet, sodass Sie mit dem Code nach Ihren Wünschen kopieren und herumspielen können.

1. Materialdesign

Jeder kennt die Material-Design-Sprache von Google, die in den letzten Jahren berühmt geworden ist. Materialdesign-Konzepte waren auf Android-Apps ausgerichtet, verbreiteten sich aber schnell im Internet.

Wenn Ihnen der minimalistische Stil der materiellen Benutzeroberfläche von Google gefällt, sehen Sie sich diese von Jon Uhlmann erstellte materielle Form an.

Es läuft auf Sass und Pug für die CSS/HTML-Vorverarbeitung. Es ist auch eine ziemlich leichte Form und die Materialdesign-Elemente sollten in allen Browsern gleich gerendert werden.

Wirklich eine Inspiration für alle Materialdesigner da draußen.

2. Unter dem Meer

Machen Sie einen Ausflug ins Meer in diesem sehr einzigartigen Kontaktformular im aquatischen Stil.

Der gesamte Seitenhintergrund verwendet ein sich wiederholendes Muster, um die Wellen des Ozeanwassers zu erzeugen. Aber die kleinen animierten Fische sind eine ganz andere Geschichte, die von einem Hintergrundbild aus animiert werden.

Außerdem erscheint jedes Mal, wenn Sie ein Eingabefeld auswählen, ein freundlicher Oktopus zur Begrüßung. Wie urig!

3. Bootstrap-3-Formular

Die Standard-Bootstrap-Stile sind ziemlich langweilig und haben sich an dieser Stelle wirklich zu Tode gewöhnt. Immer wenn ich eine Bootstrap-Site mit den gleichen generischen Stilen sehe, kann ich mir nur vorstellen, dass der Designer zu faul war, um Anpassungen vorzunehmen, oder sich zu sehr auf die Erfahrung konzentrierte, um sich darum zu kümmern.

Dieses BS3-Formular macht die Dinge richtig, indem es auf dem Bootstrap-Framework aufbaut. Es verwendet ein paar Neugestaltungen in den Eingabefeldern und der Schaltfläche „Senden“, um ein liebenswertes Bootstrap-Formular zu erstellen, von dem Sie nie wissen würden, dass es Bootstrap ist.

Wenn Sie ein BS3-Layout betreiben, sollten Sie Ihre Formulare auf jeden Fall so überarbeiten. Sie können auch versuchen, ein Drittanbieter-Framework zu verwenden, das auf Bootstrap basiert, um ein individuelleres Design zu erhalten.

4. Eleganter Kontakt

Mit Font Awesome-Symbolen und einem einfachen responsiven Design ist dieses Kontaktformular wirklich einzigartig.

Ich empfehle immer, Symbole in Formulare einzufügen, besonders bei größeren Designs. Mit mehr Feldern bekommen Sie mehr Zögern und Benutzer wollen nur noch ohne Probleme durch Formulare fliegen.

Diese einfachen Symbole fügen jedem Feld einen Hinweis hinzu, sodass Sie auf einen Blick erkennen können, welche Art von Informationen erforderlich sind.

Und wenn Sie auf der Suche nach etwas Einzigartigem sind, versuchen Sie es mit einem anderen Iconfont in der Mischung.

5. Winzige Anmeldung

Manchmal sind die kleinen Dinge wirklich die besten Dinge. Und diese Formular-Benutzeroberfläche beweist es, indem sie ein super verkleinertes Anmeldeformular erstellt, das einfach rockt.

Typografie spielt beim Formulardesign eine große Rolle, und ich bevorzuge oft kleinere Schriftarten in Anmeldefeldern. Es hängt wirklich von der Website ab und davon, wie gut sich kleinerer Text in das Layout einfügt.

Aber dieses Formular hat auch eine kleine Fortschrittsgrafik, die an der Seite hängt und den Formularprozess erklärt. Zugegeben, mit nur zwei Feldern erscheint dies etwas albern, aber für größere Registrierungsformulare wird sich dieser Fortschrittsbalken für die Benutzererfahrung als unschätzbar erweisen.

6. Anmelde- und Registrierungskombination

Wenn Sie die Anmeldezeiten verkürzen möchten, können Sie versuchen, das Anmeldeformular und das Registrierungsformular auf einer einzigen Seite zu kombinieren. Es ist viel einfacher, als Sie vielleicht denken, und Sie können eine süße Demo in diesem PE sehen.

Immer wenn Sie auf die Anmelde-/Registrierungslinks an der Seite klicken, finden Sie eine schöne benutzerdefinierte Animation, die die Formulare in die Ansicht dreht. Es wird alles über jQuery betrieben, aber die Animationen könnten auch über CSS funktionieren.

Aber ich bemerke einen Fehler in diesem Layout, bei dem der untere Teil des „versteckten“ Formulars nach dem Umschalten immer noch sichtbar ist. Sie können dies mit der CSS- Sichtbarkeitseigenschaft lösen oder indem Sie die Position etwas weiter außerhalb der Grenzen verschieben.

7. Tafelkontakt

Hier ist ein wirklich einzigartiger Formularstil, der definitiv von der Seite springt. Dieses Tafel-Kontaktformular verwendet einen Hintergrundverlauf, um den Effekt von Licht zu erzeugen, das von der Tafel reflektiert wird.

Außerdem hilft die Holzgrenze, dieses Ding als echtes Geschäft zu verkaufen.

Der Schöpfer Greg Sweet verwendet sogar eine benutzerdefinierte Webschriftart, die wie eine typische menschliche Handschrift aussieht. Dies ist perfekt, um dem Formular den letzten Schliff zu verleihen, damit es sich wirklich so anfühlt, als wären Sie wieder in der Schule.

8. Kreditkartenzahlung

Ich habe viele Kassenformulare gesehen, aber dieses Design von Fabio Ottaviani ist vielleicht das Beste, über das ich je gestolpert bin.

Es verwendet JavaScript, um die Eingabefeldvalidierung zu handhaben, aber die Kreditkarte ist komplett CSS. Es wird basierend auf den Zahlen, die Sie in das Formular eingeben, animiert und dreht sich sogar nach hinten, wenn Sie die CVV-Nummer der Kreditkarte eingeben.

9. Benutzerdefinierte Anmeldung

Für ein reines CSS-Anmeldeformular ist dieses Snippet wirklich der Hammer. Es fühlt sich ziemlich einfach an, in einem einzigen Container mit einem kleinen Schlagschatten zu ruhen.

Aber die Eingabefelder sind stark angepasst, einschließlich des Platzes, der zum Hinzufügen dieser Symbole erforderlich ist.

Immer wenn Sie ein Feld markieren, leuchtet der Rand moosgrün auf. Sie werden feststellen, dass das Symbol auch die Farbe ändert! Sogar die ausgewählten Menüs für die Kreditkarten haben ihre eigenen benutzerdefinierten Stile.

Dies ist ein ziemlich komplexer Effekt, der rein in CSS zu erstellen ist, aber Entwickler Jose Carneiro hat es möglich gemacht.

10. Schwebende Etiketten

Benutzerdefinierte Floating-Etiketten gehören zu meinen Lieblingstrends im Formulardesign. Sie tragen immer zur Verbesserung der Benutzerfreundlichkeit bei und geben eine klare Erklärung des Felds, selbst nachdem Sie es ausgefüllt haben.

Werfen Sie einen Blick auf dieses Floating-Label-Formular, das auf CSS3 und Compass läuft.

Der Schöpfer Anton Simanov verwendet jQuery für die Labels, aber es ist alles ohne Plugins benutzerdefiniert codiert. Ganz zu schweigen davon, dass seine Lösung für alle typischen Eingabestile funktioniert, einschließlich Textfeldern und ausgewählten Menüs.

Ganz gleich, für welchen Formstil Sie sich entscheiden, ich hoffe, dass diese Galerie Ihnen einige Ideen und Ausschnitte geben kann, um voranzukommen.

Je mehr Sie sich mit Entwurfsmustern befassen, desto mehr Ideen müssen Sie für Ihre eigenen Projekte verwenden. Und CodePen ist eine großartige Seite, um diese Ideen zu sammeln.