40 CSS forms that can not be missing on any website

login form

If there is something that is usually very common for any type of website, these are the forms. The forms that we use to fill in the contact information, enter bank details, log into a social network or simply perform a search like the one we usually do daily in the Google search engine.

So today we are going to show you 40 forms in CSS ranging from contact forms, credit card checkouts, logins, simple, subscription or even validation. A series of forms of great elegance and style to give that special point to your website, regardless of the theme.

Minimalist contact form

form-minimalist

A simple contact form with a great variety of effects such as floating marks or line animations. Elegant CSS code with a bit of JavaScript. If you are looking for a minimalist contact form this is perfect for you.

CSS
Related article:
23 high-quality CSS libraries for web design

Minimalist form

Minimalist

Other minimal form, although only in CSS to be a simple and high-effect form. It does not have the minimalist animations of the previous one, but it fulfills its objective very well.

Vintage contact form

Vintage

Vintage contact form, a very elegant design. Responsive for those websites to be seen from mobile, although it does not include validation.

Letter contact form

Menu

This Contact Form it has a rather curious animation: a letter is formed. Simple, but very useful with a lot of color.

Hover Cards
Related article:
27 free HTML and CSS cards for blogs, e-commerce and more

Expanded contact form

Expansive contact form

This contact form expanded It is only front end and has the validation with jQuery. We click on the floating button and the form will appear with a vibrant animation. Outstanding.

Contact Form UI

Contact form

Contact Form UI it is a form made in HTML and CSS. It stands out for being a simple contact card that we can fill so that only the text field changes when it is clicked.

Payment card checkout

Checkout payment card

Un payment card checkout made in HTML, CSS and JavaScript which distinguished by rotating animation the credit card when we press on the CVC or security number field.

Credit card flat design

Pure CSS credit card

Pure CSS for a checkout for credit cards in flat colors. Colorful and very simple that is capable of denoting quality and professionalism.

Credit card UI

snackables

Another credit card in HTML, CSS and JavaScript that stands out for how good it is chosen the overall design. We forgot about animations in this piece of code for your website. Download it at this link.

react checkout

React

react checkout, made with React.js, is distinguished by the side picture we can customize with the services or products that we sell in our eCommerce.

Checkout payment card

Popov

This checkout stands out for the possibility of putting an image on the card. A simple and clear form made with CSS3, HTML5 and a bit of jQuery. High quality and different from the rest of the checkouts on this list. You can download here this payment card checkout.

Credit card payment

Stripe

This credit card payment form is programmed to practice with JavaScript for DOM manipulation. You can recall in the design the elegant code of Stripe, the digital banking service that is getting closer to PayPal.

Credit card

Daily

An elegant checkout for card payment different from the others and based on a credit card located at the top So that below we have the entire form with the different data that the client has to fill in to make the payment in the eCommerce.

Step by step form

Step by step

Un step by step form for registration done in HTML, CSS and JavaScript. Four steps for each of the points located on the left side. Well finished animations for a highly finished form. Highly recommended

Interactive form

Interactive

Un interactive form multi-step made with HTML, CSS and JavaScript. It stands out for the transition animation between each of the steps. It has an elegant touch that will not go unnoticed.

Step by step form

Step by step

This step by step form stands out for being quite creative. You will answer the questions so that you can return to them at any time by being visually present on the screen all the time.

Step by step

Step

Step by step form done in HTML, CSS and JavaScript. It is characterized by the transition animation between each of the steps.

Multi step Jquery form

JQuery multi step

If you have a very long form, This is perfect for different sections with a very striking progress bar. Based on jQuery and CSS, it stands out for its design and for its great elegance.

UI animation form

Animation form

The transitions of this UI animation form are based on Domink Marskusic. Attention to the creative effect of the blue box when we click on some of the two login or session fields.

Account creation / login form

Login Creation

A gimmick login and account creation which is based on animation what happens between those two sections. Very current and striking presence to be done in HTML, JavaScript and CSS.

Snake Highlight

Snake

Snake Highlight is one of the most striking login of any list that stands out for the elegant animation that arises quickly the moment we click on one of the two fields.

Login screen

Login

Divine this design login screen so are their animations and how creative it is. If you want to be the most current when it comes to web design, this form cannot be missing. Indispensable.

Login UI design

login form

Designed using HTML, Sass, and jQuery. Login UI design es elegant and clear on the subject that does not lack subtle animations to become another of the favorites on the list.

Login and UI account creation

Login registration

A special login design and account creation UI  for the colors and for presenting in one big card the two sections. Another of the most beautiful in the execution that we cannot miss. Made in HTML, CSS and JavaScript.

obnoxious errors

obnoxious

obnoxious errors It is a great login because of the animation of fields with obnoxious.css. Original to be a fun, carefree and very different login. Original without any doubt for our website.

CSS HTML Login

CSS

A curious login by the different icons that show each of the fields to take the visitor wherever we want. The shades chosen in the colors also stand out. It does not have any animation. It is made in HTML and CSS to implement it on the website for a client or our own.

Modal login form

Modal

This Modal login form is inspired by the language of design known for Material Design. We have seen it in a multitude of applications on mobile devices. In this code we have a login panel and a registration panel that is hidden by default. The registration panel can be activated by clicking on the blue column on the right side. It has a great animation to be a very special and striking login.

form flexbox

flexbox

We start the search forms with this form based on flexbox. It stands out for the red color of the «search» and for little more for an elegant search field for your website.

Animated box

Animated box

With this animated box click on the magnifying glass icon and a bright blue animation will appear so that we only have to type the search that we are going to carry out on the website. Made with HTML, CSS and JavaScript.

Search field

Push search

Una big line runs across the screen so that when we press it we start typing the search. A pickup button to define this simple search form.

Simple search field click on

Waze

Simple search field click on is based on an interaction seen in the Waze Driver Community App vehicular. All icons and images are made with CSS. It stands out for those icons that allow us to carry out specific searches for a product or service. Striking because of how cool it is.

CSS text input effect

CSS input

CSS text input effect includes a series of animations in text and search drawer to be a careful seeker in form.

Full screen search

Full screen search

This entry from full screen search it works with any type of layout or position. Requires styles container-specific and search-overlay element to be located in the root. It is characterized by a bouncing animation the moment we press the search button.

Search

Search

Un search form simple that he likes to play with the different positions and animations. We click on the search button and the complete drawer appears to type the words. Very current and highly recommended for how simple it is.

don't ask

don't ask

no question es simple form with text field and the option to select some answers for the user to select them. Great deal visually to be one of the best.

Popup subscription form

Subscribe

With these popup subscription form, we click on the floating button and it will take us to form with a very funny tone and a field where to enter the email. Perfect for email marketing.

Subscription box UI

Subscription

Una subscription box with an alarm bell and little more than flat colors In the design.

CSS subscription box

Subscription

Una smart subscription box for the fact of use gradients for the subscribe button just like the purple hue of the field.

Subscription box

Subscription box

Una simple subscription box but of great effect by design.

EMOJI validation form

EMOJI

In pure CSS this validation form to create the key or password. As we write, the emoji will measure the security level of the form. Funny and curious without a doubt.

Do not miss this list of 23 animated arrows in CSS.


Leave a Comment

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

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   John Jose Perez said

    Excellent sample of examples presented here. The variety and adaptation to different contexts and the best thing is that the link of each title includes the demo and the source code although you should highlight it with a button «See demo» because it was out of curiosity that I discovered it in the title. Thanks for the contribution. Greetings from Caracas.

  2.   Rudolph Gallegos said

    It helped me a lot, thank you.