Adding a MailForm...

Introduction

The mailform is currently (March 1999) the only Freeserve provided CGI(common gateway interface) script available to Freeserve users for use on their pages. It provides a method for visitors to provide a standard set of responses to a set of questions.

The method is documented at http://www.freeserve.net/support/cserve_web.htm, but the form there is poorly laid out and has confused many a newcomer to HTML.

Note that Freeserve does not support Microsoft FrontPage extensions ("Web-bots") and that to create a mailform in Microsoft Frontpage or Frontpage Express you will have to use the standard Freeserve mailform illustrated on this page.

I'm a great believer in handcoding HTML and if you haven't already done so then I suggest you download NoteTab Light from http://www.notetab.com/ or Arachnophilia.

EZPad is another freeware HTML editor that I've come across recently. It reminds me of earlier versions of Homesite, and looks to be very useful for creating forms. You can if you wish simply use Notepad.

Wherever yourname appears in the following text you must replace it with your Freeserve username when you are creating your own forms

Step 1

Create a page that the visitor will be directed to when they have completed the form. For the sake of illustration I'll call it thanks.html.

Step 2

Think of the address that you want the email that the form generates to be addressed to. For the sake of illustration I'll call it webform@yourname.freeserve.co.uk. It's the part before the @ [webform@yourname.freeserve.co.uk] that is particularly important.

Step 3

Create the Form tags. Like a lot of HTML a form has an opening tag

<FORM>

and a closing tag

</FORM>

and all the form elements must appear between these tags.

The basic tags Freeserve form tags are:

<FORM METHOD="POST" ACTION="/cgi-bin/mailform.cgi">

</FORM>

Note that you do not need to create the directory /cgi-bin/ or move the mailform.cgi script to this directory.

Step 4

You need to add a field to indicate where the form output should be sent. If you want to receive mail to webform@yourname.freeserve.co.uk you would choose webform as the user

<INPUT TYPE="hidden" NAME="mailuser" value="webform">

Note: DO NOT change the the value of NAME to anything else, leave it as mailuser.

The raw form now looks like this:

<FORM METHOD="POST" ACTION="/cgi-bin/mailform.cgi">

<INPUT TYPE="hidden" NAME="mailuser" value="webform">

</FORM>

Step 5

You need to add a field to indicate a page that the visitor is redirected to after submitting the form. Let us suppose that want your visitors to be redirected to a page http://www.yourpage.freeserve.co.uk/thanks.html

<INPUT TYPE="hidden" NAME="targetpage" value="http://www.yourpage.freeserve.co.uk/thanks.html">

Note: You cannot simply use thanks.html because the server looks for /cgi-bin/thanks.html [which doesn't exist].

Note: DO NOT change the the value of NAME to anything else, leave it as targetpage.

Step 6

The default mail format is HTML (yuk) and if you would prefer plain text email you need to add the line:

<INPUT TYPE="hidden" NAME="textoutput" VALUE="yes">

Step 7

You need to add a submit button

<INPUT TYPE="submit" VALUE="Submit">

and a reset button [to allow the visitor to clear all the entries and start again.]

<INPUT TYPE="reset" VALUE="Reset">

The raw form now looks this:

<FORM METHOD="POST" ACTION="/cgi-bin/mailform.cgi">

<INPUT TYPE="hidden" NAME="mailuser" value="webform">
<INPUT TYPE="hidden" NAME="targetpage" value="http://www.yourpage.freeserve.co.uk/thanks.html">  
<INPUT TYPE="hidden" NAME="textoutput" VALUE="yes">

<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Reset">
</FORM>

Step 8

You can now start on the design of the form.

There are 6 basic elements in form [in a addition to the Submit and Reset buttons mentioned above].

The hidden field
<INPUT TYPE="Hidden" NAME="Comment1" VALUE="Very useful for adding comments the email generated from a form">

The form output can appear rather cryptic and you may find it useful to add comments in the form of hidden fields.

The text box

<INPUT TYPE="Text" NAME="Textbox Demo"
VALUE="Suitable for a single line of text" SIZE="30">

For the script to generate an entry you must give each element a unique name which is designated in the NAME = " " box.

The text area

<TEXTAREA NAME="The Text Area" COLS="30" ROWS="6">
Suitable for longer pieces of text.

That span multiple lines.

Like this
</TEXTAREA>

Radio Buttons Are you hungry? Yes No

Yes <INPUT TYPE="Radio" NAME="Hungry" VALUE="Yes" ALIGN="MIDDLE"> 
No <INPUT TYPE="Radio" NAME="Hungry" VALUE="No" ALIGN="MIDDLE">

Note that for this pair to toggle [i.e. only one can be active] they must have the same NAME="" - Hungry in this case. You can more than two elements in a radio button array Yes No Maybe

If you have more than three items, you might want to consider a drop down list

Checkboxes
Which of the following do you use:

A computer
A monitor
A keyboard
A mouse
None of the above

A computer <INPUT TYPE="Checkbox" NAME="computer" ALIGN="MIDDLE">

A monitor <INPUT TYPE="Checkbox" NAME="monitor" ALIGN="MIDDLE">

A keyboard <INPUT TYPE="Checkbox" NAME="computer" ALIGN="MIDDLE">

A mouse <INPUT TYPE="Checkbox" NAME="mouse" ALIGN="MIDDLE">

None of the above <INPUT TYPE="Checkbox" NAME="computer" ALIGN="MIDDLE">

Note that I've used a table to align the checkboxes.

It's worth remembering that an unfilled checkbox doesn't returned a value in the form.

Drop down lists
Where does the sun set?

<SELECT NAME="Sunset">
<OPTION VALUE="North">North</OPTION>
<OPTION VALUE="South">South</OPTION>
<OPTION VALUE="East">East</OPTION>
<OPTION VALUE="West">West</OPTION>
<OPTION VALUE="Don't know">Don't know</OPTION>
</SELECT>

The completed form in its raw state looks like this

The completed form (slightly) modified looks like this

And that's the basic mailform.

The email that you receive has your address in the From: field and there is no way of automatically replying to the sender.

Back to The Absolute Beginner's Guide...