80 CSS Forms
May 25, 2020 Collection of free HTML and CSS form code examples: interactive, step by step, simple, validation, etc. Update of April 2019 collection. 11 new items.
Login form with floating placeholder and light button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Author Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Author Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Author Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About a code Neomorphic Form Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: ionicons.css
AuthorCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
AuthorCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
AuthorThis 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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
AuthorCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
About a code Responsive Contact FormOnly SCSS/CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Author Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
AuthorSubscribe form with animated button in HTML and CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
AuthorSearch form with funny animation and clearing button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Author Trendy login screen user interface.
Author Login form UI design using HTML and Sass and jQuery.
Author A form made with flexbox.
Author Sign in form UI.
Author Animated search box using HTML, CSS and jQuery.
Made with Micro interaction for sign up / sign in form.
Author Form errors with obnoxious.css animation.
Demo Image: Search Field
HTML and CSS search field.Made by Bahaà Addin BalashoniJuly 9, 2017
Demo Image: Payment Card Checkout
Payment card checkout in HTML, CSS and JavaScript.Made by Simone BernabèJuly 8, 2017
Author Recreation of no questions asked form with magic focus.
Demo GIF: Emoji Form Validation
Emoji form validation in pure CSS.Made by Marco BiedermannJune 6, 2017
Demo Image: Credit Card Flat Design
Pure CSS credit card flat design.Made by Jean OliveiraMay 18, 2017
Demo Image: Material Design Login Form
Material design login form with HTML, CSS and JavaScritp.Made by celyesFebruary 5, 2017
Demo Image: 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 TranJanuary 30, 2017
Demo Image: Sign Up Form
Sign up form with HTML, CSS and JavaScript.Made by Johnny BuiJanuary 10, 2017
Demo Image: Overlay Signup Form
Overlay signup form with HTML, CSS and JavaScript.Made by Chris DeacyDecember 21, 2016
Demo Image: Sign Up
Sign up form UI with React.js.Made by Jack OliverOctober 25, 2016
Demo Image: UI Credit Card
UI credit card with HTML, CSS and JavaScript.Made by GilOctober 22, 2016
Demo Image: 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 TalanovOctober 5, 2016
Demo Image: Search Bar Animation
Search input with morphing effect.Made by Milan MiloševSeptember 23, 2016
Demo Image: Search Bar
Search bar with HTML, CSS and JavaScript.Made by Adam KuhnSeptember 21, 2016
Demo Image: Checkout Card
Checkout card form with React.js.Made by Jack OliverAugust 20, 2016
Demo Image: Search
Simple search playing around with animations and positions.Made by Aaron TaylorAugust 15, 2016
Demo Image: Sign Up Form
Sign up with HTML, CSS and JavaScript.Made by Tommaso PolettiAugust 4, 2016
Demo Image: 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 PopovJuly 18, 2016
Demo Image: 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 PolettiJuly 13, 2016
Demo Image: SVG Search…
SVG search icon that transitions to underline on focus.Made by Mark ThomesJune 28, 2016
Demo Image: Credit Card Payment Form
Credit card payment form with HTML, CSS and JavaScript.Made by Jade PreisJune 21, 2016
Demo Image: Sign Up Form UI
Login form to the Daily UI Challenge #001.Made by Maycon LuizJune 20, 2016
Demo Image: Credit Card Payment
Non functional UI credit cards payment. Coded for practice raw JS for DOM manipulation.Made by Shehab EltawelMay 5, 2016
Demo Image: Search Input Context Animation
CSS icons, context animation, Telegram app-like search loading effect.Made by Riccardo ZanuttaApril 19, 2016
Demo Image: Form Sign Up UI
Form sign up UI with HTML, CSS and JavaScript.Made by Eddie SolarApril 9, 2016
Demo Image: 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 SantosMarch 19, 2016
Demo Image: Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript.Made by Fabio OttavianiMarch 18, 2016
Demo Image: Search UI
Search concept with options.Made by Fabio OttavianiMarch 10, 2016
Demo Image: Search Animation
Search animation with HTML, CSS and JavaScript.Made by DmitriyFebruary 26, 2016
Demo Image: Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript.Made by Pavel LaptevFebruary 25, 2016
Demo Image: Pull-Out Search Bar Concept
HTML and CSS pull-out search bar conceptMade by Asna FaridFebruary 22, 2016
Demo Image: Animating Search Box
An animating search box made with HTML & CSS.Made by Jarno van RhijnFebruary 5, 2016
Demo Image: CSS Search Box
It searches things, probably something similar been done before.Made by Jamie CoulterJanuary 12, 2016
Demo Image: Bouncy Search Box
HTML, CSS and JavaScript bouncy search box.Made by Guillaume SchlipakDecember 5, 2015
Demo Image: Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript.Made by Marco BiedermannDecember 3, 2015
Demo Image: Sign Up Form UI
Sign up form with HTML, CSS and JavaScript.Made by Lewis NeedhamNovember 13, 2015
Demo Image: Sign Up Form UI
Daily challenge 001 from dailyui.co.Made by Tyler JohnsonOctober 30, 2015
Demo Image: Credit Card UI
Credit card UI with HTML and CSS.Made by Star St.GermainOctober 23, 2015
Demo Image: Search Transformation
Interactive prototype of search form transformation.Made by Lucas BourdalléOctober 22, 2015
Demo Image: Search Animation
Interactive CSS animation of search icon morphing into search field.Made by Dan RootOctober 10, 2015
Demo Image: Log In Form
Log in form with HTML, CSS and JavaScript.Made by Kamen NedevOctober 2, 2015
Demo Image: Search Input Focus Animation
A simple animation for the focus event on a search input.Made by Nicols J EnglerJuly 26, 2015
Demo Image: Material Login Form
Interactive material design login form.Made by Andy TranJuly 25, 2015
Demo Image: Flat Login Form
Flat login form with HTML, CSS and JavaScript.Made by Andy TranJune 30, 2015
Demo Image: Sign Up Form UI
Sign Up Form UI with HTML and CSS.Made by PeterJune 5, 2016
Demo Image: Search Button Animation
Search button animation with HTML, CSS and JavaScript.Made by Kristy YeatonApril 20, 2015
Demo Image: Search Input With Animation
Pure CSS Search input with animation.Made by Arlina DesignApril 12, 2015
Demo Image: Fancy Forms
Material design style form elements.Made by AdamFebruary 4, 2015
Demo Image: Single Input 3D Form
Single input 3D form from http://thecodeplayer.com.Made by Son Tran-NguyenNovember 17, 2014
Demo Image: 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 BizelOctober 21, 2014
Demo Image: Animated Login Form
Experimenting with hidden login forms with animated reveals. This is the first of a few hopefully.Made by CheSeptember 3, 2014
Demo Image: Flat UI Login Form
HTML, CSS and JavaScript flat UI login form.Made by Brad BodineJanuary 14, 2014
Demo Image: Step By Step Register Form
Step by step register form with HTML, CSS and JavaScript.Made by Jerome RendersJanuary 6, 2017
Demo Image: Interactive Form
An interactive multi step form with HTML, CSS and JavaScript.Made by RosaDecember 14, 2016
Demo Image: Step By Step Form
A take on the codrops version with the possibility to go back and confirm all inputs.Made by Jonathan HNovember 8, 2016
Demo Image: Step By Step Form
HTML, CSS and JavaScript step by step form.Made by DevTipsAugust 22, 2016
Demo Image: Sign Up UI
A simple sign up concept.Made by TobiasApril 3, 2016
Demo Image: Sign Up UI
Heavily GSAP'ed sign up form with validation handling for the daily ui challenge.Made by Antonin CezardMarch 20, 2016
Demo Image: 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 GoktepeMarch 17, 2016
Demo Image: 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 PilandeMarch 7, 2016
Demo Image: Step by Step Form Interaction
A simple step form for customer experience.Made by Bhakti Al AkbarMarch 4, 2016
Demo Image: Interactive Sign Up Form
A concept for an interactive signup form.Made by Riccardo PasianottoMarch 1, 2016
Free Blogger templatest, Free Blogger templates Minimalist, Free blogger templates responsive, Layouts blogger, Simple free blog template, Blog template WordPress, Goyabi templates, Nawigacja na stronie, Free Blogger templates, Free Blogger templates Minimalist, Btemplates, Free blogger templates responsive, Simple free blog template, Blog template WordPress, Blogger template responsive free, Blogger templates,s Free Blogger templates Free Blogger templates Minimalist Layouts blogger Free blogger templates responsive Btemplates Blogger portfolio template Blog template WordPress Free themes blogspot Theme Blogger Premium Gratis Download Parhlo Premium/Magazine Blogger Template Google Infinite AMP Responsive Blogger Template | Blogspot Infinite AMP Sarkari Result WordPress Theme Free Download Amalia • v1.0 - Responsive •Blogger Template Amalie • Blogspot TemplateCodeify v1.0 - Personal Blogger Template new blogger templates, best blogger templatesLuvblog - Responsive HTML5 Blogger Template Twitter Bootstrap 3.0 100% Responsive DesignCream - Responsive News & Magazine Blogger Template Cream Magazine | ThemebeezSeo Mag - Responsive Blogger TemplateBest - SEO Friendly Blogger Templates • Top Best Free • New TemplatesWaverly - Personal Responsive Blogger Template250+ Best Free Responsive Blogger Templates PackNewsify v1.0 - News NEWSIFY BLOGGER THEME FEATURES Magazine Blogger Templateresponsive blogger templatesprofessional blogger templates freefree customizable blogger templatesfree blogger templates simple blogger templates freefree html blog templatesclean blogger templatespremium responsive blogger templates
Comments
Post a Comment