|
Web Forms can be created on either Bethel's Internet web or the
bethelnet. The process is almost identical, but one setting is different.
In general there are three components needed to develop a functional web
form.
- The Web form which can be created in Dreamweaver, Frontpage, another
web authoring program or if you are a purist, html.
- The configuration file (.fmc), which is a text only file that feeds
information to a cgi "program" called FormMail.
- The (optional) Results file (.results) which is
simply a web page that you create (or use a pre-existing template) that
tells the user what they have submitted.
How to Create a Web Form
Here is how to create a form that will collect the persons name, their
e-mail address, their favorite color, their favorite fruit, and some
information about why they think their preferences are what they are.
Step 1: Insert a form field into your web page. Do this by going to the
Insert Menu and highlighting Form. This will give
you a submenu where you select what type of form field to add. In newer
version of FrontPage you can 'pull' this submenu off of the Insert
Menu to create a floating menu by clicking and dragging the top of
the submenu. The first think you want to insert is the form itself.
Upon clicking the Form option, a dotted box will appear with
Submit and Reset buttons inside it. Make
sure your cursor is inside this box by clicking it, and add all of your
form fields inside this box.
Step 2: Insert the form components from the Form
menu. For this tutorial I chose:
- The name, e-mail address, and favorite fruit uses a
Texbox
- The favorite color uses a Checkbox
- The why question uses a Text Area
- The submit and clear form uses a Button
Step 3. Link your form and your configuration file by using the POST
method and the ACTION. To do this, right-click inside the form, and
select Form Properties.
- Where to store results:
Send to other should be selected, and
Custom Script should be highlighted from the drop-down menu.
- Form Properties: Give the
form a descriptive name in the Form Name textbox.
- Click the Options Button, and in the Action
textbox, put the following:
Step 4: Save your form (I called this one forms.html)
The Form
End of form
How to Create a Configuration File (Using FrontPage)
The configuration file is a text only file with configuration commands
(See the
Form Mail - How To document for all possible commands that you can
use) that tell form mail how to process your form. For this form I created
a NEW document in FrontPage, switched to code view and deleted all the
html code and typed the following configuration commands and settings:
recipients=r-kistler@bethel.edu (This
field is required)
abuselimiter=on
require=email,realname,color,fruit
namemap=realname:My Name:,email:My e-mail,color:My favorite
color:,fruit:My favorite fruit:,reason:My reasons:
sort=order:realname,email,color,fruit,reason
return_link_url=http://www.bethel.edu/its/documents/Forms/forms.html
return_link_title=Return to the Forms Tutorial Page
hidefields=Submit,Reset
confirmemail=1
subject=My Fruit and Color Preferences
confirmheader="You have submitted the following as your color and fruit
preferences. "
confirmfooter="Now that you have tested this form and want to make your
own, if you have any questions, contact Bob Kistler or Andy Altepeter"
referer=http://www.bethel.edu/its/documents/Forms/forms.html
[# in front of any configuration parameter
disables that parameter]
The configuration file above for the color form on this page will:
- send r-kistler@bethel.edu your color and fruit preferences (recipients=)
- Turn the abuse limiter on so that spammers cannot use your form to
send emails. You must have this setting (abuselimiter=on)
if your from is on the Internet and sends confirmation e-mails. For
Internet forms you can set this feature to off (abuselimiter=off) for
testing your form.
- require that all fields be filled in but the reason field (require=)
- rename the short field names to more meaningful names in the
confirmation email and web page (namemap=)
- sort the results fields in the order designated (sort=)
- put a link back to the form (return_link=) from the
results page with at title of "Return to the Forms Tutorial Page" (return_link_title=)
- send an e-mail confirmation (confirmemail=1) to the
user with the subject of "My Fruit and Color Preference" (subject=);
the header "You have submitted the following as your color and fruit
preferences. " (confirmheader=) and a footer of "Now
that you have tested this form and want to make your own, if you have
any questions, contact Bob Kistler or Andy Altepeter" (confirmfooter=)
- allows only this color/fruit preferences form to use the associated
configuration file. (referer=)
- hides the submit and reset fields in the confirmation notices (hidefields=)
Finally, I went to File|Save As and saved the file with
the name of the form file and added a .fmc (which stands
for formmail configuration)
to the end of the name (e.g. forms.html.fmc). I saved the file into
a
folder called data which I placed into my forms folder. Note: This data
directory is the required location for your configuration (.fmc)
and results (.results) files for Internet forms,
but for forms on bethelnet, the
.fmc and .results files should be in the same directory(folder) as the
form -
the data directory is not required, and in fact, will not work.
How to Create a (optional) Results/Confirmation Page
You can simply use one of the three default Results/Confirmation
Pages and entirely skip this step (Just add stdtemplate=cgcs
or stdtemplate=college or stdtemplate=official
to the Configuration file). Otherwise you just create a normal html page
that will show the form user what they have successfully submitted on
your form, and add in the following in the place in your confirmation
page that you want the results to appear (add it to the code and not the
page text)
<!--%formresults-->
Then save this file and name it with the name of the form and add on
.results (e.g. forms.html.results) and also put this
file into your data folder (Internet Forms) or
the directory (folder) where your form resides (bethelnet forms). (See
the
Form Mail - How To document for all possible commands that you can
use)
Finally publish all of your form components to the web server. This
form has the following components and all are located in the a folder
called Forms in my web site:
- forms.html (your form can have any html compliant name)
- data folder (This folder can be in the same
directory as the form, or you may want a common data directory at the
root level of your web site in which to place all of your
configuration files)
- forms.html.fmc
- forms.html.results
What to do if you want to put two forms on one web page:
1) Name each form distinctly. The name of the form needs to be in a
hidden form field inside each form, like the following:
<input type="hidden" name="formname" value="form1" />
2) The configuration file can have multiple form configurations. Say
we have two forms (form1, form2): the configuration file would look
like:
form form1 {
form1 config parameters
}
form form2 {
form2 config parameters
}
3) If your forms are using different templates (.results), then the
template name should have the '.form1 or .form2'
appended to the end, (e.g. formname.htm.results.form1).
However, both forms can use the same template file. If you wish at least
one of your forms to use a default template file, name that file:
formname.htm.results
|
