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.

CSS

All methods of styling forms use CSS either on its own or with JavaScript, the plugins listed below just provide a way of doing this without you having to write said CSS yourself. Some form elements have all the styling capabilities as a regular div where others are more restrictive and require some clever tricks to change their appearance in a pleasing way.

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

.pretty_label {
display: block;
width: 250px;
height: 30px;
}

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

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

jQuery

The advantage of using jQuery to style your forms is that someone has written all of the CSS for you

Uniform JS
This jQuery plugin styles your forms with the theme CSS that you select.

jQuery checkbox
jQuery checkbox can replace your checkboxes and radio buttons with custom switches.

Chosen
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

WordPress Plugins

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.

Formidable forms
This plugin contains a visual form styler that allows you to style your form through the user interface.

WordPress Forms
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

Social design
This form uses a pink and grey theme with lots of whitespace for a clean design.

Pixel Wrapped
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?

Sarah Wallis

About the author: Sarah Wallis
A creative at heart with a degree in Computer Science, my passion is to create beautiful, functional websites to enhance and expand my client's business. I love working with WordPress, Photoshop and Dreamweaver and I can never learn enough new CSS. When not at the computer I love crochet, reading classic novels and jogging very slowly.

Next Post

Send amazing HTML emails

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. CSS All methods of styling forms use CSS either on its own or with JavaScript, the plugins listed below just provide a way of doing this without you having to write said CSS yourself. Some form […]

Continue Reading
Create beatiful website forms - sarahwallis.id.au