Table of Contents

Collection of free HTML and CSS form code examples: interactive, step by step, simple, validation, etc.

SUBSCRIBE FORM

Subscribe form with animated button in HTML and CSS. Made with HTML (Pug) / CSS (SCSS) by Ahmed Nasr.

 

Demo and Code

SEARCH FORM

Search form with funny animation and clearing button. Made with HTML / CSS by Stas Melnikov.

See the Pen
The search form with funny animation and clearing button
by Stas Melnikov (@melnik909)
on CodePen.

 Demo and Code

LOGIN SCREEN

Trendy login screen user interface. Made with HTML/CSS/SCSS/JavaScript (jquery.js) by Chouaib Blg.

See the Pen
Trendy Login screen User Interface
by Chouaib Blgn (@chouaibblgn45)
on CodePen.

 Demo and Code

LOGIN FORM UI DESIGN

Login form UI design using HTML and Sass and jQuery. Made with HTML/CSS/SCSS/JavaScript (jquery.js) by Chouaib Blgn.

See the Pen
Login form UI Design
by Chouaib Blgn (@chouaibblgn45)
on CodePen.

 Demo and Code

FLEXBOX FORM

A form made with flexbox. Made with HTML/CSS by Katherine Kato.

See the Pen
Flexbox Form
by Katherine Kato (@kathykato)
on CodePen.

 Demo and Code

INVISION LOGIN

Sign in form UI. Made with HTML/CSS/JavaScript by Mikael Ainalem.

See the Pen
Invision login – dribbble remake
by Mikael Ainalem (@ainalem)
on CodePen.

 Demo and Code

ANIMATED SEARCH BOX

Animated search box using HTML, CSS and jQuery. Made with HTML / CSS / JavaScript (jquery.js) by Chouaib Blg.

See the Pen
Animated Search Box
by Chouaib Blgn (@chouaibblgn45)
on CodePen.

 Demo and Code

LOGIN & SIGN UP FORM UI

Micro interaction for sign up / sign in form. Made with HTML/CSS/SCSS/JavaScript (jquery.js) by Sasha.

See the Pen
Login & Sign Up Form UI
by Sasha (@sashatran)
on CodePen.

 Demo and Code

OBNOXIOUS ERRORS

Form errors with obnoxious.css animation. Made with HTML/CSS/SCSS/JavaScript (jquery.js) by Maria Cheline.

See the Pen
Obnoxious errors
by maria cheline (@mariacheline)
on CodePen.

 Demo and Code

Search Field

HTML and CSS search field. Made by Bahaà Addin Balashoni.

See the Pen
Search Field with Push Menu
by Bahaà Addin Balashoni (@Bahaa-Addin)
on CodePen.

 Demo and Code

Payment Card Checkout

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

See the Pen
Payment card checkout
by Simone Bernabè (@simoberny)
on CodePen.

 Demo and Code

Credit Card Flat Design

Pure CSS credit card flat design. Made by Jean Oliveira.

See the Pen
Credit Card – Pure CSS – Flat Design
by Jean Oliveira (@jeanoliveira)
on CodePen.

 Demo and Code

Material Design Login Form

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

See the Pen
Material Design Login Form
by celyes (@celyes)
on CodePen.

 Demo and Code

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.

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

 Demo and Code

Overlay Signup Form

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

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

 Demo and Code

Sign Up

Sign up form UI with React.js. Made by Jack Oliver.

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

 Demo and Code

UI Credit Card

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

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

 Demo and Code

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.

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

 Demo and Code

Search Bar Animation

Search input with morphing effect. Made by Milan Milošev.

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

 Demo and Code

Search Bar

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

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

 Demo and Code

Checkout Card

Checkout card form with React.js. Made by Jack Oliver.

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

 Demo and Code

Search

Simple search playing around with animations and positions. Made by Aaron Taylor.

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

 Demo and Code

Sign Up Form

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

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

Demo and Code

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.

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

 Demo and Code

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.

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

 Demo and Code

SVG Search…

SVG search icon that transitions to underline on focus. Made by Mark Thomes.

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

 Demo and Code

Credit Card Payment Form

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

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

 Demo and Code

