FreeFrontend

77 CSS Forms

February 02, 2017 | 36 Minute Read

Free HTML and CSS forms: contact, credit card checkout, interactive, login/sign up, step by step and search. Demo and download code (*zip).

Contact Forms

Demo Image: Minimalistic Form
Minimalistic Form (demo image)

Minimalistic Form

Simple and beautiful contact form. Useful and easy to modify.
Made by Matheus Marsiglio
November 24, 2016

download demo and code

See the Pen MINIMALISTIC FORM by Matheus Marsiglio (@matmarsiglio) on CodePen.

Demo Image: Vintage Inspired Contact Form
Vintage Inspired Contact Form (demo image)

Vintage Inspired Contact Form

Mobile-friendly. A simple, yet effective contact form. Validation not included, but will be made available upon request.
Made by David Fitas
November 21, 2016

download demo and code

See the Pen Vintage Inspired Contact Form by David Fitas (@dfitzy) on CodePen.

Demo Image: Contact Us Form
Contact Us Form (demo image)

Contact Us Form

Contact us form with envelope animation.
Made by Justin Felcan
September 18, 2016

download demo and code

See the Pen Daily UI #028 Contact Us by Justin Felcan (@felcans) on CodePen.

Demo Image: Expanding Contact Form
Expanding Contact Form (demo image)

Expanding Contact Form

A functional (front end only) expanding contact form with jQuery validation.
Made by Joe Harry
September 18, 2016

download demo and code

See the Pen Expanding Contact Form by Joe Harry (@woodwork) on CodePen.

Demo Image: Contact Form UI
Contact Form UI (demo image)

Contact Form UI

Contact form with HTML and CSS.
Made by Ariana Lynn
April 20, 2016

download demo and code

See the Pen #DailyUI028 Contact Form by Ariana Lynn (@arianalynn) on CodePen.

Demo Image: Quick Minimal Contact Form
Quick Minimal Contact Form (demo image)

Quick Minimal Contact Form

A styling experiment for a minimal contact form starting from a PSD to a codepen, using the CSS colon-separated states :focus :required :valid :invalid
Made by Erlen
July 20, 2015

download demo and code

See the Pen Quick Minimal Contact Form by Erlen (@erlenmasson) on CodePen.

Demo Image: Contact Form
Contact Form (demo image)

Contact Form

Just another contact form.
Made by Jaime
May 3, 2015

download demo and code

See the Pen Contact form by Jaime (@jq) on CodePen.

Demo Image: Flip Contact Form
Flip Contact Form (demo image)

Flip Contact Form

Flip contact form in HTML, CSS and JavaScript.
Made by Danny Beton
February 13, 2014

download demo and code

See the Pen Sass Flip Contact Form by Danny Beton (@devdanny) on CodePen.

Credit Card Checkout Forms

Demo Image: Checkout UI
Checkout UI (demo image)

Checkout UI

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

download demo and code

See the Pen Project #002: Checkout by Stuart Williams (@stuartpbw) on CodePen.

Demo Image: UI Credit Card
UI Credit Card (demo image)

UI Credit Card

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

download demo and code

See the Pen CSS Snackables - Week 2 by Gil (@gil--) on CodePen.

Demo Image: Credit Card Checkout
Credit Card Checkout (demo image)

Credit Card Checkout

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

download demo and code

See the Pen Daily UI #002 Credit Card Checkout by Daniela Andersson Waara (@enwaara) on CodePen.

Demo Image: Checkout Card
Checkout Card (demo image)

Checkout Card

Checkout card form with React.js.
Made by Jack Oliver
August 20, 2016

download demo and code

See the Pen React Daily UI - 002 - Checkout by Jack Oliver (@jackoliver) on CodePen.

