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

  • http://www.ahmaddesign.co.uk Muneeb Ahmad

    Thank you! I will definitely be using these for an upcoming website project.

  • http://itcutives.com Jatin

    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

  • http://chrismar.sh Chris Marsh

    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!

  • http://mycoffeecupisempty.com Floris

    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.

  • http://www.brokerlaan.dk Karen

    Thank you, thank you for sharing these forms tutorials. They’re definitely helpful!

  • http://www.jehzlau-concepts.com/ jehzlau

    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. ^_^

    • http://www.jehzlau-concepts.com/ jehzlau

      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. :)

  • http://ScribeSite.com Roger Scime

    Beautiful and extremely helpful. Big change from Web 1.0 and PERL, isn’t it!

  • http://www.flamescorpion.com Lucian Apostol

    I think simple javascript will get the work done and you don’t have to load the whole jquery library for a simple contact form.

  • http://www.wayne-seddon.me.uk Wayne Seddon

    @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.

  • http://naturalhistorybookshelf.com Rob

    Thanks, good ideas, some of which I will hopefully be able to implement here.

  • http://www.100webhosting.com Jasmine

    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!

  • http://therabbitvibratorstore.com Dee Thibodeau

    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!

  • http://www.evideobox.com/ jonny

    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.

  • Rick

    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.

  • http://www.ittrainingnepal.com Rasbin

    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.

  • Rex

    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?

  • http://designerminds.dk Mads Poulsen

    I really like them all. Especially the last one is really amazing!

    Thanks so much for sharing! :-)

  • sonu

    thanks sir design css form
    your site very useful

  • http://www.artgraphix.de A.Jendrysik

    thx for sharing! wonderfull forms and very helpfull…
    Greetings from de