datapitstop » Website Help »Using FormsDirectory
Simply put, forms allow you to interact with your visitors. In case you don't know what a form is, click here. Every check box, radio button, text box, and even the submit button are form "variables." I'm sure all of you have used a form at one point or another. In fact, every administrative page after you login contains a form.

We have created a new FORM tag for you to use. This tag is extremely easy to use. In fact, it's much easier to use than the standard HTML <FORM> tag. This new tag enables you to have your form data e-mailed to you (or multiple people). Form data is simply the information that was submitted with the form. You will understand this more clearly when you advance through this document. You may also choose to not have any form data e-mailed, or you may even select which items in your form to e-mail.

You also have the option of using Javascript with your forms. This will enable you to manipulate the form data the user submits. For example, you could have the user enter in a dollar amount into a box and then the number of months into another. You could then use Javascript to calculate the interest for them. There are many other neat things you can do with Javascript and forms.

Finally, you have two options for accessing your form data. After someone fills out your form, you may either log into your site to view the posted form data or you may have the form data e-mailed to you.

This document contains information on forms only. Javascript and forms are not covered. The standard HTML <FORM> tag is also not covered. This is meant to walk you through creating a simple form. It will then show you how to have the form data e-mailed to you. Lastly, it will cover how to view the form data through your administrative page. Whether you choose to have the form data e-mailed to you or not, you will always be able to retrieve it through your administrative page.

Quick Jump

Overview

First off, remember we are only discussing simple forms here. Think of forms as consisting of 4 different parts. First, you have to declare the form. Second, you have to place input items such as text boxes, check boxes, and radio boxes in the form. Third, you have to give the user a way to submit the form. Forth, you have to end the form. These three elements translate into the following tags (don't worry about their usage at this point):
  • Declare the form:
      Start the form so it knows what variables to include.


  • Add input items:
      Add check boxes, text boxes, radio buttons, etc. This is the content.


  • Add a submit button:
      Lets the user submit the form for processing.


  • End the form   Tell your page where to end the form.
Simple eh? Well, it's not quite this simple. This was just a quick overview. Now, lets create a full form. Lets say we have a business and we want to create a form to get feedback on how our customer service is. Our form will consist of radio buttons, check boxes, single line text boxes, and a multiple line text box where the user can leave comments. Here is our form:

  CODE  
<!FORM:TO=address1@datapitstop.us,address2@datapitstop.us,address3@datapitstop.us!]
Name: <INPUT TYPE="TEXT" NAME="NAME" VALUE="" SIZE="40" MAXLENGTH="40">
<BR>
<OL>
 <LI>
  The hours when we are open.<BR><BR>
  <INPUT TYPE="radio" NAME="hours" value="poor">poor
  <INPUT TYPE="radio" NAME="hours" value="fair">fair
  <INPUT TYPE="radio" NAME="hours" value="good">good
  <INPUT TYPE="radio" NAME="hours" value="very good">very good
  <INPUT TYPE="radio" NAME="hours" value="excellent">excellent
 </LI>
 <BR><BR>
 <LI>
  The convenience of our location.<BR><BR>
  <INPUT TYPE="radio" NAME="convenience" value="poor">poor
  <INPUT TYPE="radio" NAME="convenience" value="fair">fair
  <INPUT TYPE="radio" NAME="convenience" value="good">good
  <INPUT TYPE="radio" NAME="convenience" value="very good">very good
  <INPUT TYPE="radio" NAME="convenience" value="excellent">excellent
 </LI>
 <BR><BR>
 <LI>
  The length of time you had to wait for service.<BR><BR>
  <INPUT TYPE="radio" NAME="wait" value="poor">poor
  <INPUT TYPE="radio" NAME="wait" value="fair">fair
  <INPUT TYPE="radio" NAME="wait" value="good">good
  <INPUT TYPE="radio" NAME="wait" value="very good">very good
  <INPUT TYPE="radio" NAME="wait" value="excellent">excellent
 </LI>
 <BR><BR>
 <LI>
  The friendliness and courtesy shown to you by the reception staff.
  <BR><BR>
  <INPUT TYPE="radio" NAME="reception" value="poor">poor
  <INPUT TYPE="radio" NAME="reception" value="fair">fair
  <INPUT TYPE="radio" NAME="reception" value="good">good
  <INPUT TYPE="radio" NAME="reception" value="very good">very good
  <INPUT TYPE="radio" NAME="reception" value="excellent">excellent
 </LI>
 <BR><BR>
 <LI>
  The cost of the services provided by us.<BR><BR>
  <INPUT TYPE="radio" NAME="cost" value="poor">poor
  <INPUT TYPE="radio" NAME="cost" value="fair">fair
  <INPUT TYPE="radio" NAME="cost" value="good">good
  <INPUT TYPE="radio" NAME="cost" value="very good">very good
  <INPUT TYPE="radio" NAME="cost" value="excellent">excellent
 </LI>
 <BR><BR>
 <LI>
  Would you recommend us to a friend?<BR><BR>
  <input type="radio" name="recommend" value="Yes">yes
  <input type="radio" name="recommend" value="No">no
  <input type="radio" name="recommend" value="Maybe">maybe
 </LI>
 <BR><BR>
 <LI>
  What additional services would you like for us to provide?<BR><BR>
  <INPUT TYPE="checkbox" NAME="additional" value="Service 1">Service 1
  <INPUT TYPE="checkbox" NAME="additional" value="Service 2">Service 2
  <INPUT TYPE="checkbox" NAME="additional" value="Service 3">Service 3
  <INPUT TYPE="checkbox" NAME="additional" value="Service 4">Service 4
  <INPUT TYPE="checkbox" NAME="additional" value="Service 5">Service 5
 </LI>
 <BR><BR>
