Top 10 CSS 3 forms tutorials

by Jean. 20 Comments -

CSS3 brings to life countless new possibilities to make better web forms. In this article, I have compiled a list of the best 10 tutorials to make great forms using this new and amazing technology.

HTML5 & CSS3 form


HTML5 introduced useful new form elements as such as sliders, numeric spinners and date pickers. This tutorial will show you how to create a form with HTML5, and make it look really cool with CSS3. A great way to get started in both CSS3 and HTML5.
» View tutorial

CSS3 form without images and JavaScript


This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. For those who can’t understand French, just get the source code and have fun with it.
» View tutorial

Stylish Contact Form with HTML5 & CSS3


I really love what British web developer Chris Spooner creates. This time, he’s back with a quality tutorial about creating a form and using CSS3 to style it. The result is, as you can see above, really cool.
» View tutorial

Beautiful CSS3 Search Form


Most search forms (Including the one I use on this site!) looks boring. Using a little CSS3, you can turn the old and boring form into something definitely modern and cool. A must read tutorial.
» View tutorial

Prettier Web Form with CSS 3


This pretty simple tutorial will show you how you can create a form using some basic CSS3 properties, such as box-shadow.
» View tutorial

Slick CSS3 Login Form


Once again, a simple tutorial to create a simple form using CSS3 but absolutely no images.
» View tutorial

Glowform: Amazing CSS3 form


Wow! This form looks really great, isn’t it? This form do not use any images, only CSS3. I urge you to read this tutorial and the form source code, because you’ll learn lots of great techniques about creating killer forms without using images.
» View tutorial

Clean and Stylish CSS3 Form


This form is simple, clean and stylish. Nothing fancy but techniques you’ll may use on most websites you’ll make.
» View tutorial

Signup form with CSS3 and jQuery


jQuery is definitely a great tool to make forms more usable. This tutorial will show you how to create a good looking form using CSS3, and how to make it more user-friendly with some jQuery.
» View tutorial

jQuery & CSS3 Drop-down menu with integrated forms


At last but not least, here is a tutorial about how to create a CSS3/jQuery dropdown menu with integrated forms. No doubt, your clients will love it!
» View tutorial

Comments (20) - Leave yours

  1. Jatin said:

    Brilliant List of [HTML5 + CSS3] based forms tutorials. Thank You Jean for this awesome list.

    From the above list, I personally like one at webdesignerwall, gazpo, and webexpedition18

  2. Chris Marsh said:

    The new input types in HTML5 are a brilliant way to enhance your forms – Opera has great support for the date and color types and by using CSS3 attribute selectors, you can style them really specifically.

    Great collection of form tutorials!

  3. Floris said:

    Some very disappointing old fashioned looking forms in there, I’ve seen a lot better ones, modern, simplistic, and functional.

    I expected a better list, sorry about that.

  4. jehzlau said:

    Glowform and Slick are somewhat old fashioned, and other forms up there. I agree with Floris. O__O

    moderm forms nowadays are simple. :) like your current comment form. :) Simple + clean. ^_^

    • jehzlau said:

      I mean “modern” forms, not “moderm”. hehe ^_^

      I suggest you add an “edit comments” plugin for WordPress so that people like me who don’t re-read their comments, can still edit it after publishing. hehe. :)

  5. Wayne Seddon said:

    @Floris + @jehzlau These are a list of tutorials for people wanting to learn CSS3 techniques, once you’ve learnt them you should be able to apply your own creativity. If you want to see a list of creative forms look here http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/

    On another note, the Glowform tutorial requires you to download and use Mayura Draw :( that’s not good, we shouldn’t have to download new software to view a tutorial like this.

  6. Jasmine said:

    No doubt all these CSS3 forms are really elegant and stylish! I especially like the last one, really amazing!

    Thanks so much for sharing these!

  7. Dee Thibodeau said:

    Everyone seems to be talking about the advantages of CSS3 and what it can do, and to be honest I don’t blame them. Along with HTML5 it’s really going to improve the way that we design for the web, making the implementation of seemingly simple design elements, actually simple! One problem that I have run across is that some browsers recognize it and some don’t. The newest versions of Chrome, Safari, Opera, and Firefox render most of the basics at the moment, but IE6 – 8 don’t. That could be a problem because some people (like my Dad) are still using the same computer they bought 15 years ago and never update search engines, still have dial up Internet service, etc. I would love to see what these elements look like on his machine LOL!

  8. jonny said:

    Hi Jean,
    Wonderful post, very nice top ten form tutorials. Best collection, your second number “CSS3 form without images and JavaScript” is the topic which i like most. This is really magic of css.

  9. Rick said:

    Can anyone out there create a form that displays the questions one at a time after the previous question is answered, or is there already a template for that?

    Thanks.

  10. Rasbin said:

    CSS3 has really reduced a lot of headaches for web designers. It has removed the pain of loading lots of images in your website.
    The tutorials above are very effective which were once only possible with images now can be designed using css3.

    thanks for the share.

  11. Rex said:

    One more entry to the list

    http://www.webstutorial.com/css3-html-5-login-form-validation/html-5

    any one any idea on designing the alert popup?

Leave a Reply

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

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!