Home > Advanced > Submission Forms

One way to make your site appear a little more professional is to require the use of forms rather than relying entirely on common "mailto:" links. SO, let's get right down to this business of forms, okay?

Form Fields

Forms seem to mystify many people, but in reality they are pretty simple. Forms are composed of a collection of various fields. You can think of these form fields as a sort of compound HTML tag, if you like. In the examples below, the parts of the code that you can edit to suit your needs will be in red text.

Here's a very simple example of the general layout of a form:

<form>
    <Field 1>
    <Field 2>
    <Field 3>
</form>

If you wanted an email form, the first line of code would look like this.

<form method="post" action="mailto:username@your_domain.com">

The term method means that the particular method of this form is to perform the action to post it to email. This form field requires that you code it exactly the way it is laid out above; and one thing to keep in mind is that there should be no space between mailto: and your email address.

Text Boxes

The little windows that you enter text into are typically called text boxes. One thing you will want to require in a form is a place for the user to enter his/her name. Here's a working text box for you and the code for it below.

<input type="text" name="Name" size="25">

The first part of the code above tells the computer that the following code will be text input. The term name does two things: First, it gives an identification, a name, to this field, and secondly, formats the email that will be generated when this form is submitted by the user. This field will look like this in your email:

Name=username entered

Notice that Name is in red text. You can replace this with anything you need to, such as name, Visitor's Name, Title, etc. and it will reflected in the email you receive.

The word size refers to number of spaces wide that you want the box to be.

Text Area Boxes

A text area box lets you control not only the width of the box, but also its height. Here's a small text area box and below it, the code used.

<textarea name="Information" rows=5 cols=50> </textarea>

Always remember that this field also needs a closing tag- </textarea>. As in the former example, the word Information can be changed to whatever you like. When you receive email generated from the form, there will be a line like this in it:

Information=Whatever is entered.

The word rows is given the number of rows high that you want the box to display. Notice the scrollbar on the right of the window- this will allow your visitor to enter more text than the window itself can display, so you don't have to make a monstrous box size to handle a lot of text... it will simply scroll up or down.

And cols lets you enter the number of columns wide that you want the box to be.

Selection Boxes

A selction box allows you to give the user a list of selections-- as many as you need-- without taking up a lot of room on your page. Here's an example with the code below it:

<select name="Choice" size="1">
<option selected>Item 1
<option>Item 2
<option>Item 3
<option>Item 4
<option>Item 5
</select>

Here again the name Choice can be whatever you like. The size denotes how many lines you want visible in your box. <Option selected> denotes the particular item you want to be in the little window before it is clicked on by the user-- in this case, Item 1, but the choice is yours. The other options will be listed below this, and of course are editable by you.

Hidden Fields

Some people actually think there is something sinister about a hidden field, but they are really just a simple and very handy tool for making forms. Here's an example of a hidden field:

Gotcha, huh? If you expected to see something, maybe it's time for a coffee break....8~)

Really though, the whole purpose of a hidden field is that it's not supposed to be seen, but rather to give instuction to the browser about certain form actions. For instance, you will of course want to tell the browser where to send the emailed results of your form, so you would use a hidden field for this like so:

<input type="hidden" name="recipient" value="username@your_domain.com">

Check Box Fields

While a checkbox is a pretty small item, it's still considered a field. Here's the example:

What do you want from Life?<br>
<input type="checkbox" name="User_Wants" value="Money"> Money<br>
<input type="checkbox" name="User_Wants" value="Fame"> Fame<br>
<input type="checkbox" name="User_Wants" value="Power"> Power<br>
<input type="checkbox" name="User_does_not_Want" value=" Hives">Hives<br>

Checkboxes are best used when more than one choice may be made from the list. The visitor can choose just one checkbox, or all of them that apply.

Radio Button Fields

When you want the user to have only one choice out of several, you can use a radio button. Radio buttons, no matter how many you list, will only work for one of the choices. Click on the ones below to see what I mean.

And the code...

Pick a number:
<input type="radio" name="Number_picked" value="1">1
<input type="radio" name="Number_picked" value="2">2
<input type="radio" name="Number_picked" value="3">3

Form Submission

When your form is completed you must have a way to cause the form to be sent by email. Here's how they will look:

<input type="reset">
<input type="submit">

Simple, eh? The reset button will reset the form if the visitor makes a mistake somewhere, and the submit button will do just that-- submit it to be emailed.

CGI

Forms are best used with CGI (Common Gateway Interface) but exactly how this is done depends on the particular server your site is set up on. If you are hosted by Sitebilder, you can go Here for information about the use of forms with your cgi-bin.

Well, that should give you a fundamental knowledge of making your own forms. Last but not least, be sure to add the closing </form> tag to your work, and you're all set!

You can find more on form fields and using email CGI forms with FormMail in our Support section by clicking Here.