CSS Formulare sollten nicht nur ihren praktischen Zweck erfüllen, sondern können ganz neben bei auch noch sehr schön aussehen! Eine Liste von sehr anschaulichen Formularen gibt es hier!
Auf vielen Websites und Webanwendungen begegnest du Formularfeldern. Manchmal sind es nur einfache Eingaben, wie ein Suchfeld oder Altersabfrage. Hat man aber einen ganzen Zusammenschluss von diesen Felder spricht man von Formularen.
Die ganz schlichten kennt jeder, aber darf es auch etwas ausgefallener sein? Ja? Super! Denn ich habe mich auf die Suche gemacht und habe (meiner Meinung nach) sehr schöne, nutzerfreundliche aber auch nicht ganz schlichte Formulare rausgesucht und möchte sie dir hier gern vorstellen.
Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.
See the Pen
Bootstrap MultiStep Form by Petia (@designify-me)
on CodePen.
Progrmmiert in
HTML, CSS (Bootstrap), JS (jQuery, Bootstrap, jQuery Ease)
See the Pen
Panda Login by Vineeth.TR (@vineethtrv)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
See the Pen
Snake highlight by Mikael Ainalem (@ainalem)
on CodePen.
Progrmmiert in
HTML, CSS, JS (anime.js)
See the Pen
Step by Step Form Interaction by balapa (@balapa)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery)
See the Pen
Credit Card Form – VueJs by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (Vue, Vue The Mask)
See the Pen
Multi Step Form with Progress Bar using jQuery and CSS3 by Atakan Goktepe (@atakan)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery, jQuery Ease)
See the Pen
Day 001 Login Form by Mohan Khadka (@khadkamhn)
on CodePen.
See the Pen
Credit Card Payment Form by Adam Quinlan (@quinlo)
on CodePen.
Progrmmiert in
HTML, CSS, JS (imask)
See the Pen
Interactive Form by Emmanuel Pilande (@epilande)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
See the Pen
Material Login Form by Andy Tran (@andytran)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (SCSS), JS (jQuery)
See the Pen
Login Form – Modal by Andy Tran (@andytran)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (SCSS), JS (jQuery)
See the Pen
Form Design by Timurtek Bizel (@Timurtek)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery)
See the Pen
Basic hotel booking form by Andi Dysart (@andiio)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery, jQuery UI Autocomplete)
See the Pen
Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (SCSS), JS (jQuery)
See the Pen
Login Form 1 by Felix De Montis (@dervondenbergen)
on CodePen.
See the Pen
MINIMALISTIC FORM by Matheus Marsiglio (@matmarsiglio)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Sass), JS
See the Pen
React signup form example by Mikhail Proniushkin (@mikepro4)
on CodePen.
See the Pen
3D login form concept by Jenning (@jenning)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Sass), JS (jQuery)
See the Pen
Unfolding Login Form by Hans Engebretsen (@hans)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
See the Pen
Log In Form CSS 2017 by Omar Dsooky (@linux)
on CodePen.
#21 Log in / Sign up
See the Pen
Log in / Sign up by @BrawadaCom (@Anna_Batura)
on CodePen.
Progrmmiert in
HTML (Slim), CSS (Sass), JS (jQuery)
See the Pen
Login Form with floating placeholder and light button by Soufiane Khalfaoui HaSsani (@soufiane-khalfaoui-hassani)
on CodePen.
See the Pen
Weekly Coding Challenge #1 – Double slider Sign in/up Form – Desktop Only by Florin Pop (@FlorinPop17)
on CodePen.
Progrmmiert in
HTML, CSS, JS
#24 Login
See the Pen
Login by Marco Biedermann (@marcobiedermann)
on CodePen.
Progrmmiert in
HTML, CSS (PostCSS)
#25 Log In/Sign Up – pure css
See the Pen
Log In / Sign Up – pure css – #12 by Ivan Grozdic (@ig_design)
on CodePen.
See the Pen
Slide Sign In/Sign Up form by Daniel (@danielarlert)
on CodePen.
Progrmmiert in
HTML, CSS, JS
See the Pen
Form Switch Animation (2023) by Nikolay Talanov (@suez)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (TypeScript)
See the Pen
Flat Login Form 3.0 by Andy Tran (@andytran)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
See the Pen
Responsive Signup/Login form by Mohamed Hasan (@Mhmdhasan)
on CodePen.
Progrmmiert in
HTML, CSS (Sass), Bootstrap, JS (jQuery)
#30 Material Bootstrap Wizard
See the Pen
Material Bootstrap Wizard by Creative Tim (@creativetim)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery)
See the Pen
Login, Register form by Vikas Verma (@vikasverma93)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery)
See the Pen
login/signup form animation by Shayan (@shayanea)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
See the Pen
Step by step register form by Jerome Renders (@JeromeRenders)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Sass), JS
Welches Formular hat dir am besten gefallen? Wenn du auch ein geniales Formular auf Codepen veröffentlicht hast, lass es mich gerne wissen, damit ich diese Liste erweitern kann! 🙂
Hinweis: Alle Formulare sind alle auf codepen.io veröffentlicht und nicht von mir.
Noch nicht genug? Dann könnte das etwas für Dich sein: