Best Tips, Resources and Tutorials for making of Creative Forms using CSS

How To Create a Good Looking Form

How 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

A 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

Make 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

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 sitepoint.com. If you are completley green when it comes to forms, HTML and CSS, then this tutorial is for you.

Adding Style with CSS

Adding 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

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

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

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

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

Enhance 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

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

Designing 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

Semantic 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

Background 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

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

Prettier 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

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

Styling Even More Form Controls

Styling Even More Form Controls »
This legendary article dates back to 2004, CSS rules will still apply.
A question that is frequently asked in forums is how to style form controls in a consistent way across platforms. The short answer is probably disappointing to many: you can’t.
There are a lot of controls that can be used in an HTML form. For this exercise, the author applies styling to the submit button, the menu, a.k.a. the select box, the single line text input, the checkbox, the radio button, and the file select control. From this the article shows you how each styling looks in each browser.
Select which demo you would like to view:
Styled buttons Demo »
Styled submit buttons Demo »
Styled select boxes (single) Demo »
Styled select boxes (multiple) Demo »
Styled single line text inputs Demo »
Styled multi-line text inputs Demo »
Styled checkboxes Demo »
Styled radio buttons Demo »
Styled file select controls Demo »
Disabled controls (default styling) Demo »

CSS Styling of Forms

CSS Styling of Forms
View Demo »
Writing a post about CSS froms would not be complete without having a CSSplay resource included. Here, Stu Nicholls, has designed a glorious looking form with other styles available. As always view source for the markup.

Niceforms

Niceforms »
View Demo »
Download Nice Forms »
Nice Forms Support »
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
The idea is simple: since normal input fields (including radio buttons, checkboxes, textareas, etc) can only be styled to a small degree, they have to be hidden and their visual appearance replaced with similar working, new, fully customizable constructs. In theory, that doesn’t sound really complicated. But from theory to practice there is a long way.
Starting with the basic XHTML code for a web form, Niceforms parses the DOM tree, gets all the input fields, hides them, and positions their new graphical appearance in place. All this is done while preserving the date transfer and selection features of the regular form. Everything is done via javascript.
Some of the features from Niceforms works just like your regular web form. The form fields and the buttons created are fully scalable. You can specify their width (and height for textareas) through regular HTML properties such as size, cols and rows. Buttons will automatically expand to accommodate the amount of text present. Keyboard-only navigation is also supported.

Formy-CSS-Framework

Formy-CSS-Framework »
View Demo »
Formy is CSS Framework for better form management., simple as that. There are some great tools and examples for creating web forms, they usually use tables, div, list or just pure CSS for construction of the form layout and some of these techniques are not so accessible (tables) or in absence of CSS the form layout falls apart. This is were Formy comes in, it solves your forming problems.