80+ Creative HTML CSS Forms Design

by Posted on

HTML CSS Forms – Are you looking for HTML CSS Forms design, If yes then in this post I am going to share hand-picked CSS Form for you. HTML forms are integral part of the web, it’s a powerful and crucial tool for interacting with users. But without some styling and positioning, forms just look awful! So, how do you make it appealing and presentable? This is where the CSS comes into play. In this article I’ve compiled 70+ Form styles which you can directly copy and use it on your website projects. These forms look great on all modern browsers, You can use these CSS Form in your next web based projects.

Creative HTML CSS Forms

Following are the list of popular Creative HTML CSS Forms.

Obnoxious Errors –

Obnoxious Errors

Obnoxious Errors script made with HTML CSS/SCSS JavaScript (jquery.js) and written By mariacheline.


Search Field –

Search Field

Search Field script made with HTML/Haml CSS/Sass JavaScript/CoffeeScript (jquery.js, jquery.customSelect.js) and written By mican.


Subscribe Form –

Subscribe Form

Subscribe Form script made with HTML (Pug) / CSS (SCSS) and written By ahmedhosna95.


Animated Search Box –

Animated Search Box

Animated Search Box script made with HTML CSS JavaScript (jquery.js) and written By elmanifico45.

Login Screen –

Login Screen

Login Screen script made with HTML CSS/SCSS JavaScript (jquery.js) and written By elmanifico45.

Login & Sign Up Form UI –

Login & Sign Up Form UI

Login & Sign Up Form UI script made with HTML CSS/SCSS JavaScript (jquery.js) and written By sashatran.

Invision Login –

Invision Login

Invision Login script made with HTML CSS JavaScript and written By ainalem.

Flexbox Form –

Flexbox Form

Flexbox Form script made with HTML CSS and written By kathykato.

Login form UI Design –

Login form UI Design

Login form UI Design script made with HTML CSS/SCSS JavaScript (jquery.js) and written By elmanifico45.

Search Form –

Search Form

Search Form script made with HTML / CSS and written By melnik909.

Sign-Up/Login Form – DEMO

Sign-Up/Login Form

A design for a sign-up/login form using tabs and floating form labels. – By ehermanson

Animated feedback form – DEMO

Animated feedback form

– By dead_seagull

Flat HTML5/CSS3 Login Form – DEMO

Flat HTML5/CSS3 Login Form

Simple HTML5/CSS3 login form that also works as registration form. You can tweak this form further to use it as part of your web app, website or anything else. – By colorlib

Bootstrap 3 Contact form with Validation – DEMO

Bootstrap 3 Contact form with Validation

A contact form built with Bootstrap 3. Field validation with Bootstrap Validator. – By jaycbrf

Bootstrap Snippet: Login Form – DEMO

Bootstrap Snippet: Login Form

Using default Bootstrap 3.0, here’s a short CSS snippet to style your login form. – By ace-subido

Multi Step Form with Progress Bar using jQuery and CSS3 – DEMO

Multi Step Form with Progress Bar using jQuery and 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. – By atakan

Flat Responsive Form using CSS3 & HTML5 – DEMO

Flat Responsive Form using CSS3 & HTML5

Flat Responsive Form using CSS3 & HTML5 with image background *** Due to the amount of requests I’m getting **** – By rexkirby

Simple Responsive Form – DEMO

Simple Responsive Form

Markup based on Wufoo forms. – By chriscoyier

Elegant Contact Form – DEMO

Elegant Contact Form

Aestetically pleasing contact form – By markmurray

MINIMALISTIC FORM – DEMO

MINIMALISTIC FORM

Simple and beautiful contact form. Useful and easy to modify. – By matmarsiglio

Flat Login Form 3.0 – DEMO

Flat Login Form 3.0

Flat Login Form version 3.0. Everything has been converted to Jade & SCSS. A lot of properties have been removed, as well as unneeded prefixes. – By andytran

Animated login form – DEMO

Animated login form

A simple animated login form – By boudra

Clean Contact Form – DEMO

Clean Contact Form

Clean, responsive contact form design. – By nickhaskell

Login Form – DEMO

Login Form

I built this login form to block the front end of most of my freelance wordpress projects during the development stage. – By frytyler

Expandable Search Form with CSS3 – DEMO

Expandable Search Form with CSS3

This is a Expandable Search Form built with CSS3 – By 912lab

Login Form – Modal – DEMO

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. – By andytran

HTML5 Contact Form – DEMO

HTML5 Contact Form

simple contact form with html5 & css3 – By ssbalakumar

A Circular Form – DEMO

A Circular Form

This interface experiments with user input by implementing a circular form, that rotates as the user advances through it’s path. – By kindofone

Form.io Form Building and Rendering – DEMO

Form.io Form Building and Rendering

This shows off the Open Source Form Builder and Renderer for Angular.js using the Form.io platform. – By travist

Day 001 Login Form – DEMO

Day 001 Login Form

