10 Code Snippets for Creating Beautiful Forms
Every website usually needs some type of form, whether it’s a checkout page or a simple contact page.
It’s crucial to make sure your forms work, so usability is #1. But aesthetics are also important since trustworthy designs are always more engaging.
If you’re stuck for design ideas, this collection might help. It’s a collection of 10 form designs with free source code. You’ll find many different color schemes, input field styles, typographic styles, and so much more.
Plus these are all hosted for free so you can copy and play arouns with the code to your liking.
1. Material Design
Everyone knows about Google’s material design language over its rise to fame these past few years. Material design concepts were aimed towards Android apps but rapidly spread onto the web.
If you like the minimalist style of Google’s material UI then check out this material form created by Jon Uhlmann.
It runs on Sass and Pug for CSS/HTML preprocessing. It’s also a pretty lightweight form and the material design elements should render the same in all browsers.
Truly an inspiration for all you material designers out there.
2. Under The Sea
Take a trip into the ocean in this very unique contact form built with an aquatic style.
The entire page background uses a repeating pattern to create the waves of the ocean water. But the little animated fishies are a whole other story animating into view from a background image.
Plus whenever you select an input field a friendly octopus shows up for a greeting. How quaint!
3. Bootstrap 3 Form
The default Bootstrap styles are pretty boring and they’ve really been used to death at this point. Whenever I see a Bootstrap site with the same generic styles I can only imagine the designer was too lazy to customize or too focused on the experience to care.
This BS3 form does things right by building on top of the Bootstrap framework. It uses a few restylings on the input fields and the submit button to create a lovable Bootstrap form that you’d never know was Bootstrap’d.
If you’re running a BS3 layout definitely considering reworking your forms like this. You can also try using a 3rd party framework built over Bootstrap for a more customized design.
4. Elegant Contact
With Font Awesome icons and some basic responsive styling this contact form is truly one of a kind.
I always recommend adding icons into forms, especially for larger designs. With more fields you get more hesitation and users just want to fly through forms without a hitch.
These simple icons add a cue to each field so it’s easy to tell at a glance what sort of information is required.
And if you’re looking for something a little unique try adding a different iconfont into the mix.
5. Tiny Login
Sometimes the small things really are the best things. And this form UI proves it by creating a super minified login form that just rocks.
Typography is huge with form design and I often prefer smaller typefaces on login fields. It really depends on the website and how well smaller text blends into the layout.
But this form also has a small progress step graphic hanging off the side explaining the form process. Granted with only two fields this kinda seems silly, but for larger registration forms that progress bar will prove invaluable to the user experience.
6. Login & Signup Combo
If you wanna cut down on login times you might try combining the login form and the registration form together on a single page. It’s a lot easier than you might think and you can see a sweet demo in this pe.
Whenever you click the login/register links to the side you’ll find a beautiful custom animation rotating the forms into view. It’s all powered through jQuery but the animations could work through CSS too.
But I do notice one bug in this layout where the bottom part of the “hidden” form is still visible after switching. You can solve this with the CSS visibility property or by moving the position a little more out of bounds.
7. Chalkboard Contact
Here’s a real unique form style that definitely jumps off the page. This chalkboard contact form uses a background gradient to create the effect of light bouncing off the blackboard.
Plus the wooden border helps sell this thing as the real deal.
Creator Greg Sweet even uses a custom web font that looks just like typical human handwriting. This is perfect for adding that final touch onto the form so it really does feel like you’re back in school.
8. Credit Card Checkout
I’ve seen a lot of checkout forms but this design by Fabio Ottaviani is perhaps the best I’ve ever stumbled upon.
It does use JavaScript to handle input field validation but the credit card is all CSS. It animates based on the numbers you punch into the form and it even rotates to the back when you’re typing in the credit card CVV number.
9. Custom Sign Up
For a pure CSS sign up form this snippet really takes the biscuit. It feels pretty simple resting in a single container with a small drop shadow.
But the input fields are heavily customized including the space required to add those icons to each one.
Whenever you highlight a field the border brights to a moss green. You’ll notice the icon changes colors too! Even the select menus for the credit cards have their own custom styles.
This is a pretty complex effect to make purely in CSS but developer José Carneiro made it happen.
10. Floating Labels
Custom floating labels are some of my favorite trends in form design. They always help improve usability and they give a clear explanation of the field even once you’ve filled it out.
Take a peek at this floating label form running on CSS3 and Compass.
Creator Anton Simanov uses jQuery for the labels but it’s all custom coded without any plugins. Not to mention his solution works for all the typical input styles including textareas and select menus.
No matter what style of form you’re going for I certainly hope this gallery can give you some ideas & snippets to move forward.
The more you study design patterns the more ideas you’ll have to build with for your own projects. And CodePen is a great site for gathering those ideas.
The post 10 Code Snippets for Creating Beautiful Forms appeared first on Speckyboy Web Design Magazine.