list of Resources and Tutorials for Creative Forms using CSS

Forms do not have to be boring and ugly, they too can be beautiful. With the proper understanding of each element (radio buttons, checkboxes, textareas..), CSS know-how, a little patience and some creativity you can make your forms beautiful. Throw in, the always important, semantics and accessibilty and things can get tricky.
Below you will find 20+ resources and tutorials for deisgning creative forms with CSS.
How To Create a Good Looking Form

CSS Form StylingHow To Create a Good Looking Form »
View Demo »
This tutorial explains how to design a great looking form using a clean CSS design with only the label and input tags to simulate an HTML table structure. You can use all CSS/HTML elements to design your custom form for your web projects.

A Simple Tableless Form

CSS Form StylingA Simple Tableless Form »
By now, just about anyone who has worked on web-based development has heard the arguments against tables in HTML design. Although the vast majority of websites in earlier web development were table based, times have changed and most web developers are coming over to the benefits of purely CSS based design.
In this easy tutorial, you’ll use a very simple example which incorporates the majority of elements within a form. The code examples are written in good-old-fashioned HTML instead of ASP.NET and do not contain validation, ID’s, etc. like a production form would have.

Make your forms beautiful with CSS

CSS Form StylingMake your forms beautiful with CSS »
Download Tutorial Files »
Forms are an essential part of your website. Users will participate and give feedback to your site through them, whether your site is a social community, an eCommerce store or just a random page with a humble contact form. Why, then, are forms so often left to the browser’s default appearance when so much time and energy is spent on creating beautiful page designs?
In this step-by-step tutorial, you are going to examine how to take a standard form and then make it special with some simple CSS tricks and techniques. You will improve the usability, aesthetics and layout, while picking up design cues from the existing design elements.

Fancy Form Design Using CSS

CSS Form Styling
Fancy Form Design Using CSS »
Forms represent the one area of your web site where you absolutely must commit time and energy to ensure user accessibility.
In this tutorial all of the code reproduced for forms is standards-based, semantic markup, so you’ll have no excuse for relying on tables now! This tut is probably the most up to date, thourogh and a damn good read of any other tut you can find, you wouldn’t expect anything less from If you are completley green when it comes to forms, HTML and CSS, then this tutorial is for you.

Adding Style with CSS

CSS Form StylingAdding Style with CSS »
View Demo »
Download Tutorial Files »
Forms don’t have to be ugly and boring, and certainly don’t have to be inside tables to look nice and aligned.
In this straight forward tutorial you’ll take look at how to style a beautiful form using the power of semantic HTML and CSS.

Turn postcard photo into a stunning comment form using CSS

CSS Form StylingStunning comment form using CSS »
View Demo »
Download Tutorial Files »
Comment forms allow visitors to leave their impressions about the content. Although the content is a king, general impression isn’t negligible at all. Each element in a design can contribute to a better user experience. This applies to comment forms as well.
This tutorial will teach you how to make a stunning comment form using an old styled postcard photo, creating a simple yet effective style.

Below you will find four more CSS form related tutorials from the same author.

CSS Form StylingHow to deal with large webforms »
When developing/designing business applications you might face long (or large) webforms. You can have tens of fields and it might be a real mess, you have to think about user experience.

CSS Form StylingMake image buttons a part of input fields »
View Demo »
Download Tutorial Files »
If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them, this tut will show you how.

CSS Form StylingValidation best practices »
Validation is a very important aspect in web forms development and should be planned carefully. Well designed validation can favorably affect the user experience and can speed up the filling of forms.

CSS Form StylingEnhance your input fields with simple CSS tricks »
View Demo »
With just a few simple CSS tricks you can make a usual, boring web forms more effective and exciting.

How to Create a Perfect Form Markup and Style it with CSS

CSS Form Styling
How to Create a Perfect Form Markup and Style it with CSS »
View Vertical Demo »
View Horizontal Demo »
“The perfect HTML form mark up”, that’s a strong claim from the author of this tutorial; but, it might just be, I know full well opinions may vary, the only possible forseeable problems with the markup could be when dealing with a complicated design.
The styling from this tutorial works across a wide range of browsers and serves as perfect groundwork for creating good-looking forms.

Designing Simple & Beautiful CSS Based Forms

CSS Form StylingDesigning Simple & Beautiful CSS Based Forms »
View Demo »
Download Tutorial Files »
Creating web forms where the form label and input are horizontally adjacent can be a real problem. Since forms don’t constitute tabular data the use of tables doesn’t seem to be a good idea.
This article explains how to design a beautiful form using a clean CSS design with only <label> and<input> tags to simulate an HTML<table> structure. You can reuse all CSS/HTML elements to design your custom form for your web designs.

Semantic Horizontal Forms

CSS Form StylingSemantic Horizontal Forms »
Download Tutorial Files »
Belgian developer, Chris Ramakers has tried to work out a way to reproduce a horizontal form (view demo), in a semantically correct way with fieldsets, legends, labels and some CSS styling. The results are imressive, have a look at the source of the page for the markup.

Background Images into Form Fields with CSS

CSS Form StylingBackground Images into Form Fields with CSS »
Download Tutorial Files »
Adding some expressive background images to your HTML form can be considered sometimes as a relevant point. This can be accompilshed easily with pure CSS.
In this tutorial you will learn how to use a simple image (icon) within your form fields.

5 Uniquely Designed and Coded Web Form Styles

CSS Form Styling

5 Uniquely Designed and Coded Web Form Styles »
View Demo »
Download Source Files »
This is great free resource from CSS Globe, 5 downloadable uniquely designed and coded web form styles. Each form is of the highest quality and they range from light and dark to minimal and grungy. Definetly worth a look.

A List Apart: Articles: Prettier Accessible Forms

CSS Form StylingPrettier Accessible Forms »
View Demo »
This tutorial is over 3 years old, but don’t be put off. Things haven’t changed that much regarding HTML and CSS.
The most important part of a form is the HTML, you need it to build the form. Fortunately, HTML gives you a nice assortment of tags to build your forms in an accessible way. These are fieldset, legend, and label. The styling of the form is the fun part., the aim is to produce a main forms style sheet that can be imported to give a form the basic structural styling you need.

Trimming Form Fields

CSS Form StylingTrimming Form Fields »
View Demo »
Web forms often ask visitors for non-essential information, but long and complicated forms can seriously hinder the e-commerce sales process. In this, slightly more advanced tutorial, you will create a cool form that gives users the option to hide these optional fields at their own discretion, you will be doing this with clever use of Javascript, the DOM and some CSS.

No comments yet... Be the first to leave a reply!