Templates, Tutorials and Frameworks for Creating CSS Forms

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

CSS3 Forms Library

The CSS3 Forms Library styles text boxes, text areas, buttons, radios, and partially select drop downs.

CSS3 Forms Library →

Simple CSS Form (WittySparks)

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)

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

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 - 5 Web Form Styles
CSS Globe offers 5 web form styles, ranging from dark-and-slick to fun handwritten to old-fashioned letter envelope and more.

View Demo →

Beautiful CSS Forms

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.

Beautiful CSS Forms →

Pretty CSS3 Web Form

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.

Pretty CSS3 Web Form →

Simple CSS Forms

Simple CSS Forms

Simple CSS Forms →

Nice & Simple Contact Form

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.

Nice & Simple Contact Form →

CSS Form Tutorials

Adding Style to Forms with CSS

CSS Form Styling

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.

Adding Style to Forms with CSS

Background Images into Form Fields with CSS

CSS Form Styling

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

CSS Form Styling

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

CSS Form Styling

This legendary article dates back to 2004, CSS rules will still apply.

Styling Even More Form Controls

CSS Styling of Forms

CSS Form Styling

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 Styling of Forms

CSS Form Frameworks

Formy CSS 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

Uni–Form

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.

Uni–Form →

Formee

Formee

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.

Formee →

Formalize CSS

Formalize CSS

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.

Formalize CSS →

CSS Forms Generators & Tools

FAARY – Free, Online CSS Form Generator

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.

FAARY Online CSS Form Generator →

JotForm – Easiest Form Builder

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.

JotForm – Easiest Form Builder →

Accessible Form Builder

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.

Accessible Form Builder →

Web Form Theme Editor

Web Form Theme Editor - FormAssembly.com

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.

Web Form Theme Editor →

Form Style Generator

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.

Form Style Generator →

(449 Posts)

This post has been written by the team here at Speckyboy Design Magazine.

Comments

  • That’s a huge collection of form resources. Great post! Thanks for sharing these.

  • That is a brilliant list of CSS form templates.

    Often you just stick with the same method you always use to present forms but good to get some new ideas from the list above.

  • Bharatbang19

    accessify is best of all…no other as i found gives the html code…all provide a link…

  • Love having these form templates all in one place.  Nice forms.  Thanks for posting these up!

  • Nice Collection.Cooooooooooooool