Create beatiful website forms
HTML forms are a vital part of most websites but they don’t look very good by default. Luckily there is a lot you can do to improve the look of your forms so they don’t ruin your otherwise beautiful website. Depending on the underlying technology of your website and your level of technical expertise there are a number of different ways to do this.
Labels, text fields and textboxes
These elements can be modified using the attributes that would apply to any div element. A quick fix to tidy up your form is to give all your labels a fixed height and width. To do this you will need to use the following CSS
Checkboxes and radio buttons
The div CSS attributes apply to these elements but not very well. To make your text checkboxes and radio buttons you need to replace them with an image. This is a bit more difficult than styling the other fields but this tutorial from Adobe goes through this in detail. It also explains how to use an SVG (Scalable Vector Graphics) image instead of a PNG file if you feel like trying something new.
Select elements can be problematic as the browsers have a nasty habit of ignoring any styling that you add (see this article from csstricks.com for some examples). To better apply styles to your select elements you will need to remove the current styles. To do this add the following CSS
The advantage of using jQuery to style your forms is that someone has written all of the CSS for you
This jQuery plugin styles your forms with the theme CSS that you select.
jQuery checkbox can replace your checkboxes and radio buttons with custom switches.
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
These plugins still use CSS and jQuery but they are the easiest way to customise your forms (assuming you are using WordPress of course) as they generally have a drag and drop interface that saves you from having to write any HTML or CSS at all.
This plugin contains a visual form styler that allows you to style your form through the user interface.
This plugin allows you to use a drag and drop interface to create forms on your WordPress site that can be customised using a theme that can be selected in the form options.
Some beautiful forms to inspire you
This form uses a pink and grey theme with lots of whitespace for a clean design.
The typewriter graphic gives this contact form an orginial touch.
Orca Bay Seafoods
The form elements have been updated to fit in with the site’s colour scheme and resized to make use of the available screen area.
What is your favourite way to style forms? Are there any forms that you really love?