Forms do not have to be boring and ugly; they too can be beautiful. With the proper understanding of each element (radio buttons, checkboxes, text areas..), CSS know-how, a little patience and some creativity you can make your forms beautiful. Throw in, the always important, semantics and accessibility and things can get tricky.
Below you will find 20+ resources and tutorials for designing creative forms with CSS.
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
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
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
Forms represent the one area of your website 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 though and a damn good read of any other tut you can find; you wouldn't expect anything less from sitepoint.com. If you are completely green when it comes to forms, HTML and CSS, then this tutorial is for you.
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
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.
How to Create a Perfect Form Markup and Style it with CSS
"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 the perfect groundwork for creating good looking forms.
Designing Simple & Beautiful CSS Based Forms
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
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.
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.
This tutorial is over three 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
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 »
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.
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.