to home page

BWRS
SEARCH

HOMETUTORIALSLINKSFORUMGLOSSARYNEWS
 

AN EXAMPLE FORM-
SIMPLE GUESTBOOK/COMMENTS
FORMS

Example

Okay what we're going to do is set up a straight forward guestbook/comments form like the one below

This e-mails the info entered into the form to a designated e-mail address

FORM SECTION FEEDBACK

Name

Your e-mail

What did you think of the forms tutorial

Cool
Good
Okay
Not great
Pants
Confusing

Did you Find it helpful ?

Definitely
A little
Not Really
No use

Other comments/Suggestions

Please try this one out, as we'd like to know what you think!!

We're not going to show you the full code as by know you should know how to add all the <input> tags by now! Make sure you give all inputs sensible name attributes (e.g. email, name etc.)

Like us, you'll need to put standard submit and reset buttons at the bottom.

we've also added a hidden input as the form otherwise is identical to ones in our Frontpage express and Composer tutorials

You can adapt this in anyway you want. You can alter all of the inputs in it to fit your needs.

The <form> tag set up is where the action is

Here it is at the most basic

<form method="post" action="mailto:your.name@yourmailserver.com">.....

....</form>

This causes the viewer's e-mail program to operate and post the form data onto the designated e-mail address (in this case the made up your.name@yourmailserver.com remember to put in the address you want)

Adapt this form anyway you want to suite your site (think long and hard what e-mail address to use. If in doubt set up a secondary one say at hotmail or yahoo)

Save the page but don't publish it yet as there is some things we'd recommend you add, because if you leave the form the way it is, there are 2 minor problems

Firstly, the data arrives in the form of an attachment (.att or .dat file). You'll need a program to open these (any text editor will do) and the data looks something like thisback to top

Name=Alan+D&email=webmaster@fluffbucket.com&Rating=
Cool&help=a+little&other+text=good+page&submit=submit

Tad messy.

By adding enctype="text/plain" you get the info in the e-mail text and in a readable form with no fiddily attachments

Name=Alan D
email=webmaster@fluffbucket.com
Rating=Good
help=a little
other text=good page
submit=submit

<form method="post" action="mailto:your.name@yourmailserver.com"
enctype="text/plain" >

Now the form will work like that on its own, but some browsers will not warn their users that they have sent an e-mail & they may repeatedly attempt to submit the same data.

Because of this we'd recommend you add a warning

Not surprisingly the easiest way to do this is with JavaScript event handler.

Here's our finalised tag

<form method="post" action="mailto:your.name@yourmailserver.com" enctype="text/plain"
onSubmit="window.alert('this form is being sent by email even if nothing appears to be happening. Do not resubmit');">

The onSubmit attribute tells the browser to open up a warning note (the savvy of you will note you could do the same with a onClick on the submit button)

back to top

BASIC
COMMENTS FORM

back to form propertiesForm Resources

FORM
RESOURCES

This page © 2002 A.Duncan BWRS