Sign Up Form UI

Login form to the Daily UI Challenge #001. Made by Maycon Luiz.

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

 Demo and Code

Credit Card Payment

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

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

 Demo and Code

Search Input Context Animation

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

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

 Demo and Code

Form Sign Up UI

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

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

 Demo and Code

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.

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

 Demo and Code

Credit Card Checkout

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

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

 Demo and Code

Search UI

Search concept with options. Made by Fabio Ottaviani.

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

 Demo and Code

Search Animation

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

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

 Demo and Code

Credit Card Checkout

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

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

 Demo and Code

Pull-Out Search Bar Concept

HTML and CSS pull-out search bar concept. Made by Asna Farid.

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

 Demo and Code

Animating Search Box

An animating search box made with HTML & CSS. Made by Jarno van Rhijn.

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

 Demo and Code

CSS Search Box

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

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

 Demo and Code

Bouncy Search Box

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

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

 Demo and Code

Credit Card Checkout

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

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

 Demo and Code

Sign Up Form UI

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

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

 Demo and Code

Sign Up Form UI

Daily challenge 001 from dailyui.co. Made by Tyler Johnson.

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

 Demo and Code

Credit Card UI

Credit card UI with HTML and CSS. Made by Star St.Germain.

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

 Demo and Code

Search Transformation

Interactive prototype of search form transformation. Made by Lucas Bourdallé.

See the Pen
Search Transformation
by Kaal (@hecalu)
on CodePen.

 Demo and Code

Log In Form

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

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

 Demo and Code

Search Input Focus Animation

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

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

Demo and Code

Material Login Form

Interactive material design login form. Made by Andy Tran.

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

 Demo and Code

Flat Login Form

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

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

 Demo and Code

Sign Up Form UI

Sign Up Form UI with HTML and CSS. Made by Peter.

See the Pen
Daily UI 001 – Signup Form
by Peter (@petermllrr)
on CodePen.

 Demo and Code

Search Button Animation

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

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

 Demo and Code

Search Input With Animation

Pure CSS Search input with animation. Made by Arlina Design.

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

 Demo and Code

Fancy Forms

Material design style form elements. Made by Adam.

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

 Demo and Code

Single Input 3D Form

Single input 3D form made by Son Tran-Nguyen.

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

 Demo and Code

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.

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

 Demo and Code

Animated Login Form

Experimenting with hidden login forms with animated reveals. This is the first of a few hopefully. Made by Che.

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

 Demo and Code

Flat UI Login Form

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

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

 Demo and Code

Step By Step Register Form

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

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

 Demo and Code

Interactive Form

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

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

 Demo and Code

Step By Step Form

A take on the codrops version with the possibility to go back and confirm all inputs. Made by Jonathan H.

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

 Demo and Code

Step By Step Form

HTML, CSS and JavaScript step by step form. Made by DevTips.

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

 Demo and Code

Sign Up UI

A simple sign up concept. Made by Tobias.

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

 Demo and Code

Sign Up UI

Heavily GSAP’ed sign up form with validation handling for the daily ui challenge. Made by Antonin Cezard.

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

 Demo and Code

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.

See the Pen
Multi Step Form with Progress Bar using jQuery and CSS3
by Atakan Goktepe (@atakan)
on CodePen.

 Demo and Code

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.

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

 Demo and Code

Step by Step Form Interaction

A simple step form for customer experience. Made by Bhakti Al Akbar.

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

 Demo and Code

Interactive Sign Up Form

A concept for an interactive signup form. Made by Riccardo Pasianotto.

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

 Demo and Code

SIMPLE FORMS

Made with HTML/Haml/CSS/Sass/JavaScript/CoffeeScript (jquery.js,jquery.customSelect.js) by Michal Niewitala.

See the Pen
No Questions Asked Form & Magic Focus
by Michal Niewitala 🍋 (@mican)
on CodePen.

 Demo and Code

VALIDATION FORMS

Emoji form validation in pure CSS. Made by Marco Biedermann.

See the Pen
Emoji Form Validation
by Marco Biedermann (@marcobiedermann)
on CodePen.

 Demo and Code