Demo Image: Credit Card Checkout
Credit Card Checkout (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 Popov
July 18, 2016

download demo and code

See the Pen #codevember Credit Card Checkout by Momcilo Popov (@Momciloo) on CodePen.

Demo Image: Credit Card Payment Form
Credit Card Payment Form (demo image)

Credit Card Payment Form

Credit card payment form with HTML, CSS and JavaScript.
Made by Jade Preis
June 21, 2016

download demo and code

See the Pen Credit Card Payment Form by Jade Preis (@jadepreis) on CodePen.

Demo Image: Credit Card Payment
Credit Card Payment (demo image)

Credit Card Payment

Non functional UI credit cards payment. Coded for practice raw JS for DOM manipulation.
Made by Shehab Eltawel
May 5, 2016

download demo and code

See the Pen Credit Card Payment by Shehab Eltawel (@shehab-eltawel) on CodePen.

Demo Image: Credit Card
Credit Card (demo image)

Credit Card

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

download demo and code

See the Pen Credit Card by cusx (@cusx) on CodePen.

Demo Image: Credit Card Checkout
Credit Card Checkout (demo image)

Credit Card Checkout

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

download demo and code

See the Pen Daily UI #002: Credit Card Checkout by Fabio Ottaviani (@supah) on CodePen.

Demo Image: Credit Card Checkout UI
Credit Card Checkout UI (demo image)

Credit Card Checkout UI

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

download demo and code
Demo Image: Credit Card Checkout
Credit Card Checkout (demo image)

Credit Card Checkout

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

download demo and code

See the Pen Daily UI #002 Credit Card Checkout by Pavel Laptev (@PavelLaptev) on CodePen.

Demo Image: Credit Card Form
Credit Card Form (demo image)

Credit Card Form

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

download demo and code

See the Pen Daily UI 002 | Credit Card Form by Parlor Interactive (@heyparlor) on CodePen.

Demo Image: Credit Card Checkout
Credit Card Checkout (demo image)

Credit Card Checkout

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

download demo and code

See the Pen Daily UI | #002 - Credit Card Checkout by Marco Biedermann (@marcobiedermann) on CodePen.

Demo Image: Credit Card UI
Credit Card UI (demo image)

Credit Card UI

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

download demo and code

See the Pen Daily UI 002 - Credit Card by Star St.Germain (@thisisstar) on CodePen.

Interactive (Step By Step) Forms

Demo Image: Step By Step Register Form
Step By Step Register Form (demo image)

Step By Step Register Form

Step by step register form with HTML, CSS and JavaScript.
Made by Jerome Renders
January 6, 2017

download demo and code

See the Pen Step by step register form by Jerome Renders (@JeromeRenders) on CodePen.

Demo Image: Interactive Form
Interactive Form (demo image)

Interactive Form

An interactive multi step form with HTML, CSS and JavaScript.
Made by Rosa
December 14, 2016

download demo and code

See the Pen Interactive Form by Rosa (@RRoberts) on CodePen.

Demo Image: Step By Step Form
Step By Step Form (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 H
November 8, 2016

download demo and code

See the Pen Step by step form by Jonathan H (@Dunner) on CodePen.

Demo Image: Step By Step Form
Step By Step Form (demo image)

Step By Step Form

HTML, CSS and JavaScript step by step form.
Made by DevTips
August 22, 2016

download demo and code

See the Pen Step By Step Form by DevTips (@devtips) on CodePen.

Demo Image: Sign Up UI
Sign Up UI (demo image)

Sign Up UI

A simple sign up concept.
Made by Tobias
April 3, 2016

download demo and code

See the Pen Daily UI #001 Sign Up by Tobias (@Tbgse) on CodePen.

Demo Image: Sign Up UI
Sign Up UI (demo image)

Sign Up UI

Heavily GSAP'ed sign up form with validation handling for the daily ui challenge.
Made by Antonin Cezard
March 20, 2016

download demo and code

See the Pen Daily UI #001 - Sign Up by Antonin Cezard (@acezard) on CodePen.

Demo Image: Multi Step Form With Progress Bar Using jQuery And CSS3
Multi Step Form With Progress Bar Using jQuery And CSS3 (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 Goktepe
March 17, 2016

download demo and code
Demo Image: Interactive Form
Interactive Form (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 Pilande
March 7, 2016

download demo and code

See the Pen Interactive Form by Emmanuel Pilande (@epilande) on CodePen.

Demo Image: Step by Step Form Interaction
Step by Step Form Interaction (demo image)

Step by Step Form Interaction

A simple step form for customer experience.
Made by Bhakti Al Akbar
March 4, 2016

download demo and code

See the Pen Step by Step Form Interaction by Bhakti Al Akbar (@balapa) on CodePen.

Demo Image: Interactive Sign Up Form
Interactive Sign Up Form (demo image)

Interactive Sign Up Form

A concept for an interactive signup form.
Made by Riccardo Pasianotto
March 1, 2016

download demo and code

See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.

Login/SignUp Forms

Demo Image: Material Design Login Form
Material Design Login Form (demo image)

Material Design Login Form

Material design login form with HTML, CSS and JavaScritp.
Made by celyes
February 5, 2017

download demo and code
Demo Image: Login Form - Modal
Login Form - Modal (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 Tran
January 30, 2017

download demo and code

See the Pen Login Form - Modal by Andy Tran (@andytran) on CodePen.

Demo Image: Sign Up Form
Sign Up Form (demo image)

Sign Up Form

Sign up form with HTML, CSS and JavaScript.
Made by Johnny Bui
January 10, 2017

download demo and code

See the Pen Daily UI 001 Sign Up Form by Johnny Bui (@jbui) on CodePen.

Demo Image: Overlay Signup Form
Overlay Signup Form (demo image)

Overlay Signup Form

Overlay signup form with HTML, CSS and JavaScript.
Made by Chris Deacy
December 21, 2016

download demo and code

See the Pen Overlay Signup Form by Chris Deacy (@chrisdothtml) on CodePen.

Demo Image: Sign In Button And Form
Sign In Button And Form (demo image)

Sign In Button And Form

The button has a hover state which pulls a skewed transparent white overlay over the button's background color. When the button is clicked, the sign in form appears from within the button.
Made by Cole Waldrip
December 7, 2016

download demo and code

See the Pen Sign In Button and Form by Cole Waldrip (@colewaldrip) on CodePen.

Demo Image: Sign Up
Sign Up (demo image)

Sign Up

Sign up form UI with React.js.
Made by Jack Oliver
October 25, 2016

download demo and code

See the Pen React DailyUI - 001 - Sign Up by Jack Oliver (@jackoliver) on CodePen.

Demo Image: Sign Up Form
Sign Up Form (demo image)

Sign Up Form

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

download demo and code

See the Pen DailyUi#001 - Sign Up by Tommaso Poletti (@tomma5o) on CodePen.

Demo Image: Sign Up Form UI
Sign Up Form UI (demo image)

Sign Up Form UI

Login form to the Daily UI Challenge #001.
Made by Maycon Luiz
June 20, 2016

download demo and code

See the Pen DailyUI #001 - Sign Up by Maycon Luiz (@mycnlz) on CodePen.

Demo Image: Form Sign Up UI
Form Sign Up UI (demo image)

Form Sign Up UI

Form sign up UI with HTML, CSS and JavaScript.
Made by Eddie Solar
April 9, 2016

download demo and code

See the Pen Daily UI 001 - FEDM by Eddie Solar (@eddie07) on CodePen.

Demo Image: Login & Sign Up Form Concept
Login & Sign Up Form Concept (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 Santos
March 19, 2016

download demo and code

See the Pen Login & Sign Up Form Concept by Dany Santos (@THEORLAN2) on CodePen.

Demo Image: Login Form
Login Form (demo image)

Login Form

Login form with HTMl and CSS.
Made by Alex
February 4, 2016

download demo and code

See the Pen Login Form by Alex (@akwright) on CodePen.

Demo Image: Sign Up UI
Sign Up UI (demo image)

Sign Up UI

Sign Up UI
Made by Marco Biedermann
November 15, 2015

download demo and code

See the Pen Daily UI | #001 - Sign Up by Marco Biedermann (@marcobiedermann) on CodePen.

Demo Image: Sign Up Form UI
Sign Up Form UI (demo image)

Sign Up Form UI

Sign up form with HTML, CSS and JavaScript.
Made by Lewis Needham
November 13, 2015

download demo and code

See the Pen Sign up form by Lewis Needham (@LewisN) on CodePen.

Demo Image: Sign Up Form UI
Sign Up Form UI (demo image)

Sign Up Form UI

Daily challenge 001 from dailyui.co.
Made by Tyler Johnson
October 30, 2015

download demo and code

See the Pen DailyUI Challenge 001 by Tyler Johnson (@tylernj42) on CodePen.

Demo Image: Log In Form
Log In Form (demo image)

Log In Form

Log in form with HTML, CSS and JavaScript.
Made by Kamen Nedev
October 2, 2015

download demo and code

See the Pen LogIn Form by Kamen Nedev (@nedev) on CodePen.

Demo Image: Material Login Form
Material Login Form (demo image)

Material Login Form

Interactive material design login form.
Made by Andy Tran
July 25, 2015

download demo and code

See the Pen Material Login Form by Andy Tran (@andytran) on CodePen.

Demo Image: Flat Login Form
Flat Login Form (demo image)

Flat Login Form

Flat login form with HTML, CSS and JavaScript.
Made by Andy Tran
June 30, 2015

download demo and code

See the Pen Flat Login Form by Andy Tran (@andytran) on CodePen.

Demo Image: Sign Up Form UI
Sign Up Form UI (demo image)

Sign Up Form UI

Sign Up Form UI with HTML and CSS.
Made by Peter
June 5, 2016

download demo and code

See the Pen Signup Form (DailyUI #001) by Peter (@petermllrr) on CodePen.

Demo Image: Fancy Forms
Fancy Forms (demo image)

Fancy Forms

Material design style form elements.
Made by Adam
February 4, 2015

download demo and code

See the Pen Fancy Forms by Adam (@adam2326) on CodePen.

Demo Image: Single Input 3D Form
Single Input 3D Form (demo image)

Single Input 3D Form

Single input 3D form from http://thecodeplayer.com.
Made by Son Tran-Nguyen
November 17, 2014

download demo and code

See the Pen Single input 3D form by Son Tran-Nguyen (@sntran) on CodePen.

Demo Image: Form Design
Form Design (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 Bizel
October 21, 2014

download demo and code

See the Pen Form Design by Timurtek Bizel (@Timurtek) on CodePen.

Demo Image: Animated Login Form
Animated Login Form (demo image)

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

download demo and code

See the Pen Animated Login Form by Che (@code_dependant) on CodePen.

Demo Image: Flat UI Login Form
Flat UI Login Form (demo image)

Flat UI Login Form

HTML, CSS and JavaScript flat UI login form.
Made by Brad Bodine
January 14, 2014

download demo and code

See the Pen Flat UI Login Form by Brad Bodine (@bbodine1) on CodePen.

Demo Image: Simple Dark Form
Simple Dark Form (demo image)

Simple Dark Form

Simple form based on Andreas Storm work.
Made by Clément Guillou
June 21, 2013

download demo and code

See the Pen Simple Dark Form by Clément Guillou (@cguillou) on CodePen.

Search Forms

Demo Image: Fullscreen Search
Fullscreen Search (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 Talanov
October 5, 2016

download demo and code

See the Pen Fullscreen Search by Nikolay Talanov (@suez) on CodePen.

Demo Image: Search Bar Animation
Search Bar Animation (demo image)

Search Bar Animation

Search input with morphing effect.
Made by Milan Milošev
September 23, 2016

download demo and code

See the Pen Search bar animation by Milan Milošev (@MilanMilosev) on CodePen.

Demo Image: Search Bar
Search Bar (demo image)

Search Bar

Search bar with HTML, CSS and JavaScript.
Made by Adam Kuhn
September 21, 2016

download demo and code

See the Pen DailyUI 022 by Adam Kuhn (@cobra_winfrey) on CodePen.

Demo Image: Loooong Search Bar
Loooong Search Bar (demo image)

Loooong Search Bar

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

download demo and code

See the Pen Loooong Search Bar by Oltika (@oltika) on CodePen.

Demo Image: Search
Search (demo image)

Search

Simple search playing around with animations and positions.
Made by Aaron Taylor
August 15, 2016

download demo and code

See the Pen Search by Aaron Taylor (@beanbaag) on CodePen.

Demo Image: Simple Mobile Search Input
Simple Mobile Search Input (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 Poletti
July 13, 2016

download demo and code

See the Pen Simple Mobile Search input by Tommaso Poletti (@tomma5o) on CodePen.

Demo Image: SVG Search...
SVG Search... (demo image)

SVG Search...

SVG search icon that transitions to underline on focus.
Made by Mark Thomes
June 28, 2016

download demo and code

See the Pen SVG Search... by Mark Thomes (@WithAnEs) on CodePen.

Demo Image: Search Input Context Animation
Search Input Context Animation (demo image)

Search Input Context Animation

CSS icons, context animation, Telegram app-like search loading effect.
Made by Riccardo Zanutta
April 19, 2016

download demo and code

See the Pen Search input context animation by Riccardo Zanutta (@rickzanutta) on CodePen.

Demo Image: Search UI
Search UI (demo image)

Search UI

Search concept with options.
Made by Fabio Ottaviani
March 10, 2016

download demo and code

See the Pen DailyUI #022 - Search by Fabio Ottaviani (@supah) on CodePen.

Demo Image: Search Animation
Search Animation (demo image)

Search Animation

Search animation with HTML, CSS and JavaScript.
Made by Dmitriy
February 26, 2016

download demo and code

See the Pen Search animation by Dmitriy (@iamnoturkitty) on CodePen.

Demo Image: Pull-Out Search Bar Concept
Pull-Out Search Bar Concept (demo image)

Pull-Out Search Bar Concept

HTML and CSS pull-out search bar concept
Made by Asna Farid
February 22, 2016

download demo and code

See the Pen Pull-Out Search Bar Concept by Asna Farid (@asna_farid) on CodePen.

Demo Image: Animating Search Box
Animating Search Box (demo image)

Animating Search Box

An animating search box made with HTML & CSS.
Made by Jarno van Rhijn
February 5, 2016

download demo and code

See the Pen Animating search box by Jarno van Rhijn (@jarnovanrhijn) on CodePen.

Demo Image: CSS Search Box
CSS Search Box (demo image)

CSS Search Box

It searches things, probably something similar been done before.
Made by Jamie Coulter
January 12, 2016

download demo and code

See the Pen CSS Search Box by Jamie Coulter (@jcoulterdesign) on CodePen.

Demo Image: Bouncy Search Box
Bouncy Search Box (demo image)

Bouncy Search Box

HTML, CSS and JavaScript bouncy search box.
Made by Guillaume Schlipak
December 5, 2015

download demo and code

See the Pen Bouncy search box by Guillaume Schlipak (@Schlipak) on CodePen.

Demo Image: Search Transformation
Search Transformation (demo image)

Search Transformation

Interactive prototype of search form transformation.
Made by Lucas Bourdallé
October 22, 2015

download demo and code

See the Pen Search Transformation by Lucas Bourdallé (@hecalu) on CodePen.

Demo Image: Search Animation
Search Animation (demo image)

Search Animation

Interactive CSS animation of search icon morphing into search field.
Made by Dan Root
October 10, 2015

download demo and code

See the Pen Search Animation by Dan Root (@danrootdesign) on CodePen.

Demo Image: Search Input Animation
Search Input Animation (demo image)

Search Input Animation

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

download demo and code

See the Pen Search Input animation (pure css, without svg) by Nikolay Talanov (@suez) on CodePen.

Demo Image: Search Input Focus Animation
Search Input Focus Animation (demo image)

Search Input Focus Animation

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

download demo and code

See the Pen Search input focus animation by Nicols J Engler (@nicolasjengler) on CodePen.

Demo Image: Search Button Animation
Search Button Animation (demo image)

Search Button Animation

Search button animation with HTML, CSS and JavaScript.
Made by Kristy Yeaton
April 20, 2015

download demo and code

See the Pen Search button animation by Kristy Yeaton (@kristyjy) on CodePen.

Demo Image: Search Input With Animation
Search Input With Animation (demo image)

Search Input With Animation

Pure CSS Search input with animation.
Made by Arlina Design
April 12, 2015

download demo and code

See the Pen Search Input With Animation by Arlina Design (@arlinadesign) on CodePen.

Demo Image: Animated Search Form
Animated Search Form (demo image)

Animated Search Form

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

download demo and code

See the Pen Animated search Form by Christophe Béghin (@CBeghin) on CodePen.