89 CSS Forms

Collection of free HTML and CSS form code examples: credit card checkout, interactive, step by step, simple, search box, validation, etc. Update of March 2018 collection. 7 new items.

Table of Contents

1. Credit Card Checkout Forms
2. Interactive (Step By Step) Forms
3. Search Boxes
4. Simple Forms
5. Subscribe Forms
6. Validation Forms

Related Articles

1. CSS Contact Forms
2. CSS Login Forms

Author

• Daniel Gonzalez
• February 26, 2018

Links

• demo and code

Made with

• HTML/Pug
• CSS/SCSS
• JavaScript

About the code

Form UI Animation

Form transitions UI based on Dominik Markušić dribble.

Author

• Mikael Ainalem
• February 12, 2018

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (anime.js)

About the code

Snake Highlight

Slithering highlight in login form.

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

• Mikael Ainalem
• August 19, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript

About the code

Invision Login

Sign in form UI.

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.

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

Sign Up Form

Sign up with HTML, CSS and JavaScript.
Made by Tommaso Poletti
August 4, 2016

Sign Up Form UI

Login form to the Daily UI Challenge #001.
Made by Maycon Luiz
June 20, 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

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

Log In Form

Log in form with HTML, CSS and JavaScript.
Made by Kamen Nedev
October 2, 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

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

Credit Card Checkout Forms

Author

• Nuno Martins
• June 7, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Credit Card Checkout

Pure CSS credit card checkout UI.

Payment Card Checkout

Payment card checkout in HTML, CSS and JavaScript.
Made by Simone Bernabè
July 8, 2017

Credit Card Flat Design

Pure CSS credit card flat design.
Made by Jean Oliveira
May 18, 2017

Checkout UI

Checkout UI with HTML, CSS and JavaScript.
Made by Stuart Williams
December 15, 2016

UI Credit Card

UI credit card with HTML, CSS and JavaScript.
Made by Gil
October 22, 2016

Credit Card Checkout

Credit card form with HTML, CSS and JavaScript.
Made by Daniela Andersson Waara
August 29, 2016

Checkout Card

Checkout card form with React.js.
Made by Jack Oliver
August 20, 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

Credit Card Payment Form

Credit card payment form with HTML, CSS and JavaScript.
Made by Jade Preis
June 21, 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

Credit Card

Credit card form with HTML and CSS
Made by cusx
April 12, 2016

Credit Card Checkout

Credit card checkout with HTML, CSS and JavaScript.
Made by Fabio Ottaviani
March 18, 2016

Credit Card Checkout UI

Credit card checkout UI wih HTML, CSS and JavaScript.
Made by Kyle Lavery
March 16, 2016

Credit Card Checkout

Credit card checkout with HTML, CSS and JavaScript.
Made by Pavel Laptev
February 25, 2016

Credit Card Form

Credit card form with HTML, CSS and JavaScript.
Made by Parlor Interactive
February 8, 2016

Credit Card Checkout

Credit card checkout with HTML, CSS and JavaScript.
Made by Marco Biedermann
December 3, 2015

Credit Card UI

Credit card UI with HTML and CSS.
Made by Star St.Germain
October 23, 2015

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

Search Boxes

Author

• Steve Gardner
• May 11, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Expanding Input

A slighty different implementation of "Increasing Input".

Author

• Shaw
• May 10, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS) / JavaScript

About the code

Increasing Input

Increasing input field for search box.

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

• 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.

Search Field

HTML and CSS search field.
Made by Bahaà Addin Balashoni
July 9, 2017

Author

• Charlie Marcotte
• July 6, 2017

Links

• demo and code

Made with

• HTML/Pug
• CSS/Sass

About the code

Simple On-click Search Field Interaction

This is a CSS version of an interaction I saw on the Waze app. All the icons/images are made with CSS - the onlick interaction is done with the sibling selector ~

CSS Effect For Search Input

Just a simple and a bit fancy CSS effect for input field.
Made by Mihael Tomić
May 30, 2017

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

Loooong Search Bar

Long search bar with HTML and CSS.
Made by Oltika
September 9, 2016

Search

Simple search playing around with animations and positions.
Made by Aaron Taylor
August 15, 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

Search Input Context Animation

CSS icons, context animation, Telegram app-like search loading effect.
Made by Riccardo Zanutta
April 19, 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

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

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

Search Input Animation

Search input animation (pure css, without svg).
Made by Nikolay Talanov
August 13, 2015

Search Input Focus Animation

A simple animation for the focus event on a search input.
Made by Nicols J Engler
July 26, 2015

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

Animated Search Form

HTML and CSS animated search form.
Made by Christophe Béghin
February 20, 2013

Simple Forms

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.

Subscribe Forms

Author

• Mikael Ainalem
• March 12, 2018

Links

• demo and code

Made with

• HTML / CSS / JavaScript

About the code

Signing Up for the Newsletter

A playful way to create a signup for a newletter form. Uses SVG line animation to transform the underline into a spinner and into a "thank you!" message.

Author

• Aaron Taylor
• July 26, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jquery.js)

About the code

Pop-Up Overlay

Pop-Up overlay with subscribe form.

Author

• Chouaib Blgn
• July 24, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (jquery.js)

About the code

UI Subscribe Box

Amazing subscribe box UI.

Subscribe Form

Simple subscribe form with CSS background clip.
Made by Omar Dsoky
July 1, 2017

CSS Subscribe Box

Simple and stylish subscribe box.
Made by Hugo Carneiro
June 18, 2016

Validation Forms

Emoji Form Validation

Emoji form validation in pure CSS.
Made by Marco Biedermann
June 6, 2017