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.
This dark, leather textured web form has a simple layout, the interesting effects being the ones that make it stand out.
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 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.
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 has a multiple login forms area. They’re all designed in a very simple, user-friendly manner.
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.
CarbonMade has a rounded corners Sign In form. The oranges and blues go great together. It also has a nice, gradient effect.
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.
This fullscreen photo background contact page has a very simple, transparent contact form. It goes well with the overall website’s design.
MailChimp has a simple, very user-friendly contact form. It also has a new, unique element – the Secure Login link.
This is a super simple contact form with no special effects. The Submit button has a nice stroke effect and a subtle shadow.
Mixd combines large typography with flashy colors on their contact page. A great combo!
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.
This multiple login form is separated using tabs. The layout is basic and the Login button is the accent element in the design.