</OL>
Additional comments or suggestions?<BR>
<TEXTAREA ROWS="5" NAME="comments" COLS="50"></TEXTAREA><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Submit Form">
<INPUT TYPE="RESET" VALUE="Reset Form">
</FORM>
  RESULT  
Name: 
  1. The hours when we are open.

    poor fair good very good excellent


  2. The convenience of our location.

    poor fair good very good excellent


  3. The length of time you had to wait for service.

    poor fair good very good excellent


  4. The friendliness and courtesy shown to you by the reception staff.

    poor fair good very good excellent


  5. The cost of the services provided by us.

    poor fair good very good excellent


  6. Would you recommend us to a friend?

    yes no maybe


  7. What additional services would you like for us to provide?

    Service 1 Service 2 Service 3 Service 4 Service 5


Additional comments or suggestions?




This is what a standard form looks like. See, there's no magic or trickery involved here. There are several things that need pointed out in this example.

The first thing to note is the first line of code, which looks like this:

<!FORM:TO=address1@datapitstop.us,address2@datapitstop.us,address3@datapitstop.us!]

This tag, as mentioned above, starts our form. The e-mail addresses after the colon are the e-mail address that are mailed the form data. If you use more than one e-mail address you need to separate them by commas. You do not need to enter e-mail addresses however. If you did not want the form data e-mailed you could have simply done this instead:

<!FORM:!]

There is no difference here except no one will receive the e-mail. You also need to specify where the form needs to end. Notice that the very last tag is our </FORM> tag.

There is one important concept you need to understand here. If you notice, each text box, textarea, check box, and radio button has a NAME and a VALUE. These are called NAME/VALUE pairs. Think about it. You have multiple check boxes, radio buttons, and text boxes. You need a way to identify them. You give them a NAME to tell them apart. All these boxes and buttons have names, but what good are they if they don't have any meaning. What are they? What do they represent? This is the VALUE. These NAME/VALUE pairs are stored when a user submits your form. Each one is discussed in further detail.

