Forms - Page
1 of 3
Forms allow you to accept information from
those who visit your site in a format that you choose. You can give forms
the appearance of a questionnaire, an application, or survey. For a more
detailed and complete description of how the forms program on KORRnet works,
please see the author's web site:
FormMail
http://www.scriptarchive.com/formmail.html
The FormMail program is a product of:
Matt's Script Archive
http://www.scriptarchive.com
Here's an Example
Form that I created based on a survey that the Loudon County Health
Improvement Council distributed (you can see the results of their survey
by visiting their website):
Example
Form
Unfortunately, Composer does not make forms.
Some of the other programs that I mentioned on the page about editors
do make forms (I used Site Aid and
my word processor to edit the forms on these pages . . . I got ideas for
the elements of the Example Form by looking
at source code for pages I liked). However, making forms is not too difficult.
You can use any word processor to make forms. Just be sure to save the
file as an ASCII DOS Text file.
I will give an example of each element
of a form here and the code you must include on the page containing the
form so that it will work on KORRnet. You can copy and paste code directly
from this page to make your forms, and you can make a copy of the Example
Form linked above, then modify it to suit your needs.
Note: this form,
as you see it illustrated here, will only work if your site is on
KORRnet.
Preliminary Steps
To get started, open a new file in your
word processor, drag your mouse over the following code to copy and paste
it into your word processor:
Save the code you just copied as an ASCII
DOS Text file. For example, in WordPerfect click File and select
Save. Use the pop up menu where it says "File Type" to select
ASCII DOS Text.
After you save the file, you will probably
have to rename it so that it will be an HTML file. Your word processor
will most likely name your file with a txt extension. Rename it with the
extension htm or html. For example, my file was named "test.txt", and I
renamed it "test.html" Windows will warn you that changing the file name
may make it unreadable, but disregard the warning.
A Look at the Code
I learned what the code you just copied
does by testing the lines to see what they do. The code will work as is,
once you fill in some of the necessary details; however, you can modify
it to suit your needs. Also, after you get all the form elements you want
inserted into your page, you can return to the Netscape Composer
to edit the layout of your page. Here is what I've learned so far.
Note: you can
click each of the numbers below to go to the line being
discussed.
1 - Fill in a Title for
Your Page
The third line is where you need to put
a title for your form page. Just insert your title between the title tags.
Tags, since I don't think I've mentioned
them, are codes that tell your browser about the web page you are viewing.
They are instructions. Composer creates tags for you while you are editing
a page. Tags are contained in brackets that look like this: <>. Generally,
tags come in pairs, a beginning tag and an ending tag. For example, to
print in bold text I surround the text I want in bold type with bold tags:
<b>This text will be bold in
a browser.</b>
See (look in the source code at this line):
This text will be bold in a
browser.
Composer inserts bold tags automatically for
you.
Please see the HTML
guides page for more information about tags.
2 - Choose Some
Colors
You can fill in some colors for your form
page here. The colors listed are the ones that I use for this site, namely
navy blue text and red links. My suggestion is that you wait until you
are ready to open your form in Composer to choose your colors.
<body
text="#000066"
bgcolor="#FFFFFF"
link="#CC0000"
vlink="#CC0000"
alink="#FF9900">
Composer will fill these in automatically
when you choose colors from the
Format menu (in composer, click
Format and select Page Colors and Properties to see what
I mean). For your general information, the characters in the quotes following
the pound sign, are references to colors in hexadecimal format. Here is
what each line specifies:
text= the text color on your
page
bgcolor= the background color of your
page
link= the color of the links on your page
vlink= the color of visited links
alink= the color the link turns when you
click it
3 - Put in an email
Address
Skip down to the first input tag:
<input
TYPE="hidden"
NAME="recipient"
VALUE="your email address goes
here">
Replace the VALUE line between the quotes
with the email address for which you want the results of your form to go.
If you look at the source code on the Example Form
you will see my email address there (which means, by the way, that any
time you fill in the example forms on this site, I get an email from
you!).
4 - Put in a
Subject
The next input tag allows you to specify
a subject line. When you get email from your form, whatever you put here
will be the subject of your email.
<input
TYPE="hidden"
NAME="subject"
VALUE="The subject of your form goes
here">
On the Example Form,
I replaced the VALUE line between the quotes with
Nonprofit Organization Survey
5 - Required Fields
This is where you can specify parts of
the form you require to be filled in. If these parts of the form are left
blank, the visitor will be told that the form is incomplete and that they
should go back to the form to fill the in required information. On my form,
I specified that whoever fills it in should give me their email address,
phone number, and the name of their organization. When you put form elements
on your page, each element (by element I mean a piece of information you
are collecting by having the visitor fill in a blank, check a box, or choose
a selection) of your form will have a name. The blank on the Example
Form asking for an email address is named "email," and the same is
true for the other required fields.
<input
TYPE="hidden"
NAME="required"
VALUE="email,phone,organization">
When a visitor to your page submits their
form, the KORRnet computer scans what they've entered to see if it complies
with what you require. You can list whatever parts of your form you wish
to require a visitor to complete. (This is discussed on the next page,
in the section on names.)
6 - Another Title
Skip down a few lines to the input tag
you see below. When a visitor fills in your form, they will see a page
that shows them what they just submitted. This is where you set the title
for that page. I inserted "Survey Form Results" for my page title.
<input
TYPE="hidden"
NAME="title"
VALUE="Survey Form Results">
7 - Return Link
You can include a link back to a page on
your site on the page a visitor sees after submitting your form. On the
Example
Form you are directed back to this forms page. Enter the address to
whatever page you want to link back to between the quotes on the VALUE
line.
<input
TYPE="hidden"
NAME="return_link_url"
VALUE="http://www.korrnet.org/yoursite">
8 - Name the Return
Link
You can call the return link whatever you
like. On the Example Form, I put "Back to the
Forms Page" as the return link. On the code above is "Back to Our Home
Page."
<input
TYPE="hidden"
NAME="return_link_title"
VALUE="Back to Our Home Page">
9 - More Colors
This is optional. These input tags allow
you to specify the color of the page you will see after the form
you make is filled out. Go to the Example Form
and try it out. If you leave this alone, you will see the same colors as
I use on this site. If you have a color scheme for your site, you may want
to change these codes.
This is what each input tag means:
<input
TYPE="hidden"
NAME="bgcolor"
VALUE="#FFFFFF">
specifies the background
color of your page
<input
TYPE="hidden"
NAME="link_color"
VALUE="#CC0000">
specifies the color of
the link back to your home page
<input
TYPE="hidden"
NAME="vlink_color"
VALUE="#CC0000">
specifies the color of
visited links
<input
TYPE="hidden"
NAME="alink_color"
VALUE="#FF9900">
specifies the color the
link turns when you click it
The part of each line that you change are
the six characters between the quotes and after the pound sign. If you
want to make the colors match what you use on your site, look at the source
code for one of the pages on your site. Somewhere, probably in the body
tag, you will see where your colors have been specified. Copy them and
paste them into your form page. For example, on this page when I click
View
and select Page Source, I see this body tag just below the ending
tag for the head of the page:
<body text="#000066" bgcolor="#FFFFFF"
link="#CC0000" vlink="#CC0000" alink="#FF9900">
I copied each of the colors from here into
the form page.
Next Topic
As soon as you have this part done, you
are ready to start inserting the form elements you want to use on your
page.