- Top 71 CSS Forms
- SUBSCRIBE FORM
- SEARCH FORM
- LOGIN SCREEN
- LOGIN FORM UI DESIGN
- FLEXBOX FORM
- INVISION LOGIN
- ANIMATED SEARCH BOX
- LOGIN & SIGN UP FORM UI
- OBNOXIOUS ERRORS
- Search Field
- Payment Card Checkout
- Credit Card Flat Design
- Material Design Login Form
- Login Form – Modal
- Overlay Signup Form
- Sign Up
- UI Credit Card
- Fullscreen Search
- Search Bar Animation
- Search Bar
- Checkout Card
- Search
- Sign Up Form
- Credit Card Checkout
- Simple Mobile Search Input
- SVG Search…
- Credit Card Payment Form
- Sign Up Form UI
- Credit Card Payment
- Search Input Context Animation
- Form Sign Up UI
- Login & Sign Up Form Concept
- Credit Card Checkout
- Search UI
- Search Animation
- Credit Card Checkout
- Pull-Out Search Bar Concept
- Animating Search Box
- CSS Search Box
- Bouncy Search Box
- Credit Card Checkout
- Sign Up Form UI
- Sign Up Form UI
- Credit Card UI
- Search Transformation
- Log In Form
- Search Input Focus Animation
- Material Login Form
- Flat Login Form
- Sign Up Form UI
- Search Button Animation
- Search Input With Animation
- Fancy Forms
- Single Input 3D Form
- Form Design
- Animated Login Form
- Flat UI Login Form
- Step By Step Register Form
- Interactive Form
- Step By Step Form
- Step By Step Form
- Sign Up UI
- Sign Up UI
- Multi Step Form With Progress Bar Using jQuery And CSS3
- Interactive Form
- Step by Step Form Interaction
- Interactive Sign Up Form
- SIMPLE FORMS
- VALIDATION FORMS
- 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
Top 71 CSS Forms
Collection of free HTML and CSS form code examples: interactive, step by step, simple, validation, etc.
SUBSCRIBE FORM
Subscribe form with animated button in HTML and CSS. Made with HTML (Pug) / CSS (SCSS) by Ahmed Nasr.
SEARCH FORM
Search form with funny animation and clearing button. Made with HTML / CSS by Stas Melnikov.
LOGIN SCREEN
Trendy login screen user interface. Made with HTML/CSS/SCSS/JavaScript (jquery.js) by Chouaib Blg.
LOGIN FORM UI DESIGN
Login form UI design using HTML and Sass and jQuery. Made with HTML/CSS/SCSS/JavaScript (jquery.js) by Chouaib Blgn.
FLEXBOX FORM
A form made with flexbox . Made with HTML/CSS by Katherine Kato.
INVISION LOGIN
Sign in form UI. Made with HTML/CSS/JavaScript by Mikael Ainalem.
ANIMATED SEARCH BOX
Animated search box using HTML, CSS and jQuery. Made with HTML / CSS / JavaScript (jquery.js) by Chouaib Blg.
LOGIN & SIGN UP FORM UI
Micro interaction for sign up / sign in form. Made with HTML/CSS/SCSS/JavaScript (jquery.js) by Sasha.
OBNOXIOUS ERRORS
Form errors with obnoxious.css animation. Made with HTML/CSS/SCSS/JavaScript (jquery.js) by Maria Cheline.
Search Field
HTML and CSS search field. Made by Bahaà Addin Balashoni.
Payment Card Checkout
Payment card checkout in HTML, CSS and JavaScript. Made by Simone Bernabè.
Credit Card Flat Design
Pure CSS credit card flat design. Made by Jean Oliveira.
Material Design Login Form
Material design login form with HTML, CSS and JavaScritp. Made by celyes.
Login Form – Modal
This is a material inspired login modal with 2 panels. A login panel, and a registration panel which is hidden by default. The registration panel can be triggered by clicking the visible tab on the right side. Once clicked, the registration panel will slide in and overlap the login panel. Made by Andy Tran.
Overlay Signup Form
Overlay signup form with HTML, CSS and JavaScript. Made by Chris Deacy.
Sign Up
Sign up form UI with React.js. Made by Jack Oliver.
UI Credit Card
UI credit card with HTML, CSS and JavaScript. Made by Gil.
Fullscreen Search
This search input should work with any position/layout type, including normal pages with scroll. Just don’t override .s–cloned styles for .search and everything will be okay. Requires specific styles for containers (check html+body and .scroll-cont styles) and .search-overlay element to be placed in the root. Made by Nikolay Talanov.
Search Bar Animation
Search input with morphing effect. Made by Milan Milošev.
Search Bar
Search bar with HTML, CSS and JavaScript. Made by Adam Kuhn.
Checkout Card
Checkout card form with React.js. Made by Jack Oliver.
Search
Simple search playing around with animations and positions. Made by Aaron Taylor.
Sign Up Form
Sign up with HTML, CSS and JavaScript. Made by Tommaso Poletti.
Credit Card Checkout
Clean and simple credit card payment checkout form, with css3, html5, and little bit of jQuery, just to make slightly better UX. Made by Momcilo Popov.
Simple Mobile Search Input
This is an example of search input, that could be put in a mobile template for an e-commerce or wheather or much more. Made by Tommaso Poletti.
SVG Search…
SVG search icon that transitions to underline on focus. Made by Mark Thomes.
Credit Card Payment Form
Credit card payment form with HTML, CSS and JavaScript. Made by Jade Preis.
Sign Up Form UI
Login form to the Daily UI Challenge #001. Made by Maycon Luiz.
Credit Card Payment
Non functional UI credit cards payment. Coded for practice raw JS for DOM manipulation.
Made by Shehab Eltawel.
Search Input Context Animation
CSS icons, context animation, Telegram app-like search loading effect. Made by Riccardo Zanutta.
Form Sign Up UI
Form sign up UI with HTML, CSS and JavaScript. Made by Eddie Solar.
Login & Sign Up Form Concept
Sign in & sign up form concept, click on login and sign up to changue and view the effect. Made by Dany Santos.
Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript. Made by Fabio Ottaviani.
Search UI
Search concept with options. Made by Fabio Ottaviani.
Search Animation
Search animation with HTML, CSS and JavaScript. Made by Dmitriy.
Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript. Made by Pavel Laptev.
Pull-Out Search Bar Concept
HTML and CSS pull-out search bar concept. Made by Asna Farid.
Animating Search Box
An animating search box made with HTML & CSS. Made by Jarno van Rhijn.
CSS Search Box
It searches things, probably something similar been done before. Made by Jamie Coulter.
Bouncy Search Box
HTML, CSS and JavaScript bouncy search box. Made by Guillaume Schlipak.
Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript. Made by Marco Biedermann.
Sign Up Form UI
Sign up form with HTML, CSS and JavaScript. Made by Lewis Needham.
Sign Up Form UI
Daily challenge 001 from dailyui.co. Made by Tyler Johnson.
Credit Card UI
Credit card UI with HTML and CSS. Made by Star St.Germain.
Search Transformation
Interactive prototype of search form transformation. Made by Lucas Bourdallé.
Log In Form
Log in form with HTML, CSS and JavaScript. Made by Kamen Nedev.
Search Input Focus Animation
A simple animation for the focus event on a search input. Made by Nicols J Engler.
Material Login Form
Interactive material design login form. Made by Andy Tran.
Flat Login Form
Flat login form with HTML, CSS and JavaScript. Made by Andy Tran.
Sign Up Form UI
Sign Up Form UI with HTML and CSS. Made by Peter.
Search Button Animation
Search button animation with HTML, CSS and JavaScript. Made by Kristy Yeaton.
Search Input With Animation
Pure CSS Search input with animation. Made by Arlina Design.
Fancy Forms
Material design style form elements. Made by Adam.
Single Input 3D Form
Single input 3D form made by Son Tran-Nguyen.
Form Design
This is a great space saver when it comes to showing the input labels as a placeholder and when user focuses on the input area, it still enables user to enter their information and also placeholder/label is still available for user to see at any time. Made by Timurtek Bizel.
Animated Login Form
Experimenting with hidden login forms with animated reveals. This is the first of a few hopefully. Made by Che.
Flat UI Login Form
HTML, CSS and JavaScript flat UI login form. Made by Brad Bodine.
Step By Step Register Form
Step by step register form with HTML, CSS and JavaScript. Made by Jerome Renders.
Interactive Form
An interactive multi step form with HTML, CSS and JavaScript. Made by Rosa.
Step By Step Form
A take on the codrops version with the possibility to go back and confirm all inputs. Made by Jonathan H.
Step By Step Form
HTML, CSS and JavaScript step by step form. Made by DevTips.
Sign Up UI
A simple sign up concept. Made by Tobias.
Sign Up UI
Heavily GSAP’ed sign up form with validation handling for the daily ui challenge. Made by Antonin Cezard.
Multi Step Form With Progress Bar Using jQuery And CSS3
Got long forms on your website? Break them up into smaller logical sections and convert it into a multi-step form with a cool progress bar. Could work for lengthy processes like registration, checkout, profile fillups, 2-factor authentication logins, etc. Made by Atakan Goktepe.
Interactive Form
Interactive input form built with just CSS. Abusing focus state & labels to handle transitions & navigation. Navigate between inputs using Tab (Next) & Shift + Tab (Prev). Pure CSS. No JS included. Made by Emmanuel Pilande.
Step by Step Form Interaction
A simple step form for customer experience. Made by Bhakti Al Akbar.
Interactive Sign Up Form
A concept for an interactive signup form. Made by Riccardo Pasianotto.
SIMPLE FORMS
Made with HTML/Haml/CSS/Sass/JavaScript/CoffeeScript (jquery.js,jquery.customSelect.js) by Michal Niewitala.
VALIDATION FORMS
Emoji form validation in pure CSS. Made by Marco Biedermann.
- beautiful css forms
- bootstrap contact form
- contact form
- contact form html code generator
- contact form html css
- contact form html php
- css form styling examples
- css inline form fields
- feedback form in html and css source code
- form animation css
- form css
- form css templates
- free html contact form code
- free html form templates
- html contact form email
- html form design examples with code
- registration form design in html and css with code
- responsive form
- responsive form bootstrap
- responsive form css
- responsive form in html5
- responsive form template
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: