33 beautiful CSS Forms (Designs)

css-forms

CSS Forms should not only serve their practical purpose, but can also look very nice on the side! A list of very descriptive forms can be found here!

On many websites and web applications you will encounter form fields. Sometimes they are just simple entries, like a search field or age query. But if you have a whole collection of these fields, they are called forms.

Everyone knows the very simple ones, but can it be a little more fancy? Yes? Great! Because I have made myself on the search and have (in my opinion) very beautiful, user-friendly but also not quite plain forms out and would like to present them to you here.

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Bootstrap MultiStep Form

Author
designify-me

Coded with
HTML, CSS (Bootstrap), JS (jQuery, Bootstrap, jQuery Ease)

#2 Panda Login

Author
Vineeth.TR

Coded with
HTML, CSS (SCSS), JS (jQuery)

#3 Snake highlight

Author
Mikael Ainalem

Coded with
HTML, CSS, JS (anime.js)

#4 Step by Step Form Interaction

Author
balapa

Coded with
HTML, CSS, JS (jQuery)

#5 Credit Card Form – VueJs

Author
Muhammed Erdem

Coded with
HTML, CSS (SCSS), JS (Vue, Vue The Mask)

#6 Multi Step Form with Progress Bar

Author
Atakan Goktepe

Coded with
HTML, CSS, JS (jQuery, jQuery Ease)

#7 Day 001 Login Form

Author
Mohan Khadka

Coded with
HTML, CSS

#8 Credit Card Payment Form

Author
Adam Quilan

Coded with
HTML, CSS, JS (imask)

#9 Interactive Form

Author
Emmanuel Pilande

Coded with
HTML, CSS (SCSS)

#10 Material Login Form

Author
Andy Tran

Coded with
HTML (Pug), CSS (SCSS), JS (jQuery)

#11 Login Form – Modal

Author
Andy Tran

Coded with
HTML (Pug), CSS (SCSS), JS (jQuery)

#12 Form Design

Author
Timurtek Bizel

Coded with
HTML, CSS, JS (jQuery)

#13 Basic hotel booking form

Author
Andi Dysart

Coded with
HTML, CSS (SCSS), JS (jQuery, jQuery UI Autocomplete)

#14 Interactive Sign Up Form

Author
Riccardo Pasianotto

Coded with
HTML (Pug), CSS (SCSS), JS (jQuery)

#15 Login Form

Author
Felix De Montis

Coded with
HTML, CSS

#16 Minimalistic Form

Author
matmarsiglio

Coded with
HTML (Pug), CSS (Sass), JS

#17 React signup form example

Author

#18 3D login form concept

Author
jenning

Coded with
HTML (Pug), CSS (Sass), JS (jQuery)

#19 Unfolding Login Form

Author
hans

Coded with
HTML, CSS (SCSS), JS (jQuery)

#20 Log In Form CSS 2017

Author
linux

#21 Log in / Sign up

Author
Anna_Batura

Coded with
HTML (Slim), CSS (Sass), JS (jQuery)

#22 Login Form with floating placeholder and light button

Author
soufiane-khalfaoui-hassani

Coded with
HTML, CSS

#23 Double slider Sign in/up Form

Author
FlorinPop17

Coded with
HTML, CSS, JS

#24 Login

Author
marcobiedermann

Coded with
HTML, CSS (PostCSS)

#25 Log In/Sign Up – pure css

Author
ig_design

Coded with
HTML, CSS

#26 Slide Sign In/Sign Up form

Author
danielarlert

Coded with
HTML, CSS, JS

#27 Form Switch Animation (2023)

Author
suez

Coded with
HTML, CSS (SCSS), JS (TypeScript)

#28 Flat Login Form

Author
andytran

Coded with
HTML, CSS (SCSS), JS (jQuery)

#29 Responsive Signup/Login form

Author
Mhmdhasan

Coded with
HTML, CSS (Sass), Bootstrap, JS (jQuery)

#30 Material Bootstrap Wizard

Author
creativetim

Coded with
HTML, CSS, JS (jQuery)

#31 Login, Register Form

Author
vikasverma93

Coded with
HTML, CSS, JS (jQuery)

#32 Login/signup form animatino

Author
shayanea

Coded with
HTML, CSS (SCSS), JS

#33 Step by step register form

Author

Coded with
HTML (Pug), CSS (Sass), JS

Which form did you like the most? If you also published an awesome Form on Codepen, feel free to let me know so I can expand this list! 🙂

Note: All forms are all published on codepen.io and not by me.

Not enough yet? Then this could be something for you:

Related Posts
Join the Conversation

1 Comment

Your email address will not be published. Required fields are marked *

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

This can also interest you