Forms - Page
3 of 3
Making Your Forms Look
Nice
I thought it would be informative to go
through the entire process that I laid out in the prior two pages to illustrate
how to use this information and Composer to arrange the elements of your
form.
I'm going to start by going back to Forms
- Page 1 of 3 to copy the first form code and paste it into my word
processor. Then, I will copy all of the form elements on Forms
- Page 2 of 3 and paste them into my word processor document just before
the </form> tag. Here is what the whole document looks like (this saves
you from having to go back to the other two pages since you can highlight
the following lines and paste them into your word processor):
Click here
to skip past this part.
<html>
&
nbsp;
<head>
&
nbsp;
<title>Insert a Title for Your Page Here</title>
&
nbsp;
</head>
&
nbsp;
<body
&
nbsp;
text="#000066"
&
nbsp;
bgcolor="#FFFFFF"
&
nbsp;
link="#CC0000"
&
nbsp;
vlink="#CC0000"
&
nbsp;
alink="#FF9900">
&
nbsp;
<form action="/cgi-bin/public/formmail/FormMail.pl"
method="POST">
&
nbsp;
<br>
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="recipient"
&
nbsp;
VALUE="your email address goes here">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="subject"
&
nbsp;
VALUE="The subject of your form goes here">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="required"
&
nbsp;
VALUE="email,phone,organization">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="env_report"
&
nbsp;
VALUE="REMOTE_HOST, HTTP_USER_AGENT">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="print_config"
&
nbsp;
VALUE="organization,subject">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="title"
&
nbsp;
VALUE="Survey Form Results">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="return_link_url"
&
nbsp;
VALUE="http://www.korrnet.org/yoursite">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="return_link_title"
&
nbsp;
VALUE="Back to Our Home Page">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="bgcolor"
&
nbsp;
VALUE="#FFFFFF">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="link_color"
&
nbsp;
VALUE="#CC0000">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="vlink_color"
&
nbsp;
VALUE="#CC0000">
&
nbsp;
<input
&
nbsp;
TYPE="hidden"
&
nbsp;
NAME="alink_color"
&
nbsp;
VALUE="#FF9900">
<input
&
nbsp; &nb
sp;
TYPE="text"
&
nbsp; &nb
sp;
NAME=""
&
nbsp; &nb
sp;
VALUE=""
&
nbsp; &nb
sp;
SIZE=30
&
nbsp; &nb
sp;
MAXLENGTH=70>
<textarea
&
nbsp; &nb
sp;
NAME=""
&
nbsp; &nb
sp;
ROWS=5
&
nbsp; &nb
sp;
COLS=35
&
nbsp; &nb
sp;
wrap=VIRTUAL>
&
nbsp; &nb
sp;
</textarea>
<textarea
&
nbsp; &nb
sp;
NAME=""
&
nbsp; &nb
sp;
ROWS=5
&
nbsp; &nb
sp;
COLS=45
&
nbsp; &nb
sp;
wrap=VIRTUAL>
&
nbsp; &nb
sp;
Please write your comments here:
&
nbsp; &nb
sp;
</textarea>
<input
&
nbsp; &nb
sp;
TYPE="checkbox"
&
nbsp; &nb
sp;
checked
&
nbsp; &nb
sp;
NAME=""
&
nbsp; &nb
sp;
VALUE="">
What days are you available each
week?
&
nbsp; &nb
sp;
<p><input
&
nbsp; &nb
sp;
TYPE="checkbox"
&
nbsp; &nb
sp;
NAME="sunday"
&
nbsp; &nb
sp;
VALUE="I am available on Sundays.">
&
nbsp; &nb
sp;
Sunday
&
nbsp; &nb
sp;
<br><input
&
nbsp; &nb
sp;
TYPE="checkbox"
&
nbsp; &nb
sp;
NAME="monday"
&
nbsp; &nb
sp;
VALUE="I am available on Mondays.">
&
nbsp; &nb
sp;
Monday
&
nbsp; &nb
sp;
<br><input
&
nbsp; &nb
sp;
TYPE="checkbox"
&
nbsp; &nb
sp;
NAME="tuesday"
&
nbsp; &nb
sp;
VALUE="I am available on Tuesdays.">
&
nbsp; &nb
sp;
Tuesday
&
nbsp; &nb
sp;
<br><input
&
nbsp; &nb
sp;
TYPE="checkbox"
&
nbsp; &nb
sp;
NAME="wednesday"
&
nbsp; &nb
sp;
VALUE="I am available on Wednesdays.">
&
nbsp; &nb
sp;
Wednesday
&
nbsp; &nb
sp;
<br><input
&
nbsp; &nb
sp;
TYPE="checkbox"
&
nbsp; &nb
sp;
NAME="thursday"
&
nbsp; &nb
sp;
VALUE="I am available on Thursdays">
&
nbsp; &nb
sp;
Thursday
&
nbsp; &nb
sp;
<br><input
&
nbsp; &nb
sp;
TYPE="checkbox"
&
nbsp; &nb
sp;
NAME="friday"
&
nbsp; &nb
sp;
VALUE="I am available on Fridays">
&
nbsp; &nb
sp;
Friday
&
nbsp; &nb
sp;
<br><input
&
nbsp; &nb
sp;
TYPE="checkbox"
&
nbsp; &nb
sp;
NAME="saturday"
&
nbsp; &nb
sp;
VALUE="I am available on Saturdays">
&
nbsp; &nb
sp;
Saturday
<input
&
nbsp; &nb
sp;
TYPE="radio"
&
nbsp; &nb
sp;
checked
&
nbsp; &nb
sp;
NAME=""
&
nbsp; &nb
sp;
VALUE="">
<input
&
nbsp; &nb
sp;
TYPE="radio"
&
nbsp; &nb
sp;
NAME="choice"
&
nbsp; &nb
sp;
VALUE="yes">
&
nbsp; &nb
sp;
yes
&
nbsp; &nb
sp;
<input
&
nbsp; &nb
sp;
TYPE="radio"
&
nbsp; &nb
sp;
NAME="choice"
&
nbsp; &nb
sp;
VALUE="no">
&
nbsp; &nb
sp;
no
&
nbsp; &nb
sp;
<input
&
nbsp; &nb
sp;
TYPE="radio"
&
nbsp; &nb
sp;
NAME="choice"
&
nbsp; &nb
sp;
VALUE="maybe">
&
nbsp; &nb
sp;
maybe
<SELECT
&
nbsp; &nb
sp;
NAME=""
&
nbsp; &nb
sp;
MULTIPLE
&
nbsp; &nb
sp;
SIZE="">
&
nbsp; &nb
sp;
<OPTION SELECTED>
&
nbsp; &nb
sp;
Statement 1
&
nbsp; &nb
sp;
<OPTION>
&
nbsp; &nb
sp;
Statement 2
&
nbsp; &nb
sp;
<OPTION>
&
nbsp; &nb
sp;
Statement 3
&
nbsp; &nb
sp;
</SELECT>
Which statement best describes your computer
access?<p>
&
nbsp; &nb
sp;
<select
&
nbsp; &nb
sp;
name="pop up menu 1">
&
nbsp; &nb
sp;
<option SELECTED>
&
nbsp; &nb
sp;
I have my own computer.
&
nbsp; &nb
sp;
<option>
&
nbsp; &nb
sp;
I have access to a computer.
&
nbsp; &nb
sp;
<option>
&
nbsp; &nb
sp;
I do not have access to a computer.
&
nbsp; &nb
sp;
</select>
If I had millions of dollars I'd buy (Note:
hold down the control
&
nbsp; &nb
sp;
key to make more than one selection):<p>
&
nbsp; &nb
sp;
<select
&
nbsp; &nb
sp;
name="pop up menu 2"
&
nbsp; &nb
sp;
multiple>
&
nbsp; &nb
sp;
<option SELECTED>
&
nbsp; &nb
sp;
a new house.
&
nbsp; &nb
sp;
<option>another
&
nbsp; &nb
sp;
car.
&
nbsp; &nb
sp;
<option>Rhode Island.
&
nbsp; &nb
sp;
<option>a new computer.
&
nbsp; &nb
sp;
<option>lots of toys for my cat.
&
nbsp; &nb
sp;
</select>
If I had millions of dollars I'd buy (Note:
hold down the control
&
nbsp; &nb
sp;
key to make more than one selection):<p>
&
nbsp; &nb
sp;
<select
&
nbsp; &nb
sp;
name="pop up menu 3"
&
nbsp; &nb
sp;
multiple
&
nbsp; &nb
sp;
size="3">
&
nbsp; &nb
sp;
<option SELECTED>
&
nbsp; &nb
sp;
a new house.
&
nbsp; &nb
sp;
<option>
&
nbsp; &nb
sp;
another car.
&
nbsp; &nb
sp;
<option>
&
nbsp; &nb
sp;
Rhode Island.
&
nbsp; &nb
sp;
<option>
&
nbsp; &nb
sp;
a new computer.
&
nbsp; &nb
sp;
<option>
&
nbsp; &nb
sp;
lots of toys for my cat.
&
nbsp; &nb
sp;
</select>
<input
&
nbsp; &nb
sp;
TYPE="submit"
&
nbsp; &nb
sp;
NAME="Submit"
&
nbsp; &nb
sp;
VALUE="">
<input
&
nbsp; &nb
sp;
TYPE="submit"
&
nbsp; &nb
sp;
NAME="Submit"
&
nbsp; &nb
sp;
VALUE="Here's the Survey!">
<input
&
nbsp; &nb
sp;
TYPE="reset"
&
nbsp; &nb
sp;
VALUE="">
<input
&
nbsp; &nb
sp;
TYPE="reset"
&
nbsp; &nb
sp;
VALUE="Reset - Start Over">
</form>
</body>
</html>
Click
here to return to the top.
Don't forget to save your file as ASCII
DOS Test (or MS DOS Test). Also, before you open the file in
Composer, be sure to rename it so that it ends with "html" instead of "txt."
Click here to
see what the form looks like now. Note: Use your browser's Back
button to return here! (Also, the form won't work . . . it will generate
an error page, which you may want to see, actually.)
Now I am ready to edit my form by opening
the file in Composer. The first thing I noticed when I did this was that
there are a bunch of little yellow and blue symbols all over the page.
You can arrange the these little symbols just as you would any text on
your page, copying, cutting, pasting, and modifying. The little tags may
be inserted into tables too.
These little tags represent the form tags
that you pasted into your word processor. You can right click (with a Mac,
just hold the button down for a few seconds to see the pop up window) on
any of them and select HTML Tag Properties to look at what is in
each of the tags.
You can also edit the tags this way. If
you look back at Forms - Page 2 of 3 you'll
see where I told you to insert "values" and "names" into parts of the code
for each of the form elements.
The first thing I did to my new form page
was give it a title and move the tags around until I like the way it's
arranged. I typed in some text to describe what each of the tags are about
and previewed the page as I went to see that it was shaping up ok. Here
is what the page looks like now:
Click here to
see what the form looks like now.
Please note that this
form will not yet work! (And you'll need your browser's Back button to
return here.)
Finishing Up
To finish up this topic I will show you
how to edit a few of the key tags on your form, and I'll give you an example
setting up a radio button form. Start by editing the tags that identify
your form on the KORRnet server. That is, the information from your
form page must be sent somewhere.
At the top of the page is a series of tags
that are hidden and do not produce a part of the form that is visible to
your visitors. Right click (with a Mac, just hold the button down for a
few seconds to see the pop up window) on the second tag and select HTML
Tag Properties to edit the tag. This is the tag that should contain
the email address to which you want your form's information sent.
Add your email address where it says.
Add a subject to the third tag in the same
way.
The fourth tag is where you set up which
fields on your form must be filled in by a visitor. It is already set up
to require an email address, a telephone number, and an organization name.
For this practice session, delete these by right clicking (with a Mac,
just hold the button down for a few seconds to see the pop up window) on
the tag, selecting HTML Tag Properties, and removing the text between the
quotes after the VALUE="" line.
Note: the values that you
want to require are the names of the fields that you put on your form.
For example, if you want to require an email address, whatever you name
the text box for an email address is what you put in for the VALUE="".
That is, suppose you call the text box with email information "email address."
Then your tag will look like this:
VALUE="email
address"
If you want to require more information, add
a comma and the name of the next form field you want to require.
Skip over to the seventh tag to fill in
the title for the confirmation page that will show up when a visitor submits
the form.
The eighth tag is where you put the address
you want to include on the confirmation page. This is where a visitor can
click to return to your site or the next page that you want them to see.
Right now the VALUE is set for:
http://www.korrnet.org/yoursite
You can reset this to whatever page you want
your visitors to see when they click the link labeled in the following
tag.
The ninth tag is where you label the link
you set in the eighth tag.
Your form should work now. That is, the
parts that have values set will work once you upload your page to the KORRnet
server.
An Example Radio Button Form
Now I'm going to edit the form some more.
I'm going to delete everything after the first thirteen tags (the
hidden fields that are required on all forms) except single radio button
and the submit and reset buttons at the bottom of the page. Now my form
looks like this:
Click here to
see what the form looks like now.
I decided to give my visitors a choice
of one of seven radio buttons. I want them to choose a value from 0 to
7. So, to start, I'll right click (with a Mac, just hold the button down
for a few seconds to see the pop up window) the tag for the unchecked radio
button in Composer and give it a name and a value. I'm going to call it
"choice," and I'm going to delete the word "checked." Further, I'm going
to assign it a value of "0."
Now, I'll copy it and paste it six times.
Next, I'll edit the six copies to give them new values, 1 - 6. Then I add
text to explain what I want my visitors to do and make it look nice by
formatting the page. Here is the final result:
Click here to
see what the form looks like now.
|