NAME
All of our form variables have names. The exceptions are the SUBMIT and RESET buttons. We'll get to that later. The actual name you give a variable is not important. OK, I lied, it IS important if you want DO NOT want a variable e-mailed to you. If you do not want a variable e-mailed to you, you need to place an underscore ( _ ) character before it's name. If you look at the above form example, you should notice all of the NAMEs have a name of _something-or-other. This means that particular variable will NOT be included in the e-mail. Look at the following code snippet for a quick example.

This variable will be e-mailed:
<INPUT TYPE="radio" NAME="cost" value="excellent">excellent

This variable WILL NOT be e-mailed:
<INPUT TYPE="radio" NAME="_cost" value="excellent">excellent


As mentioned, each item in your form needs to have a unique NAME. As with everything, there is an exception. In the above example, we asked users to answer questions. We chose to use a radio button. The user can only choose one option/radio button. The choices we gave the user were poor, fair, good, very good, excellent. Here is a code snippet of this:

The hours when we are open.
<INPUT TYPE="radio" NAME="_hours" value="poor">poor
<INPUT TYPE="radio" NAME="_hours" value="fair">fair
<INPUT TYPE="radio" NAME="_hours" value="good">good
<INPUT TYPE="radio" NAME="_hours" value="very good">very good
<INPUT TYPE="radio" NAME="_hours" value="excellent">excellent

The thing to note is that the user can only choose one option with a radio button. I stated above that each item in your form needed to have it's own unique name. If the user can only choose one option, why name them different? As you can see here, poor, fair, good, very good, and excellent all have the same NAME. You could name them different, but that would be confusing and clumsy.

VALUE
The next item to note are the values of your variables. This is the actual form data that will be sent. Simply put, this is the information your form provides. In some cases, like check boxes or radio buttons, you pre-define these. You say, when a user checks this box or radio button, it means "this". Look at the following code snippet.

The convenience of our location.
<INPUT TYPE="radio" NAME="_convenience" value="poor">poor
<INPUT TYPE="radio" NAME="_convenience" value="fair">fair
<INPUT TYPE="radio" NAME="_convenience" value="good">good
<INPUT TYPE="radio" NAME="_convenience" value="very good">very good
<INPUT TYPE="radio" NAME="_convenience" value="excellent">excellent

Here, we used a radio button. A user can only select 1 radio button. We pre-define the value of each radio button. Here, we chose poor, fair, good, very good, and excellent as values. Working with text boxes is completely different. Whatever is in a text box when the form is submitted is the VALUE of it. In short, you will no know what is in the box, so you don't know the VALUE, so normally you do not pre-define it. Make sense? If not, how do you know a head of time what the user will type into a text box? You don't so you don't pre-define it.

This is a code snippet that doesn't pre-define a text box VALUE.

Name: <INPUT TYPE="TEXT" NAME="NAME" VALUE="" SIZE="40" MAXLENGTH="40">

Notice the VALUE="". This is what I mean by not pre-defining the VALUE. This is what is produces:

Name:

What if we pre-define a text box? This is the code and result:

Name: <INPUT TYPE="TEXT" NAME="NAME" VALUE="Testing 1234" SIZE="40" MAXLENGTH="40">

Name:

Spiffy huh. Feel free to pre-define a text box if you like. The user can change what's in the box however. The TEXTAREA (multiple line text box) tag work the same. You can pre-define a VALUE but the user can change it. The main point of this is that you can pre-define a VALUE for a text box/TEXTAREA, but you are not guaranteed to receive that value. This usually isn't a problem because you can use a check box or radio button instead. It's just worth noting.

You'll notice that we have 2 different form variables that do not have NAMEs. These are the SUBMIT and RESET buttons at the bottom of the page. These reason they do not have names is because they do not need them. We could have given them NAMEs if we wanted. The reason they are not needed is because they perform functions. The SUBMIT button submits the form. The RESET resets all choices made on the form back to the defaults. This is for user convince if they want to start over.


