95+ CSS Forms - Free Code + Demos

Cute login form with vertical wave animation

Day five down! I started this pen off fairly early in the day but I didn't get to finish all of the functionality I wanted for it. I would have liked to add the other cards to it! Maybe tomorrow I'll just finish this! Really love the colours! So far I think the 100 days of code is he...

Read More

Day 2 - 100 Days Technically it's after midnight, but I started this pen at 11:40 so it counts! It was a long day! Today I just wanted to play with fun colours and another quick form. I am going to focus on forms for the first seven days and then move on to another topic. I think tomorr...

Read More

I wanted to play with color today and a form. This is a pretty fun result after about an hour and a half this morning. I was at work WAY too early and just dove into this quick sketch to warm up. This semester I am taken a class that helps flesh out our careers as software engineers. One...

Read More

This animated login form is built just with HTML and CSS. No SVG, no JavaScript, no GreenSock. The character smiles when the login form is correct. Read this dev.to post for more details and some catches (e.g. the show password functionality only works on Chrome and Webkit browsers).

Only SCSS / CSS.

Trendy Login screen User Interface

Login form UI Design using html and sass and jquery

Travel landing page with a form made with Flexbox.

animated search box using Html and Css and JQuery

I wanted to write in pure javascript but I ended up using jQuery. Obnoxious.css animation by Tim Holman. http://tholman.com/obnoxious/

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

Read More

Inspired by https://dribbble.com/shots/2015464-Sport-Social-Club-WIP

Day 1 of the ReactJS DailyUI project. I'm going to be making 100 different React pens over the next 100 days, in order to get better. Today tackles the pesky ReactCSSTransitionGroup which I struggled with for a while, and how to get it to trigger on initial load.

Search input with morphing effect.

SVG search icon that transitions to underline on focus. Inspired by Dribble "Search..." By: Anish Chandran Link: http://drbl.in/nRxe

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

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 :) I hope you like it

My login form to the Daily UI Challenge #001.

Non functional UI credit cards payment. Coded for practice raw JS for DOM manipulation. Please view it on Chrome. inspired by: https://dribbble.com/shots/2140009-Day-4-Credit-Card-Payment-Rebound

CSS icons context animation Telegram App-like search loading effect Enjoy! :)

Sign In & Sign Up Form concept , click on login and Sign Up to changue and view the effect Update - Added background for text - ( Thanks @JacobLucado) https://twitter.com/thedany_Orlan2/status/708656737365012480

Search concept with options

An animating search box made with HTML & CSS

It searches things, probably something similar been done before

View it at dribbble or Behance

Interactive prototype of search form transformation. Originally made by Alex Pronsky (https://dribbble.com/aPronsky). Dribble item: https://dribbble.com/shots/2308755-Search-Transform-Principle-Freebie

Interactive CSS animation of search icon morphing into search field. best viewed in Chrome

A simple animation for the focus event on a search input.

Interactive Material Design Login Form. This could be a lot more smoother, which is why I'll be updating it sometime this week when I have free time. However, here's the first version of it. Close button should function properly now. Design by Boris Borisov @ MaterialUp http://www.mater...

Read More

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

Material design style form elements

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

Read More

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

Self Contained SCSS. Forked from http://cssdeck.com/labs/flat-ui-login-form by: http://codepen.io/davideast

Hype hype hype ... this code finally works :D Being a total newbie in Javascript I'm so happy I managed to create this (almost) all by myself. Thanks @Syltaen for guiding me through the last few bugs :3

An interactive multi step form based on DevTips tutorial - https://codepen.io/devtips/pen/zBXWZG

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

A simple sign up concept

Heavily GSAP'ed sign up form with validation handling for the daily ui challenge

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.

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.

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

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

CSS form style ready for use, code formatted well so you can use it easly. you can add you custom fields, enjoy.

An HTML Form to use as a template

this is a simple and minimal register form just whit html and css.

Form built with CSS Grid

This is a simple and modern looking log in / sign up form which allows to log in / sign up with google account or the user can provide email.

This project is from freeCodeCamp for the 'Responsive Web Design' certificate. It is made with HTML and CSS. This Survey Form project contains information obtained from the freeCodeCamp examples.

Inspired by https://dribbble.com/shots/1361064-Milkshake-Beta?list=users&offset=3. This is my second coding project.