May 25, 2020

80 CSS Forms

Collection of free HTML and CSS form code examples: interactive, step by step, simple, validation, etc. Update of April 2019 collection. 11 new items.

Table of Contents

Related Articles

Author Soufiane Khalfaoui HaSsani

April 8, 2020 Links demo and code 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: -

Author Ricky Eckhardt

March 3, 2020 Links demo and code 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

Author Ricky Eckhardt

March 1, 2020 Links demo and code Made with HTML (Slim) / CSS (Sass) About a code Abstract Sign Up Form Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Ricky Eckhardt

February 28, 2020 Links demo and code Made with HTML (Slim) / CSS (Sass) About a code Colorful Contact Form Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Swapnil

January 28, 2020 Links demo and code Made with HTML / CSS (SCSS) About a code Neomorphic Form Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: ionicons.css

Author Andy Fitzsimon

January 12, 2020 Links demo and code Made with HTML / CSS (SCSS) About a code Less Annoying Form Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Adam Argyle

January 6, 2020 Links demo and code Made with HTML / CSS (PostCSS) About a code Flexbox Responsive Form Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Alvaro Montoro

December 21, 2019 Links demo and code 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: -

Author alphardex

October 23, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Transparent Material Login Form Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Amli

July 11, 2019 Links demo and code 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

Author Mert Cukuren

June 30, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Login Page Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Ahmed Nasr

December 16, 2018 Links demo and code 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: -

Author Stas Melnikov

June 11, 2018 Links demo and code Made with HTML / CSS About the code Search Form Search form with funny animation and clearing button. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author Chouaib Blgn

September 20, 2017 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Login Screen Trendy login screen user interface.

Author Chouaib Blgn

September 28, 2017 Links demo and code 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.

Author Katherine Kato

August 19, 2017 Links demo and code Made with HTML

CSS About the code Flexbox Form A form made with flexbox .

Author Mikael Ainalem

August 19, 2017 Links demo and code Made with HTML

CSS

JavaScript About the code Invision Login Sign in form UI.

Author Chouaib Blg

July 31, 2017 Links demo and code Made with HTML

CSS

JavaScript (jquery.js) About the code Animated Search Box Animated search box using HTML, CSS and jQuery.

Author Sasha

July 17, 2017 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Login & Sign Up Form UI Micro interaction for sign up / sign in form.

Author Maria Cheline

July 12, 2017 Links demo and code Made with HTML

CSS/SCSS

JavaScript (jquery.js) About the code Obnoxious Errors Form errors with obnoxious.css animation.

Demo Image: Search Field

Search Field

HTML and CSS search field.

Made by Bahaà Addin Balashoni

July 9, 2017

Demo Image: Payment Card Checkout

Payment Card Checkout

Payment card checkout in HTML, CSS and JavaScript.

Made by Simone Bernabè

July 8, 2017

Author Michal Niewitala

June 21, 2017 Links demo and code Made with HTML/Haml

CSS/Sass

JavaScript/CoffeeScript (jquery.js, jquery.customSelect.js) About the code No Questions Asked Form & Magic Focus Recreation of no questions asked form with magic focus.

Demo GIF: Emoji Form Validation

Emoji Form Validation

Emoji form validation in pure CSS.

Made by Marco Biedermann

June 6, 2017

Demo Image: Credit Card Flat Design

Credit Card Flat Design

Pure CSS credit card flat design.

Made by Jean Oliveira

May 18, 2017

Demo Image: Material Design Login Form

Material Design Login Form

Material design login form with HTML, CSS and JavaScritp.

Made by celyes

February 5, 2017

Demo Image: Login Form - Modal

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

Demo Image: Sign Up Form

Sign Up Form

Sign up form with HTML, CSS and JavaScript.

Made by Johnny Bui

January 10, 2017

Demo Image: Overlay Signup Form

Overlay Signup Form

Overlay signup form with HTML, CSS and JavaScript.

Made by Chris Deacy

December 21, 2016

Demo Image: Sign Up

Sign Up

Sign up form UI with React.js.

Made by Jack Oliver

October 25, 2016

Demo Image: UI Credit Card

UI Credit Card

UI credit card with HTML, CSS and JavaScript.

Made by Gil

October 22, 2016

Demo Image: Fullscreen Search

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

Demo Image: Search Bar Animation

Search Bar Animation

Search input with morphing effect.

Made by Milan Milošev

September 23, 2016

Demo Image: Search Bar

Search Bar

Search bar with HTML, CSS and JavaScript.

Made by Adam Kuhn

September 21, 2016

Demo Image: Checkout Card

Checkout Card

Checkout card form with React.js.

Made by Jack Oliver

August 20, 2016

Demo Image: Search

Search

Simple search playing around with animations and positions.

Made by Aaron Taylor

August 15, 2016

Demo Image: Sign Up Form

Sign Up Form

Sign up with HTML, CSS and JavaScript.

Made by Tommaso Poletti

August 4, 2016

Demo Image: Credit Card Checkout

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

Demo Image: Simple Mobile Search Input

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

Demo Image: SVG Search...

SVG Search...

SVG search icon that transitions to underline on focus.

Made by Mark Thomes

June 28, 2016

Demo Image: Credit Card Payment Form

Credit Card Payment Form

Credit card payment form with HTML, CSS and JavaScript.

Made by Jade Preis

June 21, 2016

Demo Image: Sign Up Form UI

Sign Up Form UI

Login form to the Daily UI Challenge #001.

Made by Maycon Luiz

June 20, 2016

Demo Image: Credit Card Payment

Credit Card Payment