Tag Specifics

Now that you understand how forms work, lets go into a little more detail on some of the tags we used in our example form above.

Starting/Ending tags

We have already discussed this but lets go over it one more time.

Start a form with one of the following:
<!FORM:!] - No e-mail recipients
<!FORM:TO=email@address!] - One e-mail recipient
<!FORM:TO=email@address,email@address!] - Multiple recipients.

End a form with:
</FORM>

INPUT tag

The INPUT tag enables you to use several different types of input fields. These range from text boxes to radio buttons. We will only discuss the types that you can use on DataPitStop. Remember, you need to give your INPUT fields a NAME. Also remember that if you want the variable e-mailed to you place an underscore before it's name.

TEXT:
TEXT enables you to place a text box in your form. This was used in the above form. The following is an example of this.

<INPUT TYPE="TEXT" NAME="OUR-BOX" VALUE="" SIZE="20" MAXLENGTH="25">

This is an INPUT of TYPE TEXT. It has a NAME of "OUR-BOX". The visible SIZE of our text box is 20 characters. The maximum a user can type into our box is 25 characters. Here is what this produces:



PASSWORD:
The PASSWORD TYPE is a lot like the TEXT box with one major difference. When a user types in the box, the characters do not show. All the user can see are asterisks. If you've ever supplied a password on a web page of any kind, you've no doubt seen this. The attributes are the same as TEXT.

<INPUT TYPE="PASSWORD" NAME="OUR-PASSWORD" VALUE="" SIZE="20" MAXLENGTH="25">

This creates a PASSWORD box. Our box is 20 visible characters wide and the maximum number of characters a user may type into the box is 25. This is the this produces:



CHECKBOX:
A CHECKBOX is, uh, a check box. The user has the ability to, uh, check it. Here is an example:

<INPUT TYPE="CHECKBOX" NAME="OUR-CHECK" VALUE="OUR VALUE" CHECKED>

This produces a check box. Notice the "CHECKED" attribute at the end? This makes the check box checked by default. Meaning, when someone visits the page the check box is already checked. If you leave CHECKED off, the box is unchecked. Here is what the above produces.



RADIO:
This create a RADIO button. A radio button was used heavily above. It is used when you want to make the user choose one of many options.

<INPUT TYPE="RADIO" NAME="OUR-RADIO" VALUE="CHOICE 1">1
<INPUT TYPE="RADIO" NAME="OUR-RADIO" VALUE="CHOICE 2" CHECKED>2
<INPUT TYPE="RADIO" NAME="OUR-RADIO" VALUE="CHOICE 3">3

Much like the CHECKBOX, if you want a radio button selected by default when a user visits the page you need to use the CHECKED attribute, as illustrated above. Here is what this produces:

1
2
3


HIDDEN
The TYPE of HIDDEN is how it sounds. They are hidden and are submitted with your other form variables when the user submits the form. This has many uses. For example, what if you wanted your form to include a date/time the form was submitted. You could pull the date and time with Javascript, then use hidden variables to include them in your form. Here is how to use HIDDEN variables.

<INPUT TYPE="HIDDEN" NAME="DATE" VALUE="the current date"> <INPUT TYPE="HIDDEN" NAME="TIME" VALUE="the current time">

Make note you would need to use Javascript to pull the current date/time. I would show the result of this but guess what? The variables are hidden so you wouldn't be able to see them!

BUTTON:
The TYPE BUTTON is used mainly with scripting languages or CGIs. You may also use it with Javascript. TYPE BUTTON places a button on the page and when clicked performs a certain action. For example, you could have a form verification button that that the user can click to verify information before they submit the form. That is a generic example but worth noting.

<INPUT TYPE="BUTTON" NAME="MYBUTTON" VALUE="CLICK ME">

The VALUE is the buttons label. It will produce the following.



