Collection of free HTML and CSS form code examples: interactive, step by step, simple, validation, etc. Update of May 2020 collection. 12 new items.
Table of Contents
Related Articles
- CSS Contact Forms
- CSS Login Forms
- CSS Checkout Forms
- CSS Subscribe Forms
- Bootstrap Forms
- Bootstrap Login Forms
- jQuery Forms
Links
Made with
- HTML / CSS
About a code
Animated Login Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Neumorphic Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Glassmorphic Sign in Form
A simple, easy sign in / log in form made with pure CSS, based on glassmorphism.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Placeholders
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Slicing Design Subcribe Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Newsletter with Animated Floating Input Labels
Move placeholder above the input on focus.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Sass)
About a code
Login Form
Login form. SVG animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About a code
Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Card Component with Floating Labels
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Log In / Sign Up
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, unicons.css
Links
Made with
- HTML / CSS
About a code
Login Form
Login form with floating placeholder and light button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Pupassure Sign Up Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Slim) / CSS (Sass)
About a code
Abstract Sign Up Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Neomorphic Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: ionicons.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Less Annoying Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (PostCSS)
About a code
Flexbox Responsive Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Transparent Material Login Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Responsive Contact Form
Only SCSS/CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Login Page
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Subscribe Form
Subscribe form with animated button in HTML and CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Login Screen
Trendy login screen user interface.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Login form UI Design
Login form UI design using HTML and Sass and jQuery.
Links
Made with
- HTML
- CSS
About the code
Flexbox Form
A form made with flexbox.
Links
Made with
- HTML
- CSS
- JavaScript
About the code
Invision Login
Sign in form UI.
Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Animated Search Box
Animated search box using HTML, CSS and jQuery.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Login & Sign Up Form UI
Micro interaction for sign up / sign in form.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Obnoxious Errors
Form errors with obnoxious.css animation.
Search Field
HTML and CSS search field.
Made by Bahaà Addin Balashoni
July 9, 2017
Payment Card Checkout
Payment card checkout in HTML, CSS and JavaScript.
Made by Simone Bernabè
July 8, 2017
Links
Made with
- HTML/Haml
- CSS/Sass
- JavaScript/CoffeeScript (jquery.js, jquery.customSelect.js)
About the code
No Questions Asked Form & Magic Focus
Emoji Form Validation
Emoji form validation in pure CSS.
Made by Marco Biedermann
June 6, 2017
Credit Card Flat Design
Pure CSS credit card flat design.
Made by Jean Oliveira
May 18, 2017
Links
Made with
- HTML (Slim) / CSS (Sass)
About a code
Untitled Form
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Material Design Login Form
Material design login form with HTML, CSS and JavaScritp.
Made by celyes
February 5, 2017
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
January 30, 2017
Sign Up Form
Sign up form with HTML, CSS and JavaScript.
Made by Johnny Bui
January 10, 2017
Overlay Signup Form
Overlay signup form with HTML, CSS and JavaScript.
Made by Chris Deacy
December 21, 2016
Sign Up
Sign up form UI with React.js.
Made by Jack Oliver
October 25, 2016
UI Credit Card
UI credit card with HTML, CSS and JavaScript.
Made by Gil
October 22, 2016
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
October 5, 2016
Search Bar Animation
Search input with morphing effect.
Made by Milan Milošev
September 23, 2016
Search Bar
Search bar with HTML, CSS and JavaScript.
Made by Adam Kuhn
September 21, 2016
Checkout Card
Checkout card form with React.js.
Made by Jack Oliver
August 20, 2016
Search
Simple search playing around with animations and positions.
Made by Aaron Taylor
August 15, 2016
Sign Up Form
Sign up with HTML, CSS and JavaScript.
Made by Tommaso Poletti
August 4, 2016
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
July 18, 2016
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
July 13, 2016
SVG Search...
SVG search icon that transitions to underline on focus.
Made by Mark Thomes
June 28, 2016
Credit Card Payment Form
Credit card payment form with HTML, CSS and JavaScript.
Made by Jade Preis
June 21, 2016
Sign Up Form UI
Login form to the Daily UI Challenge #001.
Made by Maycon Luiz
June 20, 2016
Credit Card Payment
Non functional UI credit cards payment. Coded for practice raw JS for DOM manipulation.
Made by Shehab Eltawel
May 5, 2016
Search Input Context Animation
CSS icons, context animation, Telegram app-like search loading effect.
Made by Riccardo Zanutta
April 19, 2016
Form Sign Up UI
Form sign up UI with HTML, CSS and JavaScript.
Made by Eddie Solar
April 9, 2016
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
March 19, 2016
Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript.
Made by Fabio Ottaviani
March 18, 2016
Search UI
Search concept with options.
Made by Fabio Ottaviani
March 10, 2016
Search Animation
Search animation with HTML, CSS and JavaScript.
Made by Dmitriy
February 26, 2016
Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript.
Made by Pavel Laptev
February 25, 2016
Pull-Out Search Bar Concept
HTML and CSS pull-out search bar concept
Made by Asna Farid
February 22, 2016
Animating Search Box
An animating search box made with HTML & CSS.
Made by Jarno van Rhijn
February 5, 2016
CSS Search Box
It searches things, probably something similar been done before.
Made by Jamie Coulter
January 12, 2016
Bouncy Search Box
HTML, CSS and JavaScript bouncy search box.
Made by Guillaume Schlipak
December 5, 2015
Credit Card Checkout
Credit card checkout with HTML, CSS and JavaScript.
Made by Marco Biedermann
December 3, 2015
Sign Up Form UI
Sign up form with HTML, CSS and JavaScript.
Made by Lewis Needham
November 13, 2015
Sign Up Form UI
Daily challenge 001 from dailyui.co.
Made by Tyler Johnson
October 30, 2015
Credit Card UI
Credit card UI with HTML and CSS.
Made by Star St.Germain
October 23, 2015
Search Transformation
Interactive prototype of search form transformation.
Made by Lucas Bourdallé
October 22, 2015
Search Animation
Interactive CSS animation of search icon morphing into search field.
Made by Dan Root
October 10, 2015
Log In Form
Log in form with HTML, CSS and JavaScript.
Made by Kamen Nedev
October 2, 2015
Search Input Focus Animation
A simple animation for the focus event on a search input.
Made by Nicols J Engler
July 26, 2015
Material Login Form
Interactive material design login form.
Made by Andy Tran
July 25, 2015
Flat Login Form
Flat login form with HTML, CSS and JavaScript.
Made by Andy Tran
June 30, 2015
Sign Up Form UI
Sign Up Form UI with HTML and CSS.
Made by Peter
June 5, 2016
Search Button Animation
Search button animation with HTML, CSS and JavaScript.
Made by Kristy Yeaton
April 20, 2015
Search Input With Animation
Pure CSS Search input with animation.
Made by Arlina Design
April 12, 2015
Fancy Forms
Material design style form elements.
Made by Adam
February 4, 2015
Single Input 3D Form
Single input 3D form from http://thecodeplayer.com.
Made by Son Tran-Nguyen
November 17, 2014
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
October 21, 2014
Animated Login Form
Experimenting with hidden login forms with animated reveals. This is the first of a few hopefully.
Made by Che
September 3, 2014
Flat UI Login Form
HTML, CSS and JavaScript flat UI login form.
Made by Brad Bodine
January 14, 2014
Interactive (Step By Step) Forms
Step By Step Register Form
Step by step register form with HTML, CSS and JavaScript.
Made by Jerome Renders
January 6, 2017
Interactive Form
An interactive multi step form with HTML, CSS and JavaScript.
Made by Rosa
December 14, 2016
Step By Step Form
A take on the codrops version with the possibility to go back and confirm all inputs.
Made by Jonathan H
November 8, 2016
Step By Step Form
HTML, CSS and JavaScript step by step form.
Made by DevTips
August 22, 2016
Sign Up UI
A simple sign up concept.
Made by Tobias
April 3, 2016
Sign Up UI
Heavily GSAP'ed sign up form with validation handling for the daily ui challenge.
Made by Antonin Cezard
March 20, 2016
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
March 17, 2016
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
March 7, 2016
Step by Step Form Interaction
A simple step form for customer experience.
Made by Bhakti Al Akbar
March 4, 2016
Interactive Sign Up Form
A concept for an interactive signup form.
Made by Riccardo Pasianotto
March 1, 2016