CSS Forms From CodePen

An HTML & CSS form is an essential part of every user interactions. Whether you use them for log ins and sign ups, comments, checkouts, forms have the ability to determine the success of a website or an app. So it’s important to get the inputs, radio buttons & checkboxes right.

That’s why I decided to put together a list of CSS forms that I found on CodePen.

Simple HTML & CSS Form

Simple and easy form with just HTML & CSS. This piece is for absolute begginers. Once you see the basics you'll get whole new world opened to play with. Enjoy.

See the Pen Simple HTML & CSS Form by Srcko85 (@Srcko85) on CodePen.

Step by Step Form Interaction

A simple step form for customer experience. The purpose of this form is to get the feedback from user for the store.

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

CSS Snackables – Week 2

A simple credit card form made with CSS for products.

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

Credit Card Payment Form

A neat and clean credit card payment form that had the structure of an actual credit card.

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

Credit Card

A dark themed credit card form styled with CSS where you can select your payment method.

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

Step by Step CSS Register Form

Step by step register form using CSS animations and Javascript for validation.

See the Pen Step by Step CSS Register Form by JeromeRenders (@JeromeRenders) on CodePen.

Sign In Button and Form

I just wanted to play around with a couple of button ideas. The button has a hover state which pulls a skewed transparent white overlay over the When the button is clicked, the sign in form appears from within the button.

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

Vintage Inspired Contact Form

A simple, yet effective mobile-friendly contact form. Validation not included, but will be made available upon request.

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

Interactive Form

Interactive input form built with just CSS. Abusing focus state & labels to handle transitions & navigation.

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

Material CSS Login Form

Interactive Material Design HTML login form styled with CSS.

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

Material Design Login Form

A neat Material Design side login form built with CSS and JS.

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

Animated CSS Login Form

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

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

Daily UI 001 – Signup Form

An elegant signup form built with CSS and Javascript.

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

CSS Credit Card Payment

Non-functional UI credit cards payment. Coded for practice raw JS for DOM manipulation. Please view it on Chrome.

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

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.

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

Interactive Form

An interactive multi step CSS form using simple JS.

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

Simple Dark Form

Simple form based on Andreas Storm work.

See the Pen Simple Dark Form by cguillou (@cguillou) on CodePen.

Daily UI #002: Credit Card Checkout

This credit card checkout form example is just for fun.

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

DailyUI #001 – Sign Up

My login form to the Daily UI Challenge that looks like a folder.

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

Flat UI Login Form

A neat flat UI forms that contains login, register and reset password tabs.

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

React Daily UI – 001 – Sign Up

A simple react signup form styled with some CSS.

See the Pen React Daily UI – 001 – Sign Up by jackoliver (@jackoliver) on CodePen.

Daily UI #001 Sign Up

Simple sign up concept form for mobiles or tablets.

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

Fancy HTML Forms

Material design style form elements styled with CSS.

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

CSS Log In Form

Transparent login form suitable for websites.

See the Pen CSS Log In Form by nedev (@nedev) on CodePen.

Daily UI #002 Credit Card Checkout

A rotating skewed credit card checkout form styled with CSS and JS.

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

Sass Flip Contact Form

A flipping contact form developed with SCSS and simple Javascript.

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

Daily UI #002 – Credit Card Checkout

Credit card checkout form for all types of prodcuts.

See the Pen Daily UI #002 – Credit Card Checkout by koenigsegg1 (@koenigsegg1) on CodePen.

Step By Step Form

HTML step by step form built with Javascript and styled with CSS.

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

Daily UI 028 Contact Form

A simple contact form made with pure CSS.

See the Pen Daily UI 028 Contact Form by arianalynn (@arianalynn) on CodePen.

Contact form

Just another contact form with neat CSS animations and built with React.

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

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

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

Daily UI 001 Sign Up Form

Another sign up form from a Daily UI Challenge.

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

FEDM – Daily UI 001

A cool register form with completion progress. This resource was built with jQuery and styled with SCSS.

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

Credit Card Checkout – Daily UI | #002

A credit card checkout form that looks like a Visa card.

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

React Daily UI – 002 – Checkout

A React checkout form made for eCommerce websites.

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

Pure CSS Form validation

Using required, :valid/:invalid and :placeholder-shown, we can get pretty good results.

See the Pen Pure CSS Form validation by chriskirknielsen (@chriskirknielsen) on CodePen.

Daily UI 002 – Credit Card

A payment details form styled with CSS and with zero JS.

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

Credit Card Checkout – Daily UI #002

A credit card checkout form for products made with no JS.

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

Expanding Contact Form

A functional (front end only) expanding contact form with jQuery validation.

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

Daily UI | #001 – Sign Up

A simple sign up form with HTML validation.

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

Multi Step Form With Progress Bar Using jQuery & 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.

See the Pen Multi Step Form With Progress Bar Using jQuery & CSS3 by atakan (@atakan) on CodePen.

Step by Step Form

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

See the Pen Step by Step Form by Dunner (@Dunner) on CodePen.

Interactive Sign Up Form

A concept for an interactive signup form. I've taken the inspiration by this shot https://dribbble.com/shots/2372516–5-Subscribe-Form.

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

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. I just used a login page as an example. For larger forms, this technique would be great to save space.