CSS has hugely improved forms. Where once you had very rudimentary forms that looked plain and un-styled, CSS lets you style your form however you want and create rich and robust 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 more 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, tools and services to speed up your CSS form creation. Whether grabbing code snippets, using these templates as design inspiration, or simply using them whole, the point isn’t ultimately to try build everything from scratch by yourself, but rather have the best-looking and, more importantly, most-effective website possible. One that increases your desired results through visitors using your CSS form.
CSS Form Templates
Form CSS is a basic but clean form style. Good for when you don’t need bells and whistles with your style but still want it looking like something other than the web browser default.
Form CSS →Demo via jsFiddle →
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) →View Demo →
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) →View Demo →
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.
CSS Globe – 5 Web Form Styles →View Demo →
A tutorial on how to design a clean and pure CSS form without using html tables. Code snippets is provided along with a download of the source code, so you can just copy/paste this bad boy into your stylesheet and web page.
Clean and Pure CSS Form →Demo via jsFiddle →
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 →
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 →View Demo →
CSS Form Frameworks
RMSforms is a CSS forms framework that helps web designers avoid headaches by solving browser inconsistencies and making sure your form’s layout is correct, both visually and semantically.
RMSforms →Demo →
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 →Demo →
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 →Demo →
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 →Demo →
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 →Demo →
CSS Forms Generators & Tools
FAARY is a free online CSS form generator. You simply type your form’s contents (each item in a new 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 – Free, Online CSS Form Generator →
JotForm is a 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 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 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 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 →
Premium Form Services & Resources
Wufoo is one of the most popular and easiest form builders. It helps you easily create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.
Wufoo – Online Form Builder →
Formstack is an easy-to-use form builder and data collector/manager. It features an easy drag-and-drop online form builder that lets you build any type of web form to help your organization collect data online. No programming or HTML experience needed.
Formstack – Online Form Builder Formstack →
Icebrrg lets you easily build online forms – no programming, software, technical or design skills and experience needed. Icebrrg further simplifies form creation by handling the hosting of your forms.
Icebrrg – HTML Web Forms →
FormLogix is an online form builder tool for creating web databases and web forms. The form builder is a WYSIWYG tool (what you see is what you get) and it requires zero coding skills.
FormLogix Form Builder →
MachForm – PHP HTML Form Builder →
Questionform is a web application for creating, publishing and analyzing online surveys and forms. The form creator is simple to use, and best of all, unlike most other comparable services in this category, Questionform is free.
Question Form – Create Online Surveys and Forms →
Over to you: what are your favorite CSS form templates, tools and/or services? Feel free to share your essential picks in the comments section below.