ULTIMATE SALE Up to 90% OFF Web Hosting + Free Domain ( Free SSL & CloudFlare included ) Start Now
w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
No Result
View All Result

28 CSS Forms

by CV
December 13, 2020
in Inputs

Collection of free hand-picked CSS Forms. All the collections are Included with the demos and source codes.

RelatedPosts

20 Cool jQuery Toggle Menu

15 Cool jQuery Toggle Switches

13 Cool CSS Emoji Rating

9 Best JavaScript Toggle Menu

11 Better jQuery Star ratings

27 Best CSS toggle menus

Author

  • Icebob
  • February 6, 2016

Link

Download

Made with

  • Pug / SCSS

About the Code

Login page with blur background

More info: Link

Dependency: –

Author

  • Swapnil
  • January 29, 2020

Link

Download

Made with

  • HTML / SCSS

About the Code

Neomorphic Form

More info: Link

Dependency: –

Author

  • KovJonas
  • November 4, 2015

Link

Download

Made with

  • HTML / CSS

About the Code

Material design sign up form

This is a clear and simple material design style sign up form.

More info: Link

Dependency: –

Author

  • Ryan Mulligan
  • March 31, 2020

Link

Download

Made with

  • Pug / SCSS / JavaScript

About the Code

Password Input Light

Let the light reveal your password! A silly experiment using a show/hide toggle on a password input.

More info: Link

Dependency: –

Author

  • Andrew Tunnecliffe
  • July 16, 2015

Link

Download

Made with

  • HTML / CSS

About the Code

Nice, compliant input boxes

Nice input box with a lot of styling based on sibling selectors and psuedo classes. CSS only, and WCAG 2.0 AA compliant!

More info: Link

Dependency: –

Author

  • Emmanuel Pilande
  • March 8, 2016

Link

Download

Made with

  • HTML / SCSS

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

More info: Link

Dependency: –

Author

  • afirulaf
  • April 30, 2014

Link

Download

Made with

  • HTML / CSS

About the Code

Registration Form

More info: Link

Dependency: –

Author

  • Rafael González
  • December 21, 2015

Link

Download

Made with

  • HTML / SCSS

About the Code

Pure CSS Steps

The “Step By Step” pattern is usually 100% developed with JavaScript but you can use CSS too.

Enjoy this example of “what can be done” just with SASS, simulating a “sign-up” process.

More info: Link

Dependency: –

Author

  • Akhbar
  • September 21, 2016

Link

Download

Made with

  • HTML / SCSS

About the Code

Fancy Text Inputs

Using the required hack

More info: Link

Dependency: –

Author

  • Jasper LaChance
  • March 14, 2016

Link

Download

Made with

  • HTML / CSS

About the Code

Colourful Registration Form

Using only HTML and CSS here is a colorfully styled form. The simplicity yet the stylish appeal of this form can be used virtually anywhere for more than just registrations.

More info: Link

Dependency: –

Author

  • Flkt Crnpio
  • February 20, 2019

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Toggle Login Form

More info: Link

Dependency: jquery.min.js

Author

  • Vimalraj
  • June 7, 2020

Link

Download

Made with

  • HTML / Sass

About the Code

Pure CSS Login forms

More info: Link

Dependency: –

Author

  • Rex Kirby
  • September 17, 2014

Link

Download

Made with

  • HTML / CSS

About the Code

Flat Responsive Form using CSS3 & HTML5

Flat Responsive Form using CSS3 & HTML5 with image background. I’m only sending the PHP and the AJAX validation to people who are willing to make a donation. Sorry for this but I spent a long time making it and get requests on a daily basis.

More info: Link

Dependency: –

Author

  • mohamed islem
  • December 9, 2019

Link

Download

Made with

  • HTML / Stylus

About the Code

Login Form + Animation

More info: Link

Dependency: –

Author

  • alphardex
  • July 27, 2020

Link

Download

Made with

  • HTML / SCSS

About the Code

Transparent Material Login Form

More info: Link

Dependency: aqua.min.css

Author

  • Xavier
  • October 24, 2015

Link

Download

Made with

  • HTML / CSS

About the Code

Log In Panel

More info: Link

Dependency: –

Author

  • Harvey Tolosa
  • April 16, 2020

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

SIMPLE LOG-IN FORM

More info: Link

Dependency: –

Author

  • Swarup Kumar Kuila
  • June 30, 2020

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Log In CSS Forms

Log In Forms

More info: Link

