Website Design: Part Eleven

DESIGNING YOUR OWN WEBSITE

Vicky Vickers

PART ELEVEN: FORMS
Forms can make your website interactive, as they allow your visitors to send you specific information and/or order items which you have for sale. When a visitor to your site fills out a form and sends it, you will receive it as an e-mail message.

The first thing you need to do, is to decide what information you wish to solicit from your visitors. Then you should break it down into small parts (fields), ie. name, address, phone, etc. Decide on a name for each field, something so that when it comes in with your e-mail, you will know what each answer is for. When you receive an e-mail message from a form, it lists the names you have given each field, with the answer beside each. When a checkbox is checked it will say "on" next to its name.

As in most HTML, all forms require a beginning and an end. Depending on your Internet Service Provider's requirements, the beginning will look something like this:

NOTE: The form method (in the first line) will vary, depending on your ISP. You will need to check with them to get the exact formula. The one used is for Island Net.

The three most often used parts of a form are simple input boxes (for names, address, etc.), text areas (for longer text) and checkboxes (a selectable box). You can experiment with the sizes in the Input Boxes, and the rows and columns in the Text Areas to get the effect you want. The tags for the three parts are:

Checkboxes: <input type=CHECKBOX name=(insert your field name here)> (Insert your request for information here)

Input Boxes: <input name=(insert your field name here) size="50"> (Insert your request for information here)

Text Areas:
(Insert your request for information here)
<textarea name=(insert your field name here) rows="10" cols="80" wrap="on"></textarea>
Now we come to the end of the form. Again, this could vary, depending on your ISP. The end tags will place two buttons at the bottom of your form. One to send the information to you and one to clear the form so the visitor can start over again. The tag for this will look something like this:

As the length of the field names (ie. name, address, etc.) are usually different, I find it looks better if you put the Input Box or Checkbox first on the line and the description of what you want put in the box second. This will ensure that the boxes line up under each other. With a text area, it is best to put the description above the text area with <BR> after it. Alternatively, you can use tables within your forms to keep them aligned.

See below for an example of a form, which I designed for Connor Development (before guestbooks) to gather comments from our visitors. We don't use it anymore, however, it is a good example of a fairly simple form, and is actually the first form I ever designed.

Tip
Some ISPs have a guestbook feature for the use of their clients. It is a specialized form which is run by a Common Gateway Interface (CGI) script. Fortunately, you don't have to know how to write CGI scripts in order to use it. You just need to contact your ISP and find out what the HTML tags are which you need to use it.

SAMPLE FORM (NOTE: HTML tags are in italics, see below for the resulting form)

<HTML><HEAD><TITLE>Comment Form</TITLE></HEAD>

<BODY>

<CENTER><H2>Company Name</H2>

<H1>Comments Please</H1></CENTER>

<HR size=10><P>

We invite your comments, questions, suggestions, etc. on the field on Public Participation. We would also like to hear of any workshops, seminars, new books and interesting news items which we can include in our quarterly newsletter. To send us your comments please use the form below.<P>

<HR size=5><P>

<CENTER><B>To submit comment and information requests,<BR>
click on "Send Comment" at the bottom of this page</B></CENTER><P>

<input name=NAME size=50> Name<BR>
<input name=EMAIL size=50> E-Mail<BR>
<input name=SUBJECT size=50> Subject<P>

<B>Comments:</B><BR>
<textarea name=COMMENT rows=10 cols=80 wrap="on"></textarea><P>

<HR ><P>

<B>Please send me more detailed free information on:</B><BR>
<input type=CHECKBOX name=WK1> Full Day on-site Program Design Workshop<BR>
<input type=CHECKBOX name=WK2> Two-day on-site Skills Development Workshop<BR>
<input type=CHECKBOX name=CONSULTING> Consulting Services<BR>
<input type=CHECKBOX name=TELE> Teleconsulting Services<P>
<B><input type=CHECKBOX name=NEWS> Please send me a Complementary Newsletter</B><P>

<input name=NAME size=50> Name<BR>
<input name=ORGANIZATION size=50> Organization<BR>
<input name=ADDRESS size=50> Address<BR>
<input name=CITY size=50> City<BR>
<input name=PROVINCE size=50> Province/State<BR>
<input name=CODE size=50> Postal/Zip Code<BR>
<input name=COUNTRY size=50> Country<BR>
<input name=EMAIL size=50> E-Mail<BR>
<input name=PHONE size=50> Phone<BR>
<input name=FAX size =50> Fax<BR>
<input name=URL size =50> URL<P>

<HR><P>

<CENTER><B>Click on "Send Comment" to submit your comment and information requests</B><P>

<input type="submit" value="Send Comment"><input type="reset" value="Clear Form"><BR></form><P>

<HR size=10><P>

Return to <a href="homepage.html">Company Name</a><BR></CENTER>

</BODY></HTML>

Resulting Form:

Company Name

Comments Please

We invite your comments, questions, suggestions, etc. on the field on Public Participation. We would also like to hear of any workshops, seminars, new books and interesting news items which we can include in our quarterly newsletter. To send us your comments please use the form below.

To submit comment and information requests,
click on "Send Comment" at the bottom of this page
Name
E-Mail
Subject
Comments:

Please send me more detailed free information on:
Full Day on-site Program Design Workshop
Two-day on-site Skills Development Workshop
Consulting Services
Teleconsulting Services
Please send me a Complementary Newsletter
Name
Organization
Address
City
Province/State
Postal/Zip Code
Country
E-Mail
Phone
Fax
URL

Click on "Send Comment" to submit your comment and information requests

Return to Company Name

Acknowledgements
This article was published in the January 1997 issue of the Victoria Macintosh Users Group's monthly newsletter "MACtalk" in Vicky's monthly article "VMUG On-Line" and in the Spring 1997 issue of the Web Enthusiasts Association of Victoria's quarterly on-line newsletter.

Vicky Vickers is the owner of Word Crunchers, Etc. which specializes in website design and HTML training. She is a past-president (1994-6) and former webmaster (1995-8) of Victoria Macintosh Users Group (VMUG). She also founded and was the first president (1996) of the Web Enthusiasts Association of Victoria (WEAV).

All rights reserved. For commercial purposes, no part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording, Internet, or any information storage and retrieval system, without the express permission in writing from the author.

Return to Library Index

Call me today at 250-595-6593 to discuss your website design
or e-mail me at vicky@crunchers.bc.ca

Vicky Vickers, Word Crunchers, Etc.
3290 Shelley Street, Victoria, BC, V8P 4A5
Fax: 250-595-7384 (call first)