Web Design Articles

Customize Your Online Forms

To make the most out of your website you must offer some sort of interactive feature. The easiest way to allow your users to give you feedback is by using forms that your visitors can easily fill up to send you information and comments.

You don't have to settle for the boring default settings for forms (usually a blank rectangle for the entries and a gray rectangle for the submit or send buttons). You can customize these form elements to go with the look and feel of your site.

Your standard forms will look something like this (we're using a simple one box form that will email your email address to the recipient; however, these instructions can be used with any form):

The HTML code for that simple form is:

<form ACTION="mailto:recipient@recipientdomain.com">
<p><strong>Your Email:</strong><input name="Email" value size="10">
<input type="submit" value="Submit"></p>
</form>

To change the appearance of the entry box so that it is surrounded by a rectangle with a one-pixel wide colored border, you can use the style attribute as follows:

<form ACTION="mailto:recipient@recipientdomain.com">
<p><strong>Your Email:</strong><input name="Email" value size="10" style="border: #000080 1px solid">
<input type="submit" value="Submit"></p>
</form>

In this case, we have specified a navy blue, one pixel wide solid border surrounding the input box. Your form will look like this:

Now, let's suppose we want to color the inside of the input box (we will use a light blue color). The code will look like this:

<form ACTION="mailto:recipient@recipientdomain.com">
<p><strong>Your Email:</strong><input name="Email" value size="10" style="border: #000080 1px solid; background: #80ffff;">
<input type="submit" value="Submit"></p>
</form>

The form will look like this now:

Now, let's suppose that we want to change the border and color of the submit button so that its border is a solid one pixel wide navy blue line and the interior is light blue. The code will look like this:

<form ACTION="mailto:recipient@recipientdomain.com">
<p><strong>Your Email:</strong><input name="Email" value size="10" style="border: #000080 1px solid; background: #80ffff;">
<input type="submit" value="Submit" style="border: #000080 1px solid; background: #80ffff;"></p>
</form>

The result will look like this:

Now, if you want to replace the submit button with a graphic element, like this one:



you have to change the code as follows:

<form ACTION="mailto:recipient@recipientdomain.com">
<p><strong>Your Email:</strong><input name="Email" value size="10" style="border: #000080 1px solid; background: #80ffff;">
<input type="image" src="http://www.accordmarketing.com/tid/images/btn_ftr_submit.gif" align="absmiddle" name="Submit Button"></p>
</form>

The location of the button in this case is: "http://www.accordmarketing.com/tid/images/btn_ftr_submit.gif" and the result will look like this:

Finally, if you want to decorate the inside of the input box with a graphic image instead of color, you must change the code as follows:

<form ACTION="mailto:recipient@recipientdomain.com">
<p><strong>Your Email:</strong><input name="Email" value size="10" style="border: #000080 1px solid; background: url(http://www.accordmarketing.com/tid/images/lightstars.jpg)">
<input type="image" src="http://www.accordmarketing.com/tid/images/btn_ftr_submit.gif" align="absmiddle" name="Submit Button"></p>
</form>

The image we chose is this:



The result will look like this:

If by any chance your form includes a comment box that has a scrollbar, you can use the following code, and change the scrollbar's colors as you wish:

<form METHOD="post" ACTION="/cgi-bin/example.cgi"><p>
<textarea wrap="virtual" name="comments" rows="6" cols="20"
STYLE="background:#f0f0f0;
scrollbar-face-color: #80ffff;
scrollbar-track-color: #80ffff;
scrollbar-arrow-color: #000080;
scrollbar-3dlight-color: #000080;
scrollbar-shadow-color: #000080;
scrollbar-highlight-color: #000080;
scrollbar-darkshadow-color: #000080">This example
displays a form with colored scrollbars.
</textarea>
<input type="Submit" VALUE="Submit"
STYLE="color: #000000; border: 1px solid;
background:#ffffff;"></p>
</form>

Your form will look like this:

You can play around by changing the colors assigned to the scrollbars, text area background and submit button to create the look that suits you best.

You can also specify your form attributes in a cascading style sheet.  That way, if you make any changes, these will apply to all the forms on your site, so you won't need to make your changes in each and every form.

These tips should be enough to make some basic modifications that add fun and sophistication to your forms, so that they better blend with the look and feel of your site.

You can freely reprint this article.  Just include the following resource box at the end:

Mario Sanchez publishes The Internet Digest ( http://www.theinternetdigest.net ) a website and newsletter that gives you useful advice on web design and Internet marketing, one free tip at a time