| Your Logo Here |
| Your Organization Here |
Making Your Forms Look Nice<html>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.
<head>
<title>Insert a Title for Your Page Here</title>
</head>
<body
text="#000066"
bgcolor="#FFFFFF"
link="#CC0000"
vlink="#CC0000"
alink="#FF9900">
<form action="/cgi-bin/public/formmail/FormMail.pl" method="POST">
<br>
<input
TYPE="hidden"
NAME="recipient"
VALUE="your email address goes here">
<input
TYPE="hidden"
NAME="subject"
VALUE="The subject of your form goes here">
<input
TYPE="hidden"
NAME="required"
VALUE="email,phone,organization">
<input
TYPE="hidden"
NAME="env_report"
VALUE="REMOTE_HOST, HTTP_USER_AGENT">
<input
TYPE="hidden"
NAME="print_config"
VALUE="organization,subject">
<input
TYPE="hidden"
NAME="title"
VALUE="Survey Form Results">
<input
TYPE="hidden"
NAME="return_link_url"
VALUE="http://www.korrnet.org/yoursite">
<input
TYPE="hidden"
NAME="return_link_title"
VALUE="Back to Our Home Page">
<input
TYPE="hidden"
NAME="bgcolor"
VALUE="#FFFFFF">
<input
TYPE="hidden"
NAME="link_color"
VALUE="#CC0000">
<input
TYPE="hidden"
NAME="vlink_color"
VALUE="#CC0000">
<input
TYPE="hidden"
NAME="alink_color"
VALUE="#FF9900">
<input
TYPE="text"
NAME=""
VALUE=""
SIZE=30
MAXLENGTH=70>
<textarea
NAME=""
ROWS=5
COLS=35
wrap=VIRTUAL>
</textarea>
<textarea
NAME=""
ROWS=5
COLS=45
wrap=VIRTUAL>
Please write your comments here:
</textarea>
<input
TYPE="checkbox"
checked
NAME=""
VALUE="">
What days are you available each week?
<p><input
TYPE="checkbox"
NAME="sunday"
VALUE="I am available on Sundays.">
Sunday
<br><input
TYPE="checkbox"
NAME="monday"
VALUE="I am available on Mondays.">
Monday
<br><input
TYPE="checkbox"
NAME="tuesday"
VALUE="I am available on Tuesdays.">
Tuesday
<br><input
TYPE="checkbox"
NAME="wednesday"
VALUE="I am available on Wednesdays.">
Wednesday
<br><input
TYPE="checkbox"
NAME="thursday"
VALUE="I am available on Thursdays">
Thursday
<br><input
TYPE="checkbox"
NAME="friday"
VALUE="I am available on Fridays">
Friday
<br><input
TYPE="checkbox"
NAME="saturday"
VALUE="I am available on Saturdays">
Saturday
<input
TYPE="radio"
checked
NAME=""
VALUE="">
<input
TYPE="radio"
NAME="choice"
VALUE="yes">
yes
<input
TYPE="radio"
NAME="choice"
VALUE="no">
no
<input
TYPE="radio"
NAME="choice"
VALUE="maybe">
maybe
<SELECT
NAME=""
MULTIPLE
SIZE="">
<OPTION SELECTED>
Statement 1
<OPTION>
Statement 2
<OPTION>
Statement 3
</SELECT>
Which statement best describes your computer access?<p>
<select
name="pop up menu 1">
<option SELECTED>
I have my own computer.
<option>
I have access to a computer.
<option>
I do not have access to a computer.
</select>
If I had millions of dollars I'd buy (Note:
hold down the control
key to make more than one selection):<p>
<select
name="pop up menu 2"
multiple>
<option SELECTED>
a new house.
<option>another
car.
<option>Rhode Island.
<option>a new computer.
<option>lots of toys for my cat.
</select>
If I had millions of dollars I'd buy (Note:
hold down the control
key to make more than one selection):<p>
<select
name="pop up menu 3"
multiple
size="3">
<option SELECTED>
a new house.
<option>
another car.
<option>
Rhode Island.
<option>
a new computer.
<option>
lots of toys for my cat.
</select>
<input
TYPE="submit"
NAME="Submit"
VALUE="">
<input
TYPE="submit"
NAME="Submit"
VALUE="Here's the Survey!">
<input
TYPE="reset"
VALUE="">
<input
TYPE="reset"
VALUE="Reset - Start Over">
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:If you want to require more information, add a comma and the name of the next form field you want to require.VALUE="email address"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/yoursiteYou 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:
