Collection of free HTML and CSS form code examples from CodePen, GitHub, and other resources

CSS-Only Floating Labels

We'll be using several pseudo-selectors to create this effect. This is the only way to achieve this effect without any JavaScript.

Contact Us Form

Bootstrap 5 Login Form

Bootstrap 5 login form with Glassmorphism.

Nice Forms in CSS

Nice Forms - CSS base for forms and inputs. In a nutshell: it provides a sensible input styling 'reset'; get nice looking forms with zero effort; easily customizable with css-variables; perfect for rapid prototyping or tweak it and make it your own; no hacks or unnecessary elements, pure semantics.

Animated Login Form

Neumorphic Form

Glassmorphic Sign in Form

A simple, easy sign in / log in form made with pure CSS, based on glassmorphism.

Placeholders

Slicing Design Subcribe Modal

CSS Newsletter with Animated Floating Input Labels

Move placeholder above the input on focus.

Login Form

Login form. SVG animation.

Form

File Upload

Card Component with Floating Labels

Log In / Sign Up

Login Form

Login form with floating placeholder and light button.

Pupassure Sign Up Form

Abstract Sign Up Form

Neomorphic Form

Less Annoying Form

Flexbox Responsive Form

Animated Login Form

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.

Transparent Material Login Form

Responsive Contact Form

Only SCSS/CSS.

Login Page