Aug 30 2012

Get Your Form On: Modern Web Forms Tutorials

Advertisement

This article is designed to show you (through tutorials) how to create and better understand CSS forms. With a proper understanding of each element (radio buttons, checkboxes, textareas ..), CSS know-how, a little patience and some creativity you can create beautiful and appealing forms.

Having a website with beautiful and functional forms is vital for managing a web business. Keeping your visitors and potential customers satisfied and making your website more accessible should be one of the primary focuses to any website owner. As a designer, the contact form is the first step a client takes to communicate with you, but it can also be the final step a user takes on your website. Having a good and functional contact form is vital to convince the client you are the right choice.

Whether you are looking for tips and tricks for creating contact forms, sign-up / sign-in or checkout forms this article will help you find what you are looking for; or at least inspire you.

Below you can find a showcase of beautiful web forms tutorials:

Get Your Form On

Create a simple CSS form

This tutorial explains how to design a good contact form using a clean CSS design with only label and input tags to simulate an HTML table structure.

Create a simple CSS form

Postcard CSS comment form

This tutorial will show you how to create a stunning comment form using an old postcard image.

Postcard-like CSS Contact Form

Stylish Responsive Form With CSS3 And HTML5

This tutorial shows you how to create a stylish contact form in CSS3 and the details of working with gradients, drop shadows and rounded corners.

Stylish Responsive Form With CSS3 And HTML5

Facebook-like Registration Form with jQuery

Probably the most known registration form is the sign up form of Facebook. Learn how to create it.

Facebook-like Registration Form with jQuery

A simple and stylish HTML 5 and CSS 3 contact form

Step by step tutorial on how to create a beautiful contact form using Photoshop, HTML5 and CSS3. The tutorial starts from scratch with the Photoshop mock-up.

A simple and stylish HTML5 and CSS3 contact form

Build a Neat HTML5 Powered Contact Form

This form tutorial is built using HTML5 for the input elements and uses the browser’s built-in form validation. Also for older browsers the tutorial uses jQuery and Modernizr and PHP on the server side to validate the input.

Build a Neat HTML5 Powered Contact Form

Fancy AJAX Contact Form

AJAX contact form that uses PHP, CSS, JQuery, formValidator and JQTransform plugins to style input fields and buttons and make the form functional. In addition it uses the PHPMailer class to send out the contact form emails.

Fancy AJAX Contact Form

Floating Feedback button contact form

This tutorial features the creation of an AJAX contact form. The form is not visible initially and is activated by clicking on a Feedback button floating to the left of the website.

Floating Feedback button contact form

Sign-in dropdown box likes Twitter with jQuery

This tutorial helps you create a JQuery Dropbox sign-in box, just like on Twitter.

Sign-in dropdown box likes Twitter with jQuery

Cross-Browser HTML5 Forms

This tutorial teaches users to create beautiful HTML5 forms for modern browsers and how to use a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins for compatibility with older browsers.

Cross-Browser HTML5 Forms

JQuery and CSS3 drop-down menu with integrated forms

A jQuery and CSS3 tutorial that creates a drop-down menu where each sub-menu has a different form integrated (login, contact form or sign up).

JQuery and CSS3 drop-down menu with integrated forms

Modern Web Forms with HTML5 and CSS3

A beautiful sign-up form with rounded input boxes and button. Also each textbox includes a small icon relevant to the given field.

Modern Web Forms with HTML5 and CSS3

CSS3 forms with HTML5 validation

This form validates itself in real-time whether the completed data fits the recommended format for name, email or website.

CSS3 forms with HTML5 validation

Simple gradient CSS3 form

A simple CSS3 form tutorial explaining the usage of shadows and gradients in HTML5 contact forms.

 Simple gradient CSS3 form

Conclusion

Contact forms have come a long way in the past years, especially after the release of HTML5 and CSS3. You should always be up-to-date with technology and this is an essential part of your online presence. Hopefully you found these tutorials useful, maybe even convincing enough to change the ones on your own websites. We would love to hear your opinions below.

(rb)

About the Author

Alex Ionescu is the founder and prime contributor of CrazyLeaf Design Blog, a web design and graphic design blog providing resources, inspiration and tutorials for creative professionals.

Homepage

Comments and Discussions
  • Unaiz, 31 August 2012

    My searches for forms will end here…. thanks for the great collection

  • jared, 01 September 2012

    Love these form design. I’ve been looking to update some of the forms on my sites.

  • Brian Taylor, 03 September 2012

    Brief tutorial on creating and designing a forms using CSS. Useful post for the beginners to know more about creating a form. Nice share… :)

  • Kenn, 02 October 2012

    Looking for this to implement on my sidebar soon… great tutorial. Thanks a lot

  • Trevor, 12 December 2012

    Super helpful. Thanks so much!

  • Doru Halip, 02 February 2013

    Helpful, indeed! Great job Alex. Thanks for sharing. I might go to change my contact form.

  • Oshichi, 02 February 2013

    Hi Alex,after going through comment form css/div ,I will beat all odds to try it on my blogspot blog.Once I’ve managed to do that,I will come back here again to let you know.Thank you for sharing this post!

  • Brain, 24 February 2013

    Excellent web form solutions! I really like this. We’ve been trying to implement a quality CSS solution for our site for the last couple of months but haven’t quite found the best fit yet. Great tutorial. I’ll forward along your information. Thanks so much for sharing.

  • Sara, 10 August 2013

    Really valuable tutorial , Web forms have always made my brain ache but this has been valuable.Thanks
    Sara Toronto

search form
 
image description image description