800x600 with lots of colours
ArgoNet Mail Form
An updated version of the ArgoNet mail form is now available. It's suggested that you use this one rather than the older version. This documentation is written specifically for the newer script.A list of the parameters needed to run the script appears below; however, some users have requested more of a tutorial on how to create mail forms.
Full list of parameters
| mailto | email address to send resulting data to - which would probably be your own, unless you're designing the website for someone else | |
| mailfrom | email address of the sender - you usually get the user to type this into a text box. If this is not set or filled in, the From: header of the email you receive will be from null.user@argonet.co.uk, replies to which disappear into a sort of black hole so that nobody gets flooded with replies to incorrectly filled out scripts (which is very likely to happen if you use an automated response program). | |
| mailsubject | subject of the email | |
| linkto | Web page that is shown once the user has submitted the data | |
| mailhide | hide all these system parameters in the email that is sent (name="mailhide" value="system") | |
| mailoptions | value can be nobreak, nosort, or both. nobreak means linefeeds will come out as linefeeds, not <br> nosort stops the program sorting all the data fields into alphabetical order | |
| mailnoqueue | the data is sent by an email which is usually sent to the mail queue to wait to be sent; this tells the program not to queue the mail. |
| compulsory | |
| highly recommended |
The Basics
A form looks something like this...
<form>
Enter something:<br>
<input type="text" name="parameter" size="32">
<p align="center">
<input type="submit"> |
<input type="reset">
</p>
</form>
You're encasing the block of HTML to do the form in a <form>...</form> structure, in much the same way as, for instance, a table structure - you define the area of the form, and then put the actual controls that displays stuff inside this, which means you can have more than one form on a page and each form will know what buttons etc. belongs to it.
This example form also has some other fairly common, but by no means compulsory, elements in it. These are the text box - a simple one-line text entry area - created using
See the pattern emerging? Most controls in forms are via
<input type="something">
More on that later.
Creating the mail form
<form...>...</form>
All form data gets sent to a program running on a computer somewhere - usually a program in a directory called cgi-bin on the same server your webpages are uploaded to. CGI stands (in this case) for Common Gateway Interface, which basically means a standard way of sending data to a web-based program (also known as a "script").
The program we're using is located at http://www.argonet.co.uk/cgi-bin/newmail, and to tell the Web browser to us this program you need the following command:
<form method="get" action="http://www.argonet.co.uk/cgi-bin/newmail">
Hidden commands
<input type="hidden"...>
To set up the mail form, there are certain command which have to be passed to the CGI script, to tell it who you are and how you want it to work. Although you can pass all of these using text boxes, there's really no need for the user to see these, or indeed be able to edit them. This is where hidden inputs come in:<input type="hidden" name="mailto" value="webmaster@argonet.co.uk">
With this form, you will probably want to use the following as hidden inputs:
| Name | Example |
| mailto | <input type="hidden" name="mailto" value="webmaster@argonet.co.uk"> |
| mailsubject | <input type="hidden" name="mailsubject" value="Message from web page"> |
| linkto | <input type="hidden" name="linkto" value="index.html"> |
| mailhide | <input type="hidden" name="mailhide" value="system"> |
| mailoptions | <input type="hidden" name="mailoptions" value="nobreak,nosort"> |
| mailnoqueue | <input type="hidden" name="mailnoqueue" value="true"> |
Single line text boxes
<input type="text"...>
These boxes are probably the most commonly used type of form input - they allow the user to type in a short piece of text, such as their name, email address, street name and so on.
<input type="text" name="mailfrom">
The name section can be anything - if it's not one of the options the script recognises then it will be put into the email, so...
<input type="text" name="my_name">
...will result in something like this showing up in the email you receive:
my_name
"Richard Goodwin"
You can enter some text automatically by using the value="..." attribute:
<input type="text" name="mailfrom" value="@argonet.co.uk">
You can set the size of the box on screen by using the size=".." attribute, and set the maximum number of characters that can be entered by using maxlength=".." - for instance, size="32" maxlength="64" (note that they don't have to be the same!)
Multiple line text areas
<textarea>...</textarea>
For larger text boxes, the rules change a little - you use <textarea>...</textarea> tags, with the default text in between the tags.
You can set the height and width using rows="5" and cols="32"; there are also a few different ways of set how text wraps inside the box, the main two being: wrap="virtual"|"physical"> - virtual just wraps while the user is typing, whereas physical means that the text that is received at the other end is formatted in the same way.
Example:
<textarea name="message" rows="5" cols="32" wrap="virtual">
Some default text
</textarea>
Tick boxes and radio icons
<input type="checkbox"|"radio">
Tick (or "check") boxes and radio icons are very similar - the user clicks on them to select or deselect them, and any selected items are listed in the email you receive at the other end. You can have any number of tick boxes, all of which should have a different name to differentiate them; radio icons, however, are for multiple choice questions where selected one icon with the same name unselects any others with the same name. If you want to have more than one group of radio icons, just give the second set a different name.
You can change the value that is sent through by using the value="..." attribute - vital for radio icons to tell one from the other, but for tick boxes perhaps you can use it to give it an easier-to-read value (usually it returns either "on" or doesn't appear at all if switched off); and you can select an icon by default simply by adding checked (with no extra parameters)
Examples:
Decision time: <br> <input type="radio" name="decision" value="yes" checked> Yes <br> <input type="radio" name="decision" value="no">; No <br> <input type="radio" name="decision" value="maybe"> Maybe
Menus
<select...><option>...</select>
You can create menus by nesting <option...> tags inside a <select..></select> pair. This is quite easy to show in operation as that is what is used to do the list of links to other sections of this site at the top of the page!
The opening <select...> tag should have a name="..." to identify it; you can also add multiple (with no extra parameters) so that more than one option can be selected in the list. Some computers also allow you to add size=".." so that a box with more than one line is shown - instead of using a separate menu to select an option, the user can select from one (or more) of the options displayed inside the box.
Options are added using the <option> tag. These tags are immediately followed by the plain text which is used as that option's display in the menu. This text is returned in the email as the value of this selection, unless you define another piece of text using the value="..." attribute. Finally, as with other tags you can add selected (with no extra parameters) to choose an option other than the first in the list to be the default.
Example:
Although this is not a mail form, I'll use the URL changing script as an example of a selection form:
<form method="get" action=In the above code, the cgi script is passed url= and then the value of whatever option was selected - for instance, if the General support option was selected, url=/support/ is passed on. In a mail form this would turn up as
"http://www.argonet.co.uk/cgi-bin/dropdown"> <select name="url"> <option value="/support/">General support <option value="/support/acorn/">Acorn support <option value="/support/pc/">PC support <option value="/support/mac/">Mac support <option value="/support/web" SELECTED>Web stuff <option value="http://www.argonet.co.uk/">ArgoNet home <option value="users">User pages <option value="links">Links elsewhere </select><input type="submit" value="Go!"> </form>
url "/support/"
Buttons
<input type="submit"|"reset">
There are basically two buttons you should be aware of - a submit button in the form of a <input type="submit"> tag will probably be needed on all forms to send the data off (although you can use images instead - see below), and it's usually nice to have <input type="reset"> so that the user has a way of resetting the form back to the default values in one easy step.
Both of these can have the text displayed on the button changed by using the value="..." attribute. For instance:
You can <input type="submit" value="send this"> or you can <input type="reset" value="wipe it clean">
Images
<input type="image"...>
You can also use an image instead of a submit button; its attributes should be familiar to those of you who have used the <img...> tag with its attributes.
The main attribute you need is to tell the browser where to get the image from; as with the <img...> tag this is done using the src="..." attribute. You can also include width=".." and height=".." tags to tell the browser how big the image will be before it is downloaded. One change however is that to change the text displayed if the image can't load, you don't use the alt="..." attribute; here it is value="..." instead.
However, by using an image instead of a "proper" submit button, you also get extra information sent along with the form data - the x and y coordinates of where you clicked on the image, which obviously with the right cgi script is used to make imagemaps work. You can change the name of this data from x and y using the name="..." attribute, so for instance name="wubble" will return wubble_x and wubble_y. This could be useful to differentiate between different images in the same form, although don't forget that, due to the image acting like a submit button, you will only be able to get the data from one image at a time.
Putting it all together
The following form is an example mailing system. If you examine the source of this document you should be able to find it and copy it for your own use.Don't forget to change the mailto, mailsubject and linkto options - it won't do anything useful unless you do change them. Also, to change the colours you should do a search and replace for the light blue (#CCCCFF), dark blue (#3300AA) and possibly the white text (#FFFFFF).
Do not use this form as it stands to email ArgoNet - any data from this form as it stands will vanish, and won't go through to anyone. If you need to email ArgoNet, please contact them though the proper channels.
Documentation based on forms documentation from HTML³ by Richard Goodwin, and reproduced here with permission.