Design is based from dribble.com http://dribbble.com/shots/2125879-Day-001-Login-Form – By khadkamhn

Contact Form – DEMO

Contact Form

Contact form with float labels – By stephanrusu

Material Login Form – DEMO

Material Login Form

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. – By andytran

AngularJS Form Validation – DEMO

AngularJS Form Validation

– By chrisoncode

Contact Form Template – DEMO

Contact Form Template

HTML/SCSS/JS Dynamic CSS classes for labels based on input field’s value. Fork on Github: https://github.com/northerli/Contact-Form-Template – By see8ch

Interactive Sign Up Form – DEMO

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 – By rkpasia

Elegant Login Form – DEMO

Elegant Login Form

Just a basic elegant and fancy login form ^.^ – By reidark

Login & Register form – DEMO

Login & Register form

Kill two birds with one stone… The form will switch from login to register, and back, based on if the user is already “registered” – By ianpirro

Animated search Form – DEMO

Animated search Form

– By CBeghin

RESPONSIVE MATERIAL DESIGN CONTACT FORM – DEMO

RESPONSIVE MATERIAL DESIGN CONTACT FORM

Responsive Material design form using by jQuery and sass. – By nikhil8krishnan

Sign Up Form – DEMO

Sign Up Form

INSPIRED BY SEB KAY’S ‘SIGN UP FORM’ https://dribbble.com/shots/1776663-Purple-Sign-Up-Form https://dribbble.com/shots/1779149–Free-PSD-Purple-Sign-Up-Form-Payment-Details – By josemc

Calm breeze login screen – DEMO

Calm breeze login screen

A ultra simple login screen on a calm breezy day, – By Lewitje

Contact form with filter validation and captcha code – DEMO

Contact form with filter validation and captcha code

In this pen I use jQuery to code contact form with captcha code and custom filter validation for other fields. – By mel

Glowing Pulse Form – DEMO

Glowing Pulse Form

A simple, centered form with a pulsing glow effect on the input during focus. This was an entry for a WebDesign Tuts post here: http://webdesign.tutsplus.com/articles/workshops/community-project-style-a-simple-search-form/ – By jackrugile

Beautiful CSS3 Search form – DEMO

Beautiful CSS3 Search form

http://www.red-team-design.com/design-a-beautiful-css3-search-form – By Memphis

Responsive Login Form – DEMO

Responsive Login Form

A pretty login form, that you can try to a certain extent of course. – By DominicFrancois

Responsive Contact Form with Map – DEMO

Responsive Contact Form with Map

Contact form inspired by a dribbble by Ramil Derogongun https://dribbble.com/shots/1356864-Contact-Us – By lentilz

Basic hotel booking form – DEMO

Basic hotel booking form

Temp hotel booking form with floating labels – By andiio

3D login form concept – DEMO

3D login form concept

Fill in the form and click login and see what happens! – By jenning

Form Design – DEMO

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. – By Timurtek

Elegant Contact Form – DEMO

Elegant Contact Form

pleasing contact form – By GrandvincentMarion

Urpinion — Form – DEMO

Urpinion — Form

Mockup of Urpinion’s full-page forms. – By cbp

Simple HTML/CSS Contact Form – DEMO

Simple HTML/CSS Contact Form

Clean and minimal HTML/CSS contact form with minimal styling to be used on websites, templates and elsehwere. – By colorlib

Interactive Form – DEMO

Interactive Form

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

Login & Signup Form – DEMO

Login & Signup Form

A popup login & signup tabbed form. Originally created by Claudia Romano over at CodyHouse. Modified for personal use. – By emilcarlsson

Transparent Contact Form – DEMO

Transparent Contact Form

This is a transparent contact form. Colors change if you change the image background. Get the free PSD file here http://drbl.in/gxZR – By luismruiz

Under the sea contact form – DEMO

Under the sea contact form

Contact form with custom jQuery form validation. Plus some simple CSS3 animations. – By geertjanhendriks

Login Form – DEMO

Login Form

Does this need explanation? (Updated 1/28/2016) – By miroot

Interactive Form – DEMO

Interactive Form

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

Step by Step Form Interaction – DEMO

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. – By balapa

Registration Form – DEMO

Registration Form

– By afirulaf

Expanding Contact Form – DEMO

Expanding Contact Form

A functional (front end only) expanding contact form with jQuery validation. Based on my other pen Expanding Card | Material Design. I might end up using this, so write a comment if you find any bugs. – By woodwoerk

Flat UI Login Form – DEMO

Flat UI Login Form

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

React signup form example – DEMO

React signup form example

– By mikepro4

Form fields with material design and video background, in pure CSS – DEMO

Form fields with material design and video background, in pure CSS

I’ve created input, textarea, select, checkbox and radio fields in the material style, without (much) Javascript. MIT-Licence. Source taken from https://codepen.io/jonnitto/project/editor/XRPjxx – By jonnitto

Credit Card Payment Form – DEMO

Credit Card Payment Form

