CSS has hugely improved forms. Where once you had very rudimentary forms that looked plain and unstyled, CSS lets you style your form however you want and beautiful forms.
Even a simple contact form can look slick and increase readability and user-friendliness – which means more visitors will fill it out, and you’ll get better results based on that action.
Like with any web design, there’s no need for you to reinvent the wheel – use these CSS form templates and tools to speed up your CSS form creation.
With the proper understanding of each element (radio buttons, checkboxes, text areas..), a little CSS know-how, some patience, and some creativity, you can create truly beautiful forms.
CSS Form Templates
CSS3 Forms Library
The CSS3 Forms Library styles text boxes, text areas, buttons, radios, and partially select drop downs.
Simple CSS Form (WittySparks)
WittySparks Simple CSS Form is a clean and subtly colorful form. Good for a fun-yet-professional look – since the rounded corners provide the fun, but the subdued colors and clean layout provide the professional.
Simple CSS Form (WittySparks) →
Complicated CSS Form (WittySparks)
WittySparks Complicated CSS Form is like the Simple version but, as the name implies, includes more form options. It still retains the fun-yet-professional vibe with the rounded corners and subtle colors.
Complicated CSS Form (WittySparks) →
Semantic CSS Forms
Semantic Form allows you to quickly build a form with terse, semantic markup and have it come out looking decent.
Semantic Form →
Web Form CSS Styles from CSS Globe
CSS Globe offers 5 web form styles, ranging from dark-and-slick to fun handwritten to old-fashioned letter envelope and more.
Beautiful CSS Forms
A tutorial on how to take a standard form and make it special with some simple CSS tricks and techniques. This will improve the usability, aesthetics, and layout while picking up design cues from the existing design elements.
Pretty CSS3 Web Form
A tutorial that shows how to turn a boring web form into a beautiful one using CSS3. Code snippets are included along with downloadable source code for your copy/pasting convenience.
Simple CSS Forms
Nice & Simple Contact Form
Simple CSS Forms is an easily customizable forms setup that helps you create quick prototypes and final products of websites. It is cross-browser compatible.
CSS Form Tutorials
Adding Style to Forms with CSS
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 straightforward tutorial, you’ll take a look at how to style a beautiful form using the power of semantic HTML and CSS.
Background Images into Form Fields with CSS
Adding some expressive background images to your HTML form can be considered sometimes as a relevant point. This can be accomplished easily with pure CSS.
In this tutorial, you will learn how to use a simple image (icon) within your form fields.
Background Images into Form Fields with CSS
Prettier Accessible Forms
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.
Styling Even More Form Controls
This legendary article dates back to 2004, CSS rules will still apply.
CSS Styling of Forms
Writing a post about CSS forms 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.
CSS Form Frameworks
Formy CSS Frameworks
Formy is a CSS framework for better form management. The universal CSS interacts with an HTML form in a simple and natural way so that the form will work decently well even without CSS. The reason for this is there’s a limitation to a form that’s built purely with CSS: it becomes inaccessible if it’s viewed in a browser that doesn’t fully support the used CSS code.
Formy CSS Frameworks →
Uni-Form is a framework that standardizes form markup and styles it with CSS giving you two most widely used layout options to choose from. You can get nice looking, well structured, highly customizable, accessible and usable forms, making your web design job a lot easier.
Formee is a framework to help you develop and customize web based forms. It alleviates the need for you to spend a lot of time aligning fields and calculating margins and paddings. Formee is cross-browser-compatible, flexible, and customizable.
Formalize CSS is a form framework that gives you a measure of control over form elements, without changing them so drastically as to appear foreign in a userâ€™s operating system. This results in consistent CSS forms across all browsers.
CSS Forms Generators & Tools
FAARY – Free, Online CSS Form Generator
FAARY is a free online CSS form generator. You simply type your form’s contents (each item in a new line), then click the Generate button, and you have a CSS form created for you – ready for download and insertion into your web page.
JotForm – Easiest Form Builder
JotForm is an easy-to-use CSS form builder. It features a WYSIWYG interface (what you see is what you get). That means no code – you simply pick an element you want to add and drag it onto the “work area” where you visually build your form. That’s it. There are a lot of elements included, from the basic text fields and buttons to survey and payment elements. When you’re done, you click save, and you’re ready to add your form to your web page.
Accessible Form Builder
Accessible Form Builder is, as the name implies, a simple step-by-step form builder that generates forms which are accessible to anyone, especially visually-impaired users.
Web Form Theme Editor
Web Form Theme Editor is a form builder that’s easy-to-use and features a WYSIWYG editor (what you see is what you get). You select a color scheme, background, typography, border, effects, and elements from a visual interface.
Form Style Generator
Form Style Generator is a simple form style generator that lets you quickly create a style for your forms. Run through and select the parameters for your form style, then download and insert the CSS code it generates for you into your stylesheet.