Creative Web Form Resources
If you want to learn how to style your creative web forms like the ones below, and even add jquery effects and much more, then here are some resources I have wrapped up for you.
- How to create a good looking form without a table [demo]
- Make beautiful forms with cascading style sheets [download tutorial files]
- How to go about dealing with large webforms
- Add a background image to form fields using CSS [download tutorial files]
- A List Apart teaches us how to create prettier accessible forms [demo]
And without further ado, the creative form list. Remember to click on the images to visit the website.
Chris Wilhite Design
Chris Wilhite Design is a furniture & cabinetry company dedicated to creating functional, timeless designs.
61Pixels
This dark, leather textured web form has a simple layout, the interesting effects being the ones that make it stand out.
Vimeo
Vimeo’s Log In form is simple and clean. The rounded corners from the input fields match the overall website’s design. Also, the colors chosen give it a soft look.
Nasi Briyani Lounge
This is a nice example of a creative login form. Instead of redirecting you to a login page or showing directly a login form, this web form appears when the Login link is clicked.
GrooveShark
Grooveshark has a simple, clean Login form with blue gradients. The upper part of the form is nicely designed, as there are two big buttons for SignUp and Forgot Your Password.
PSD Themes
This is a very fun, unique form. The text on this login form is fun and friendly; not the ususal text you’ll find on this type of web forms.
Meebo
Meebo has a multiple login forms area. They’re all designed in a very simple, user-friendly manner.
Bubblessoc
This pastel colored, girly contact form has a cute ribbon on top and a simple, basic contact form layout. It’s nice to use this kind of web form design on a personal blog with mostly female audience.
Five Cent Stand
This is one great example of how a creative web form should look like. This unique web form has some really cool textures added to it and has a hand-drawn feel. The whole website is nicely designed.
Carbon Made
CarbonMade has a rounded corners Sign In form. The oranges and blues go great together. It also has a nice, gradient effect.
Kgoule
Kgoule’s fun contact page has a dark contact form with rounded corners and embossed effect. The fonts used are a bit too large, though.
Oper(O)
This fullscreen photo background contact page has a very simple, transparent contact form. It goes well with the overall website’s design.
MailChimp
MailChimp has a simple, very user-friendly contact form. It also has a new, unique element – the Secure Login link.
Swfir
This is a super simple contact form with no special effects. The Submit button has a nice stroke effect and a subtle shadow.
Mixd
Mixd combines large typography with flashy colors on their contact page. A great combo!
UStream
UStream has a pop-up type of Login form. It’s pretty basic. Again, we see that blue shades are preferred when it comes to designing web forms.
Fused Hosting
This multiple login form is separated using tabs. The layout is basic and the Login button is the accent element in the design.
