They’re everywhere, contact forms, sign up forms, request info forms and so on…but a lot of them don’t feel worth my time to fill out. Which is a very bad thing for the person on the other end of that form. That form was developed to help bring traffic, collect information and/or even provide a service. There are many things that can turn people off from filling out a form online, here are a few that do it for me:

• Type is too small to read
• No reference to how long or how many sections there are to a form (ie. online application)
• Fields are too close together, too hard to depict where one entry ends and the other begins
• No indication on what fields are required until after I submit the form
• Looks too plain
• No form validation
• No on:focus styling, letting me know where I am about to start typing
• Too many fields
• So bland that I actually might miss that he form is even there

These are just a few that might turn me off to completing an online form., but hey I’m not going to just leave you with the do not’s. There are many things you can to do help your forms relay their message or purpose(s) for themselves, without having the user figure it own as they go. First make sure your form doesn’t fall into any of the above, and second I am going to walk you through how using a little CSS and JavaScript you can give your form that eye appeal it desperately needs.

Starting out

Here is an example of a sample form that you may use to have visitors’ RSVP. OK, so functionally speaking it would get the job done, someone would fill it out and the information would be collected on the other end. But the real question is, would someone take the time to fill it out?!? In a way, a form uses a design principle that I absolutely love, “the principle of surprise”. The best way to grab your viewers attention is to throw something at them that they were not expecting, and to get them wanting more and to keep wondering what’s next. With an attractive form you can do just that, you’ve already caught them by surprise with a unique form that stands on it’s own, now you’ve got them wondering “Wow, this is impressive. I wonder what happens after I submit the form…I hope it’s not just a simple thank you page.” So now you have them wondering what’s on the other side of this form, which will hopefully be enough enticement for them to fill it out and see. Which is a new topic all together, but please if you follow this post and create an amazingly beautiful form, don’t take them to a boring “thank you for your submission page”… surprise them! Maybe I will touch on a few ideas for that in the near future.

the CSS

Now on to the CSS…we have our simple form, so let’s jazz it up! Here are a few variables we can change via CSS to help spruce it up a little:

Input fields
To alter the style of the input fields use something like the following in your CSS:

input {
background: #000 url('../images/input-repeat.jpg') repeat-x;
font-family: arial;
color: #fff;
}

Textarea fields
To alter the style of the textarea fields use something like the following in your CSS:

textarea {
background: #000 url('../images/textarea-repeat.jpg') repeat-x;
font-family: arial;
border: 1px solid #fff;
color: #fff;
width: 200px;
}

Radio Buttons & Check Boxes
You can do some styling with css on these, but I am going to actually touch on how you can use custom check boxes and radio button graphics with JavaScript in the next step.
Submit/Input Buttons
To alter the style of the Sumbit/Input Buttons you will need to give your button a class (ie. class=”button”) otherwise it will pick up whatever style you give your normal input fields.

.button {
background: #efefef url('../images/button-repeat.jpg') repeat-x;
font-family: arial;
border: 1px solid #fff;
color: #fff;
font-weight: bold;
}

Also you can always use a graphic in replace of CSS styling for a button using the following:

<input name="Submit1" type="image" src="images/button.jpg" value="submit" />

Select Boxes
To alter the style of the Select Boxes just enter something like the following into your CSS.

select {
width: 200px;
padding: 1px 3px;
margin: 0px;
}

Now I can’t show you everything that is possible when adjusting the style of a form, as the possibilities are endless. I just want to open your minds and let the creative juices start flowing. Make it however you feel works best.

adding a little JavaScript

This little bit of JavaScript will help you be able to use custom graphics for your select, radio and check boxes. To use it just do the following:

Step 1: Download script

Step 2: Now just replace the images listed in the script to reflect the images you want to use, like so: ( You can set the graphics for selected and unselected, as well as checked and unchecked, sweet!)

var imgCheckboxFalse = 'images/checkbox_unchecked.gif';
var imgCheckboxTrue = 'images/checkbox_checked.gif';
var imgCheckboxFalseDisabled = 'images/checkbox_unchecked_disabled.gif';
var imgCheckboxTrueDisabled = 'images/checkbox_checked_disabled.gif';
var imgRadioFalse = '/rsvp/gfx/checkbox.png';
var imgRadioTrue = '/rsvp/gfx/checked.png';
var imgRadioFalseDisabled = '/rsvp/gfx/checkbox.png';
var imgRadioTrueDisabled = '/rsvp/gfx/checkbox.png';

Step 3: Now save the file and upload it to your server.
Step 4: Call the script in your head code, like so:

<script type="text/javascript" src="js/wdx_inputreplacer.js"></script>

And voila!

Above is the an example of the RSVP form that I showed early in this post, it has been touched up with some CSS and this JavaScript for the Radio Buttons. I hope this little bit of information helps you begin think of new ways to increase the use of forms on your websites, and help use the element of surprise in design more. Good luck!

(*The example shown was an internal project I oversaw for our open house while working at Aptera.)