Adding A Form

Want to add a form to your page?
You can add a number of different forms on your website for various reasons.
You can have a form to compile a mailing list, a form to take a quick survey, an order form for selling products, or just about any other type of form that you can think of.

Here is a quick tutorial on how to create a form to use on your web page.
The example I'll use is a quick survey form.

First you'll need to write down the information you want to add to your form.
That will make things go a little quicker when you start writing the code.

Ok, now that you know what you want to ask, it's time to start creating the survey.

The first step in creating a form is to let the browser know that the document contains a form.
You do this by using the FORM tag.
<FORM METHOD=POST ACTION="http://www.cityscape.net/cgi-bin/FormMail.pl">
In this line of code, you are telling the browser that you are creating a form (FORM) and how the results should be handled(METHOD=POST).
The ACTION in this line is the script for form mail used by CityScape.

Next, you'll need to tell the server what to do with the results.

  • <INPUT TYPE="hidden" NAME="recipient" VALUE="[email protected]">
  • <INPUT TYPE="hidden" NAME="subject" VALUE="My Form">
  • <INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.cityscape.net/username/thankyou.html">
In the example, you're telling the server to email you the results by listing the VALUE as your email address.
You're also telling the server to send the email to you with the subject heading "My Form". This is useful for filtering your results with your email program. More on filtering later.
In the third line above, you're telling the server to automatically send the user to a new page after submitting the form. In this case the page is called "thankyou.html".
By entering hidden in the INPUT TYPE, these items will not be displayed on the viewer's browser, nor will they be displayed in the emailed results.

Ok, now it's time to start asking questions.

What is your name:
<INPUT TYPE="text" NAME="name" SIZE=30,1 MAXLENGTH=50>
Please tell me your email address:
<INPUT TYPE="text" NAME="email" SIZE=30,1 MAXLENGTH=50>
In these lines, you are asking the user to tell enter information.
INPUT TYPE defines the area the will be used for the viewer's response. In this case it is a text box that a user can type directly into.
NAME defines the heading on the email you will receive listing the viewer's responses.
SIZE defines the size that the text box will be displayed on a browser. 30 is the width 1 is the height.
MAXLENGTH defines the maximum number of characters a user is allowed to enter in the text box.

How did you find my homepage? (Please choose all that apply)
<INPUT TYPE="checkbox" NAME="found you" VALUE="from a friend">From A Friend
<INPUT TYPE="checkbox" NAME="found you" VALUE="search">Search Engine
<INPUT TYPE="checkbox" NAME="found you" VALUE="you told me">You Told Me
<INPUT TYPE="checkbox" NAME="found you" VALUE="surfed">Just Surfed on In
<INPUT TYPE="checkbox" NAME="found you" VALUE="advertisement">I Saw An Advertisement
Ok, now you want to know how the viewer found you, this is good to how show how promoting your site helps folks find it.
To make is so the viewer can choose more than one item on the list, you use INPUT TYPE="checkbox". This allows the user to choose any one or all of your options.
With these lines, since there is a set choice for the viewer's input, you need to specify a VALUE. This is what will be enter under the heading, found you on the email you receive.

Rate my homepage? (Please choose one)
<INPUT TYPE="radio" NAME="rating" VALUE="great">Great
<INPUT TYPE="radio" NAME="rating" VALUE="so-so">So-So
<INPUT TYPE="radio" NAME="rating" VALUE="not good">Needs Work
Ok, here you only want the viewer to select one option. You do this by using INPUT TYPE="radio".
That will produce a small round button, next to each selection and the viewer will only be able to choose one of the options. If the viewer changes his/her mind, the form will allow the selection to be changed.

Ok, now it's time to have the viewer send the form.
To do this, you'll need the following lines of code.<INPUT TYPE="SUBMIT" VALUE="Send It">
<INPUT TYPE="RESET" VALUE="Reset">
Using INPUT TYPE="SUBMIT" will place a button on the form that will post the results as you specified at the top of the form.
INPUT TYPE="RESET" will place a button that will allow the viewer to clear the form and start over if they'd like.
VALUE is the text that will appear on the button.

One step, left.
Closing the code.
You accomplish this simply by placing the closing form tag at the bottom of your form.
</form>
Ok, now let's see how the code looks without the comments.
Actually, if you really wanted to, you could copy and paste the following code into your html document.
All that you would have to do is change the recipient, and create a thank you page, or send them directly to any page you like by replacing the value of the redirect to that URL.

<FORM METHOD=POST ACTION="http://www.cityscape.net/cgi-bin/FormMail.pl">
<INPUT TYPE="hidden" NAME="recipient" VALUE="[email protected]">
<INPUT TYPE="hidden" NAME="subject" VALUE="My Form">
<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.cityscape.net/username/thankyou.html">
<p>
What is your name:<br>
<INPUT TYPE="text" NAME="name" SIZE=30,1 MAXLENGTH=50><br>
<p>
Please tell me your email address:<br>
<INPUT TYPE="text" NAME="email" SIZE=30,1 MAXLENGTH=50><br>
<p>
How did you find my homepage? (Please choose all that apply)<br>
<INPUT TYPE="checkbox" NAME="found you" VALUE="from a friend">From A Friend<br>
<INPUT TYPE="checkbox" NAME="found you" VALUE="search">Search Engine<br>
<INPUT TYPE="checkbox" NAME="found you" VALUE="you told me">You Told Me<br>
<INPUT TYPE="checkbox" NAME="found you" VALUE="surfed">Just Surfed on In<br>
<INPUT TYPE="checkbox" NAME="found you" VALUE="advertisement">I Saw An Advertisement<br>
<p>
Rate my homepage? (Please choose one)<br>
<INPUT TYPE="radio" NAME="rating" VALUE="great">Great<br>
<INPUT TYPE="radio" NAME="rating" VALUE="so-so">So-So<br>
<INPUT TYPE="radio" NAME="rating" VALUE="not good">Needs Work<br>
<p>
<INPUT TYPE="SUBMIT" VALUE="Send It"><br>
<INPUT TYPE="RESET" VALUE="Reset"><br>
</form>

Here is how the form will look on your page.
This form is not an actual working form until you change the recipient as well as the redirect URL.

My Form

What is your name:

Please tell me your email address:

How did you find my homepage? (Please choose all that apply)
From A Friend
Search Engine
You Told Me
Just Surfed on In
I Saw An Advertisement

Rate my homepage? (Please choose one)
Great
So-So
Needs Work




For more tips visit Matt Script's Formmail Readme.
Choose another tutorial by clicking one of the links below.
  Contact   Help Desk   CityScape News   Home