Page best viewed in
800x600 with lots of colours
ArgoNet Mail FormAn 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
The BasicsA 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
Creating the mail 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").
|mailto||<input type="hidden" name="mailto" value="firstname.lastname@example.org">|
|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">|
<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:
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!)
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.
<textarea name="message" rows="5" cols="32" wrap="virtual">
Some default text
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)
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
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.
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>
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">
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.
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.