RESET:
The RESET TYPE is used to clear all the forms fields. This gives the user the ability to start over from scratch. Note you do not need to give it a NAME.

<INPUT TYPE="RESET" VALUE="Reset Form">

The name of the reset button is the VALUE. In this case it's "Reset Form". Here is our result.



SUBMIT:
The TYPE SUBMIT is used to submit your form. When a user clicks the submit button, the form is submitted.

<INPUT TYPE="SUBMIT" VALUE="Submit My Form!">

This example creates a submit button. On the button is "Submit My Form!". Note you do not need to have a NAME for the submit button. Here is our result.



IMAGE:
The IMAGE TYPE is a submit button with a custom appearance. There are several different attributes to the IMAGE tag. Here is an example of the IMAGE TYPE tag.

<INPUT TYPE="IMAGE" SRC="myimage.png" ALIGN="LEFT" WIDTH="110" HEIGHT="25" BORDER="0" NAME="CLICK ME">

As you can see, there are many attributes here. The following is a walkthrough of the attributes.

  • SRC - Your image.
  • ALIGN - Image alignment
  • WIDTH - Image width in pixels
  • Height- - Image height in pixels
  • Border - Image border in pixels


The result of all of this is the following:



TEXTAREA tag
The TEXTAREA tag places a multiple line text box on your page. This allows users to enter in larger amounts of data. The following is an example.

<TEXTAREA COLS="50" ROWS="10" WRAP="SOFT" NAME="MY-TEXTAREA"></TEXTAREA>

The TEXTAREA attributes are defined as follows.

  • COLS - The number of columns to display. (i.e. the number of characters wide)
  • ROWS - The number of character rows to display
  • WRAP - The way the text is wrapped within the box. Choices are:
      Soft - Visually wraps, submits data unwrapped.
      Hard - Visually wraps, submits data wrapped.
      Off  - Windows scrolls rather than wraps.
  • NAME - Name of the variable.
  • READONLY(not shown in example) - This makes the box read only (i.e. users cannot type in.


The result of the above is the following:



Also notice the ending <TEXTAREA> tag? This is required. Anything in between the tags will be in your box! Here is an extension of the example above:

<TEXTAREA COLS="50" ROWS="10" WRAP="SOFT" NAME="MY TEXTAREA">
This is an example with text between the two TEXTAREA tags.
</TEXTAREA>

This will produce the following:



As you can see, whatever you enter in between the two tags will be displayed in the box. This is where the READONLY tag comes in. You can pre-fill the text box and mark it as read-only.

Posted Form Data

Every time a user fills out one of your forms, the form data is stored for you. Keep in mind this only pertains to forms created with the special <!FORM:!] tag. To view your Posted Form Data, click on the Posted Form Data radio button located under Site Features on your Administrative panel. Specifics on how to do this can be located on this web page.

The other method of viewing posted form data is via e-mail. As already discussed, you need to add your e-mail address(s) to the <!FORM:!] tag. You must also pre-pend your form variable names with an underscore. When form data is e-mailed to you, it will look like the following:

[HOURS                        ] = good
[CONVENIENCE                  ] = very good
[WAIT                         ] = very good
[RECEPTION                    ] = good
[COST                         ] = very good
[RECOMMEND                    ] = Yes
[ADDITIONAL                   ] = Service 1
[ADDITIONAL                   ] = Service 2
[ADDITIONAL                   ] = Service 3
[ADDITIONAL                   ] = Service 4
[ADDITIONAL                   ] = Service 5
[COMMENTS                     ] = Your service was very good.
Please keep up the good work. Have a nice day.

The first column is the variable name, minus the underscore. The value after the equals sign is the value of the variable. In short, these are your NAME/VALUE pairs. The form data is primitive but this enables you to do what you wish with the data.



This concludes our brief introduction on forms. There are many other things you can do with forms. As mentioned early in this document, you may use Javascript with forms. If you want to accomplish more advanced tasks with your forms, this is the way to do.
Picture