JavaScript
Article

10 jQuery CSS3 Form Tutorials

By Sam Deering
10 jQuery CSS3 Form Plugins to bring life and countless new possibilities to make better web forms. In this post we have compiled a list of the best 10 jQuery css3 tutorials and plugins to make great forms using this new and amazing technology.

Related posts:


1. Signup form with CSS3 and jQuery


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.
Signup-form-with-CSS3-and-jQuery.jpg
Source


2. Glowform: Amazing CSS3 Form


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.
Glowform-Amazing-CSS3-Form.jpg
Source


3. Prettier Web Form with CSS3


This pretty simple tutorial will show you how you can create a form using some basic CSS3 properties, such as box-shadow.
Prettier-Web-Form-with-CSS3.jpg
Source


4. Stylish Contact Form with HTML5 & CSS3


A quality tutorial about creating a form and using CSS3 to style it. The result is, as you can see above, really cool.
Stylish-Contact-Form-with-HTML5-CSS3.jpg
Source


5. 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.
HTML5-CSS3-Form.jpg
Source


6. 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.
CSS3-form-without-images-and-JavaScript.jpg
Source


7. 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.
Beautiful-CSS3-Search-Form.jpg
Source


8. Slick CSS3 Login Form


Once again, a simple tutorial to create a simple form using CSS3 but absolutely no images.
Slick-CSS3-Login-Form.jpg
Source


9. Clean and Stylish CSS3 Form


This form is simple, clean and stylish. Nothing fancy but techniques you may use on most websites you’ll make.
Clean-and-Stylish-CSS3-Form.jpg
Source


10. jQuery & CSS3 Drop-down menu with integrated forms


A tutorial about how to create a CSS3/jQuery dropdown menu with integrated forms. No doubt, your clients will love it!
jQuery-CSS3-Drop-down-menu-with-integrated-forms.jpg
Source

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.