Dependency: CSS – bootstrap.min.css, all.min.css, font-awesome-animation.min.css JS – jquery.min.js

Author

  • Lewi Hussey
  • May 1, 2015

Link

Download

Made with

  • HTML / Less / JavaScript

About the Code

Calm breeze login screen

A ultra simple login screen on a calm breezy day,

More info: Link

Dependency: jquery.min.js

Author

  • Soufiane Khalfaoui HaSsani
  • April 7, 2020

Link

Download

Made with

  • HTML / CSS

About the Code

Login Form with floating placeholder and light button

More info: Link

Dependency: –

Author

  • Tiffany Rayside
  • February 5, 2016

Link

Download

Made with

  • HTML / SCSS

About the Code

SignUp

More info: Link

Dependency: –

Author

  • Aaron Iker
  • March 17, 2020

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Password error & success animation

More info: Link

Dependency: inter.min.css

Author

  • Jack Oliver
  • August 21, 2016

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

React Daily UI – 002 – Checkout

Day 2 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 I’m building a checkout card for a hotel stay. Cool.

More info: Link

Dependency: font-awesome.min.css, JS – react-with-addons-0.14.7.js, react-dom.min.js, zepto.min.js

Author

  • Tommy Hodgins
  • August 23, 2016

Link

Download

Made with

  • HTML / CSS

About the Code

Credit Card Recovery Form: Step 1

More info: Link

Dependency: Google Fonts 1, Google Fonts2

Author

  • Patrick Stillhart
  • December 9, 2017

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Simple register css form

This Pen has no libraries except fonts

The answers are stored in the questions array

More info: Link

Dependency: ionicons.min.css, font family:Roboto:400,700

Author

  • Sergei
  • July 12, 2016

Link

Download

Made with

  • Pug / Sass

About the Code

Registration form

Static login form with ability sing up by socialbutton

More info: Link

Dependency: –

Author

  • James Nowland
  • July 20, 2016

Link

Download

Made with

  • HTML / SCSS

About the Code

Login Form CSS only validation

Combining multiple concepts together of visible password, CSS Validation, Sibling Selectors, checkbox hacks this enables a CSS only validation for a login form.

:invalid:not(:focus):not(:placeholder-shown)

This also has the show/hide pattern using CSS with a checkbox hack withtext-security: disc

More info: Link

Dependency: –

Author

  • Aditya Bhandari
  • March 11, 2016

Link

Download

Made with

  • HTML / SCSS

About the Code

DailyUI #001 – Sign Up Form

More info: Link

Dependency: font-awesome.min.css

Tags: CSS formsforms
Previous Post

11 Best Multiselect Dropdown and fields

Next Post

20 CSS Contact Forms

Related Posts

jQuery Toggle Menu
Inputs

20 Cool jQuery Toggle Menu

January 17, 2021
jQuery Toggle Switches
Inputs

15 Cool jQuery Toggle Switches

January 17, 2021
Cool CSS Emoji Rating
Inputs

13 Cool CSS Emoji Rating

January 14, 2021
JavaScript Toggle Menu
Inputs

9 Best JavaScript Toggle Menu

January 17, 2021
jQuery Star ratings
Inputs

11 Better jQuery Star ratings

January 14, 2021
CSS toggle menus
Inputs

27 Best CSS toggle menus

January 17, 2021
Next Post
CSS Contact Forms

20 CSS Contact Forms

Discussion about this post

Popular Posts

41 Multi step HTML forms

92 CSS Text styling and Effects

99 Hand-picked CSS Card Collections

20 HTML & CSS pricing tables

11 CSS Shopping Cart UI/UX

76 Hand Picked CSS Music Players

14 CSS Divider Collections

Simple php login and logout script using php session and database using MySQL

Tags

Angularjs (20) AngularJS Tutorials (16) animation (70) animation examples (14) beautiful (12) Button (24) button hover effect (15) Buttons (24) Calendar (38) calendars (38) cards (24) click animation (12) click buttons (19) CSS (128) css3 (20) css buttons (54) css calendar (36) css calendars (37) css effects (22) css hover effects (31) demo (18) effect (33) effects (41) essentials (48) Free Tool (13) hover (23) hover animation (31) Hover effects (40) html (86) inputs (14) Javascript (68) jquery (26) js (18) loaders (14) menu (13) mouse hover effects (36) navigation (14) pure (13) simple (13) text effects (24) Toggle Switches (13) tool (12) tutorial (32) tutorials (14) YouTube (13)
No Result
View All Result
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders

© 2020 w3tweaks

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist