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
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.
Minimalist form
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 contact form, a very elegant design. Responsive for those websites to be seen from mobile, although it does not include validation.
Letter contact form
This Contact Form it has a rather curious animation: a letter is formed. Simple, but very useful with a lot of color.
Expanded 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 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
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 for a checkout for credit cards in flat colors. Colorful and very simple that is capable of denoting quality and professionalism.
Credit card UI
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 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
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
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
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
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
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
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 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
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
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
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 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
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
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
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 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
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
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
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
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
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
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 text input effect includes a series of animations in text and search drawer to be a careful seeker in form.
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
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
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
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
Una subscription box with an alarm bell and little more than flat colors In the design.
CSS subscription box
Una smart subscription box for the fact of use gradients for the subscribe button just like the purple hue of the field.
Subscription box
Una simple subscription box but of great effect by design.
EMOJI validation form
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.
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.
It helped me a lot, thank you.