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

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

A simple credit card form made with CSS for products.

A neat and clean credit card payment form that had the structure of an actual 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 register form using CSS animations and Javascript for validation.

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.

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

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.

Interactive Material Design HTML login form styled with CSS.

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

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

An elegant signup form built with CSS and Javascript.

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

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.

An interactive multi step CSS form using simple JS.

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

Simple form based on Andreas Storm work.

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

This credit card checkout form example is just for fun.

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

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

A simple react signup form styled with some CSS.

Simple sign up concept form for mobiles or tablets.

Material design style form elements styled with CSS.

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

Transparent login form suitable for websites.

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

A flipping contact form developed with SCSS and simple Javascript.

Credit card checkout form for all types of prodcuts.

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

A simple contact form made with pure CSS.

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

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

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

Another sign up form from a Daily UI Challenge.

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

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

A React checkout form made for eCommerce websites.

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

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

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

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

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

A simple sign up form with HTML validation.

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.

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

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

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.

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

Contact Us form with CSS envelope animation

Just a random login form with a video background. Enjoy!

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

Based on this dribbble shot: http://drbl.in/nFYk results this CSS login form.

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

Simple and beautiful contact form. Useful and easy to modify.

See the Pen Minimalistic Form by matmarsiglio (@matmarsiglio) on CodePen.

A single input 3D form collected from http://thecodeplayer.com/walkthrough/single-input-3d-form.

Clean and simple credit card payment checkout form, with CSS3, HTML5, and little bit of jQuery, just to make slightly better UX. :)