Non functional UI credit cards payment. Coded for practice raw JS for DOM manipulation.

Made by Shehab Eltawel

May 5, 2016

Demo Image: Search Input Context Animation

Search Input Context Animation

CSS icons, context animation, Telegram app-like search loading effect.

Made by Riccardo Zanutta

April 19, 2016

Demo Image: Form Sign Up UI

Form Sign Up UI

Form sign up UI with HTML, CSS and JavaScript.

Made by Eddie Solar

April 9, 2016

Demo Image: Login & Sign Up Form Concept

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

Demo Image: Credit Card Checkout

Credit Card Checkout

Credit card checkout with HTML, CSS and JavaScript.

Made by Fabio Ottaviani

March 18, 2016

Demo Image: Search UI

Search UI

Search concept with options.

Made by Fabio Ottaviani

March 10, 2016

Demo Image: Search Animation

Search Animation

Search animation with HTML, CSS and JavaScript.

Made by Dmitriy

February 26, 2016

Demo Image: Credit Card Checkout

Credit Card Checkout

Credit card checkout with HTML, CSS and JavaScript.

Made by Pavel Laptev

February 25, 2016

Demo Image: Pull-Out Search Bar Concept

Pull-Out Search Bar Concept

HTML and CSS pull-out search bar concept

Made by Asna Farid

February 22, 2016

Demo Image: Animating Search Box

Animating Search Box

An animating search box made with HTML & CSS.

Made by Jarno van Rhijn

February 5, 2016

Demo Image: CSS Search Box

CSS Search Box

It searches things, probably something similar been done before.

Made by Jamie Coulter

January 12, 2016

Demo Image: Bouncy Search Box

Bouncy Search Box

HTML, CSS and JavaScript bouncy search box.

Made by Guillaume Schlipak

December 5, 2015

Demo Image: Credit Card Checkout

Credit Card Checkout

Credit card checkout with HTML, CSS and JavaScript.

Made by Marco Biedermann

December 3, 2015

Demo Image: Sign Up Form UI

Sign Up Form UI

Sign up form with HTML, CSS and JavaScript.

Made by Lewis Needham

November 13, 2015

Demo Image: Sign Up Form UI

Sign Up Form UI

Daily challenge 001 from dailyui.co.

Made by Tyler Johnson

October 30, 2015

Demo Image: Credit Card UI

Credit Card UI

Credit card UI with HTML and CSS.

Made by Star St.Germain

October 23, 2015

Demo Image: Search Transformation

Search Transformation

Interactive prototype of search form transformation.

Made by Lucas Bourdallé

October 22, 2015

Demo Image: Search Animation

Search Animation

Interactive CSS animation of search icon morphing into search field.

Made by Dan Root

October 10, 2015

Demo Image: Log In Form

Log In Form

Log in form with HTML, CSS and JavaScript.

Made by Kamen Nedev

October 2, 2015

Demo Image: Search Input Focus Animation

Search Input Focus Animation

A simple animation for the focus event on a search input.

Made by Nicols J Engler

July 26, 2015

Demo Image: Material Login Form

Material Login Form

Interactive material design login form.

Made by Andy Tran

July 25, 2015

Demo Image: Flat Login Form

Flat Login Form

Flat login form with HTML, CSS and JavaScript.

Made by Andy Tran

June 30, 2015

Demo Image: Sign Up Form UI

Sign Up Form UI

Sign Up Form UI with HTML and CSS.

Made by Peter

June 5, 2016

Demo Image: Search Button Animation

Search Button Animation

Search button animation with HTML, CSS and JavaScript.

Made by Kristy Yeaton

April 20, 2015

Demo Image: Search Input With Animation

Search Input With Animation

Pure CSS Search input with animation.

Made by Arlina Design

April 12, 2015

Demo Image: Fancy Forms

Fancy Forms

Material design style form elements.

Made by Adam

February 4, 2015

Demo Image: Single Input 3D Form

Single Input 3D Form

Single input 3D form from http://thecodeplayer.com.

Made by Son Tran-Nguyen

November 17, 2014

Demo Image: Form Design

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

Demo Image: Animated Login Form

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

Demo Image: Flat UI Login Form

Flat UI Login Form

HTML, CSS and JavaScript flat UI login form.

Made by Brad Bodine

January 14, 2014

Interactive (Step By Step) Forms

Demo Image: Step By Step Register Form

Step By Step Register Form

Step by step register form with HTML, CSS and JavaScript.

Made by Jerome Renders

January 6, 2017

Demo Image: Interactive Form

Interactive Form

An interactive multi step form with HTML, CSS and JavaScript.

Made by Rosa

December 14, 2016

Demo Image: Step By Step Form

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

Demo Image: Step By Step Form

Step By Step Form

HTML, CSS and JavaScript step by step form.

Made by DevTips

August 22, 2016

Demo Image: Sign Up UI

Sign Up UI

A simple sign up concept.

Made by Tobias

April 3, 2016

Demo Image: Sign Up UI

Sign Up UI

Heavily GSAP'ed sign up form with validation handling for the daily ui challenge.

Made by Antonin Cezard

March 20, 2016

Demo Image: Multi Step Form With Progress Bar Using jQuery And CSS3

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

Demo Image: Interactive Form

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

Demo Image: Step by Step Form Interaction

Step by Step Form Interaction

A simple step form for customer experience.

Made by Bhakti Al Akbar

March 4, 2016

Demo Image: Interactive Sign Up Form

Interactive Sign Up Form

A concept for an interactive signup form.

Made by Riccardo Pasianotto

March 1, 2016