- 95+ CSS Forms — Free Code + Demos
- Collection of 95+ CSS Forms. All items are 100% free and open-source. The list also includes interactive css forms, step by step, and simple.
- 1. Wavy Login Form
- 2. Pupassure Sign Up Form — Day 5 — 100 DAYS — 2020
- 3. Abstract Sign Up Form — Day 2 — 100 DAYS — 2020
- 4. Colorful Contact Form — Day 1 — 100 DAYS — 2020
- 5. Neomorphic Form
- 6. Less Annoying Form
- 7. Flexbox Responsive Form
- 8. Animated Login Form
- 15 beautiful CSS Forms
- #1 Bootstrap MultiStep Form
- #2 Panda Login
- #3 Snake highlight
- #4 Step by Step Form Interaction
- #5 Credit Card Form – VueJs
- #6 Multi Step Form with Progress Bar
- #7 Day 001 Login Form
- #8 Credit Card Payment Form
- #9 Interactive Form
- #10 Material Login Form
- #11 Login Form – Modal
- #12 Form Design
- #13 Basic hotel booking form
- #14 Interactive Sign Up Form
- #15 Login Form
- 85 Stylish CSS forms
95+ CSS Forms — Free Code + Demos
Collection of 95+ CSS Forms. All items are 100% free and open-source. The list also includes interactive css forms, step by step, and simple.
1. Wavy Login Form
2. Pupassure Sign Up Form — Day 5 — 100 DAYS — 2020
Day five down! I started this pen off fairly early in the day but I didn’t get to finish all of the functionality I wanted for it. I would have liked to add the other cards to it! Maybe tomorrow I’ll just finish this! Really love the colours! So far I think the 100 days of code is he.
3. Abstract Sign Up Form — Day 2 — 100 DAYS — 2020
Day 2 — 100 Days Technically it’s after midnight, but I started this pen at 11:40 so it counts! It was a long day! Today I just wanted to play with fun colours and another quick form. I am going to focus on forms for the first seven days and then move on to another topic. I think tomorr.
4. Colorful Contact Form — Day 1 — 100 DAYS — 2020
I wanted to play with color today and a form. This is a pretty fun result after about an hour and a half this morning. I was at work WAY too early and just dove into this quick sketch to warm up. This semester I am taken a class that helps flesh out our careers as software engineers. One.
5. Neomorphic Form
6. Less Annoying Form
7. Flexbox Responsive Form
8. Animated Login Form
This animated login form is built just with HTML and CSS. No SVG, no JavaScript, no GreenSock. The character smiles when the login form is correct. Read this dev.to post for more details and some catches (e.g. the show password functionality only works on Chrome and Webkit browsers).
15 beautiful CSS Forms
CSS Forms should not only serve their practical purpose, but can also look very nice on the side! A list of very descriptive forms can be found here!
On many websites and web applications you will encounter form fields. Sometimes they are just simple entries, like a search field or age query. But if you have a whole collection of these fields, they are called forms.
Everyone knows the very simple ones, but can it be a little more fancy? Yes? Great! Because I have made myself on the search and have (in my opinion) very beautiful, user-friendly but also not quite plain forms out and would like to present them to you here.
The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.
#1 Bootstrap MultiStep Form
Author: Petia;
Coded in: HTML, CSS (Bootstrap), JS (jQuery, Bootstrap, jQuery Ease);
#2 Panda Login
Author: Vineeth.TR;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#3 Snake highlight
See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.
Author: Mikael Ainalem;
Coded in: HTML, CSS, JS (anime.js);
#4 Step by Step Form Interaction
Author: balapa;
Coded in: HTML, CSS, JS (jQuery);
#5 Credit Card Form – VueJs
Author: Muhammed Erdem;
Coded in: HTML, CSS (SCSS), JS (Vue, Vue The Mask);
#6 Multi Step Form with Progress Bar
Author: Atakan Goktepe;
Coded in: HTML, CSS, JS (jQuery, jQuery Ease);
#7 Day 001 Login Form
Author: Mohan Khadka;
Coded in: HTML, CSS;
#8 Credit Card Payment Form
Author: Adam Quilan;
Coded in: HTML, CSS, JS (imask);
#9 Interactive Form
See the Pen Interactive Form by Emmanuel Pilande (@epilande) on CodePen.
Author: Emmanuel Pilande;
Coded in: HTML, CSS (SCSS);
#10 Material Login Form
Author: Andy Tran;
Coded in: HTML (Pug), CSS (SCSS), JS (jQuery);
#11 Login Form – Modal
Author: Andy Tran;
Coded in: HTML (Pug), CSS (SCSS), JS (jQuery);
#12 Form Design
See the Pen Form Design by Timurtek Bizel (@Timurtek) on CodePen.
Author: Timurtek Bizel;
Coded in: HTML, CSS, JS (jQuery);
#13 Basic hotel booking form
Author: Andi Dysart;
Coded in: HTML, CSS (SCSS), JS (jQuery, jQuery UI Autocomplete);
#14 Interactive Sign Up Form
See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.
Author: Riccardo Pasianotto;
Coded in: HTML (Pug), CSS (SCSS), JS (jQuery);
#15 Login Form
See the Pen Login Form 1 by Felix De Montis (@dervondenbergen) on CodePen.
Author: Felix De Montis;
Coded in: HTML, CSS;
Which form did you like the most? If you also published an awesome Form on Codepen, feel free to let me know so I can expand this list! 🙂
Note: All forms are all published on codepen.io and not by me.
Not enough yet? Then this could be something for you:
85 Stylish CSS forms
Here is a collection of some of the most stylish CSS forms made with just HTML and CSS.
You may also like
- CSS Contact Forms
- 75 CSS Text Animations You Can Use
- 15 Amazing CSS Animated Background for you to try
- 57 Beautiful CSS Cards examples to improve your UI
- 19 Cool CSS Loading Animation to inspire you
- 17 Fancy CSS Search Boxes
- 21 Modern CSS menu examples
- 23 Fantastic CSS Hover Effects
- 19 CSS Border Animations you can implement
- 15 Stylised CSS Tables
- 13 Pure CSS Dropdown Menus
- 15 Creative CSS Filter Examples
- 35 Unique CSS Text Effects
- 15 CSS Sliders you can use
- 21 New Bootstrap Login Forms for you
- 19 Bootstrap Profiles you can use for yourself
- 13 Material Design Login Forms
- 35 Cool CSS Select Boxes
- 15 CSS Range Sliders you can use today
- 35 Creative use of CSS clip-path examples
- 29 Unique CSS Toggle Switches
- 41 Beautiful CSS Animation Examples
Animated Login Form
Dev: Alvaro Montoro
Animated Login Form
Dev: Alex Cornejo
Simple Login Form Animated
Dev: Himanshu C
Animated-Login-Form
See the Pen Animated-Login-Form by Swarup Kumar Kuila (@uiswarup) on CodePen.
Dev: Swarup Kumar Kuila
Animated Login Form
Dev: Stack Findover
Animated Login Form
Dev: Torben Colding
Neumorphic form
Dev: Pratham
Neumorphic form
Dev: Philip Lahner
Simple Sign In Form
Dev: John Bowie
Minimal Sign-In Form With Bulma.io
Dev: Paul Barker
Login Screen Animation
Dev: Johan Fagerbeg
Placeholders
Dev: Mikael Ainalem
See the Pen Subscribe by Omar Dsooky (@linux) on CodePen.
Dev: Omar Dsooky
Day 001 Login Form
Dev: Mohan Khadka
See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.
Dev: Tyler Fry
Card component with floating labels
Dev: Håvard Brynjulfsen
Login form. Svg animation
Dev: @BrawadaCom
Abstract Sign Up Form – Day 2 – 100 DAYS – 2020
Dev: Ricky Eckhardt
Login Form with floating placeholder and light button
Dev: Soufiane Khalfaoui HaSsani
Log In / Sign Up – Pure CSS
Dev: Ivan Grozdic
See the Pen Login by Marco Biedermann (@marcobiedermann) on CodePen.
Dev: Marco Biedermann
Animated Login Form
Dev: Munsif Mujtaba
Placeholders
See the Pen Placeholders by Mikael Ainalem (@ainalem) on CodePen.
Dev: Mikael Ainalem
Neumorphism Login Form
Dev: Ricardo Oliva Alonso
Dev: Mike Young
Login form using HTML5 and CSS3
Dev: Brad Bodine
Sleek Login Form
Dev: Tony Banik
CSS Newsletter with Animated Floating Input Labels
Dev: Bilal.Rizwaan
Newsletter Form Dribble to HTML
Red Newsletter Form
Dev: Sazzad
See the Pen form by Arefeh hatami (@arefeh_htmi) on CodePen.
Dev: Arefeh hatami
Pupassure Sign Up Form
Dev: Ricky Eckhardt
Less annoying form
See the Pen Less annoying form by Andy Fitzsimon (@andyfitz) on CodePen.
Dev: Andy Fitzsimon
Transparent Material Login Form
Dev: alphardex
POP ART Button
Dev: Ahmad Nasr
Login form UI Design
Dev: Chouaib Belagoun
Sign-Up/Login Form
Multi Step Form with Progress Bar using jQuery and CSS3
Dev: Atakan Goktepe
Credit Card Form
Dev: Muhammed Erdem
Snake highlight
See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.
Dev: Mikael Ainalem
Material Login Form
Dev: Andy Tran
Login Form – Modal
Dev: Andy Tran
Google Material Design Input Boxes
Dev: Chris Sev
Log in/Sign up screen animation
Dev: Josh Sorosky
Interactive Sign Up Form
See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.
Dev: Riccardo Pasianotto
Double slider Sign in/up Form
Dev: Florin Pop
Credit Card Payment Form
Dev: Adam Quinlan
Slide Sign In/Sign Up form
Dev: Danielkvist
Flat Login Form
Dev: Andy Tran
Material Design Login Form
Dev: Josh Adamous
Form fields with material design and video background, in pure CSS
Dev: Jon Uhlmann
RESPONSIVE MATERIAL DESIGN CONTACT FORM
Dev: Nikhil Krishnan
Material VCard
See the Pen Material VCard by Rian Ariona (@ariona) on CodePen.
Dev: Rian Ariona
Registration Form
Dev: afirulaf
Login/Registration Form Transition
Dev: Nikolay Talanov
Expanding Contact Form
Dev: Joe Harry
Responsive Signup/Login form
Dev: Mohamed Hasan
Interactive Form
See the Pen Interactive Form by Emmanuel Pilande (@epilande) on CodePen.
Dev: Emmanuel Pilande
Log in / Sign up
Dev: @BrawadaCom
Login/signup form animation
Dev: Shayan
Step by step register form
Dev: Jerome Renders
Elegant Login Form
See the Pen Elegant Login Form by Victor Hugo Matias (@reidark) on CodePen.
Dev: Victor Hugo Matias
MINIMALISTIC FORM
Dev: Matheus Marsiglio
Credit Card Checkout
Dev: Fabio Ottaviani
Form Design
See the Pen Form Design by Timurtek Bizel (@Timurtek) on CodePen.
Dev: Timurtek Bizel
One line Signup
Dev: Vineeth.TR
Animated Login Form
Spectre sign up form
Dev: Alex Devero
No Questions Asked Form & Magic Focus
Dev: Michal Niewitala
Obnoxious errors
Dev: Maria cheline
Flexbox Form
See the Pen Flexbox Form by Katherine Kato (@kathykato) on CodePen.
Dev: Katherine Kato
Invision login – dribbble remake
Dev: Mikael Ainalem
Emoji Form Validation
Dev: Marco Biedermann
Sign Up Form
Dev: Johnny Bui
CSS Snackables
Credit Card Payment Form
Dev: Jade Preis
Signup form UI
Dev: Tyler Johnson
Step by Step Form Interaction
Dev: balapa
Step By Step Form
Dev: DevTips
Step By Step Form
See the Pen Step by step form by Jonathan H (@Dunner) on CodePen.
Dev: Jonathan H
Single input 3D form
See the Pen Single input 3D form by Son Tran-Nguyen (@sntran) on CodePen.
Dev: Son Tran-Nguyen
Step by step form [KO]
See the Pen Step by step form [KO] by Thays Dos Santos Neves (@thayssn) on CodePen.
Dev: Thays Dos Santos Neves
Step by step form
See the Pen step by step form by Senhor Sulaiman (@zenu) on CodePen.
Dev: Senhor Sulaiman
Contact Form
See the Pen Contact Form by Aina Requena (she/her) (@ainarela) on CodePen.
Dev: Aina Requena