Wanted to work with some masking so made a payment form so, using vanilla JS and the imask.js library, made a fairly simply payment form that uses regex patterns to detect the credit card type as the user is inputting values and properly applies the relevant spacing associated with that brand. Also wanted to do a smidge of style flair so made a simple SVG card that changes as the user fills out the form. – By quinlo

Flat Login Form – DEMO

Flat Login Form

Just a random login form with a video background. Enjoy! – By andytran

ACCOUNT REGISTRATION FORM – DEMO

ACCOUNT REGISTRATION FORM

Here is an account registration form which can be used for registering new users, this form has been optimized for Chrome and Firefox! – By ScottMarshall

Simple Login Form Template – DEMO

Simple Login Form Template

This is just a simple and easy to use form developed for any website that needs a useable login form. In the future, I would like to add form validation and tool tips. – By banunn

Login/Registration Form Transition – DEMO

Login/Registration Form Transition

Based on Dribbble shot by Barbara Morrigan – https://dribbble.com/shots/3306190-Login-Registration-form – By suez

Bootstrap3 Form – DEMO

Bootstrap3 Form

Nice Bootstrap3 Form – By jasondavis

Login Form – DEMO

Login Form

Simple flat login form. – By SirWags

Contact Form Bootstrap 3 – DEMO

Contact Form Bootstrap 3

100% responsive contact form built with bootstrap 3 – By ShuvoHabib

Input form with progress bar – DEMO

Input form with progress bar

A simple form with floating labels and an animated progress bar. – By carlinscuderi

Form Progress Bar – DEMO

Form Progress Bar

Simple form progress bar. Inspiration from dribbble. – By himanshu

Material Design Login Form – DEMO

Material Design Login Form

– By joshadamous

Login Form 1 – DEMO

Login Form 1

Remake of the first Login Form of the Series of Dribbble shots. Dribbble shot is here: http://dribbble.com/shots/1197333-Free-Psd-Login-Form-1 – By dervondenbergen

Login form using HTML5 and CSS3 – DEMO

Login form using HTML5 and CSS3

This is an example how to create a simple login form using HTML5 and CSS3. This form uses pseudo elements (:after and :before) to create the multi page effect. These elements are rotated using the CSS3 transform property. This form uses HTML5 to make validation and submission easy. – By bbodine1

Animated Login Form – DEMO

Animated Login Form

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

Forms-Floated Labels – DEMO

Forms-Floated Labels

I have seen the floated label patterns done a few times before me around the web. So, i’m not claiming to be the inventor. However there was a particular interaction I wanted in a form I was working on, so I figuredI would share what i came up with. Enjoy! – By soulrider911

Spectre sign up form – DEMO

Spectre sign up form

Spectre sign up form. – By alexdevero

Interesting Sign In Form – DEMO

Interesting Sign In Form

A form with some interesting techniques… such as the placeholder animation and also the cutout legend in the fieldset. – By simeydotme

Sliding Search Form – DEMO

Sliding Search Form

A sliding search form for mobile devices. – By Linuance

Form with SVG radio buttons – DEMO

Form with SVG radio buttons

I made this pen to practice writing more semantic and accesible html. I previously made a pen about: CSS radio buttons. So because of that, I think a form could be a great start for me to practice and learn how to write better HTML. – By AngelaVelasquez

Login form – DEMO

Login form

Animation Login form, Registration, – By dicson

Pure CSS3 Login Form – DEMO

Pure CSS3 Login Form

Example of simple login form with SVG icon. In future i would like to add tabs functionality to swich from sign in to sign up and back. – By danzawadzki

Snake highlight – DEMO

Snake highlight

Slithering highlight in login form – By ainalem

Simple, flat contact form – DEMO

Simple, flat contact form

Working on a better looking form for work. This is how I like it, though unlikely how it will be implemented. – By ZachSaucier

Material Design Form Inputs – DEMO

Material Design Form Inputs

Material Design Form Inputs With Validation Errors – By mithicher

Transparent login form – DEMO

Transparent login form

Best viewed in Chrome. Design is from Bojana Cakic’s dribbble shot. http://dribbble.com/shots/911652-Transparent-organic-form – By innerstorm

Single input 3D form – DEMO

Single input 3D form

Not my own. I only collected it from http://thecodeplayer.com/walkthrough/single-input-3d-form – By sntran

Registration Form Desgin – DEMO

Registration Form Desgin

A general registration form design from where user can create his/her account on your site using his/her email address or using facebook or twitter account – By _shree33

JavaScript: serialize a form as JSON – DEMO

JavaScript: serialize a form as JSON

– By gabrieleromanato

Form Feedback – DEMO

Form Feedback

Feedback animations using jQuery for invalid input and for sending the form successfully. – By CrocoDillon

Simple and light sign up form – DEMO

Simple and light sign up form

I’ve not made a pen in a while. I miss making random forms… so I er… made one. Happy holiday, yo! – By dope

I Hope you liked Hand-picked list of CSS Form, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.

Published by admin