EZ-NetTools Customer Support

Call Us: 800-627-4780

Form Tutorial
You've seen the Information Request block in EZ-PageBuilder™. It is a quick and easy way to get some basic information about your site's visitors. Have you ever wanted to ask your own questions? With some simple HTML in an HTML block, you can ask your visitors just about anything you would like! HTML forms allow a visitor to input information. The processing of incoming data is usually handled by a script or program written in Perl or another language that manipulates text, files, and information. On our servers, there is a form-handling CGI that will export all of the information from your form to a specified email address. Keep in mind that, although we provide this small form to help you, we do not offer support for HTML or other code.

Form Method and Action
The first thing that you type for your fill-out form is the Form Method and Action. This is where you will specify the CGI form-handler and the email address. The URL is: http://abc.eznettools.net/cgi-bin/ez-pagebuilder/form.cgi?you@youremail.com. Obviously you will replace the "you@youremail.com" with your actual email address.

<form method="post"

Next, you need to decide what questions that you want to ask, and how you will ask them. You can use single or multiple text fields, larger fields, checkboxes, radio buttons, pull-down lists and scroll-down lists.

Creating Your Form

Single or multiple fields
In your form, you might want to ask questions that have a single one word answer. For example, here is what you would type (after the form tag above) to have four fields that ask for an email address, a first name, a last name, and a subject:

<input type="input" name="from" />Your Email Address<br>
<input type="input" name="firstname" />Your First Name<br>
<input type="input" name="lastname" />Your Last Name<br>
<input type="input" name="subject" />Subject<br>

Here is what the result looks like:

Your Email Address
Your First Name
Your Last Name

Larger Fields
Just like at the end of the information request block, you may want to have a larger text area at the end of your form for comments. You first need to decide how many columns and rows that you want to have. Let's say that you want to have 7 rows, and 45 columns. Here is what you would type:

Please place any questions or comments here:<br>
<textarea rows="7" cols="45" name="suggestions"></textarea>

Here is what the result looks like:

Please place any questions or comments here:

Let's say that you wanted to ask a question like "What are some things that you like to do?" and you would like your users to be able to select more than one option. You could have a list of things with checkboxes. If you wanted the list to be: Watch TV, play on the Internet, read a book, play sports, and study, you would type:

What are some things that you like to do?<br>
<input type="checkbox" name="like" value="TV" />Watch TV<br>
<input type="checkbox" name="like" value="internet" />Play on the Internet<br>
<input type="checkbox" name="like" value="read" />Read a book<br>
<input type="checkbox" name="like" value="sports" />Play sports<br>
<input type="checkbox" name="like" value="study" />Study<br>

Here is what the result looks like:

What are some things that you like to do?
Watch TV
Play on the Internet
Read a book
Play sports

Radio Buttons
If you ever want to ask a question with one answer, you can use radio buttons. If you wanted to ask "What Internet browser are you using right now?", and you wanted to have the choices Netscape Navigator, Mosaic, and Internet Explorer, you would type:

What Internet browser are you using right now?<br>
<input type="radio" name="browser" value="Navigator 4.x">Netscape Navigator<br>
<input type="radio" name="browser" value="Mosaic">Mosaic<br>
<input type="radio" name="browser" value="Internetex">Internet Explorer<br>

Here is what the result looks like:

What Internet browser are you using right now?
Netscape Navigator
Internet Explorer

Pull-Down Lists
Another way to ask a question with only one answer is to use a pull-down menu. You can use the SELECTED command to have some option besides the first be selected by default. If you wanted to ask "What is your favorite color?" with a list of red, yellow, orange, green, blue, purple, black, and brown, with black selected, you would type:

What is your favorite color?<br>
<select name="color">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
<option value="black" selected="selected">Black</option>
<option value="brown">Brown</option>

Here is what the result looks like:

What is your favorite color?

Scroll-Down Lists
Perhaps you want to have a scroll-down list on your page. With this, you can decide whether or not you want people to be able to select more that one item. If multiple item selection is possible, the user has to hold down the command or shift key. You can also decide how many of the lines you want visible. Below are two lists of the same things. In the first one, you can only select one item, and it is showing three lines. In the second one, you can select one or more items by holding down command or shift. The second list is showing four lines.

What is your favorite video game system?<br>
<select name="video game" size="3">
<option value="nintendo64">Nintendo 64</option>
<option value="playstation">Sony Playstation</option>
<option value="dreamcast">Sega Dreamcast</option>
<option value="arcade">Arcade Games</option>

What is your favorite video game system?<br>
<select="video game" multiple="multiple" size="4"><br>
<option value="nintendo64">Nintendo 64</option><br>
<option value="playstation">Sony Playstation</option><br>
<option value="dreamcast">Sega Dreamcast</option><br>
<option value="arcade">Arcade Games</option><br>

Here is what the result looks like:

What is your favorite video game system?

Here is the result of the second example:

What is your favorite video game system? (Hold shift to select more than one)

Reset/Submit Form Button
On most pages with HTML forms, there is a reset button at the bottom next to the "submit" or "send" button. This allows the user to start the form over without submitting. Also, a submit button allows the user to send their answers to the email address specified in the form action tag. To have reset and send buttons, you would type:

<input type="reset" VALUE="Reset" />
<input type="submit" VALUE="Submit" />

Here is what the result looks like:

Redirecting to Another Page
Once your form has been submitted, the page will reload and it will display the same form with no information in it. This can become confusing to your customers and may make them wonder if the form was submitted at all. You can type in a hidden field that will tell your form to rediect to another page. Here's what you would type before your "Submit" button:

<input type="hidden" name="rurl" value="http://support.eznettools.net/Resources/tutorials/thanks.html">

Be sure that the page you redirected to, includes the full URL for the "value" field. For example, http://abc.eznettools.net/yourdomainname/yourpage.html would be the correct format to enter for your redirected page. If you do not do this, the redirection will not work.

Here is what the result looks like:

NOTE: At the very end of your form, you must include </form> or your forms will not process!! To see a complete listing of this form click here.
**This article was taken from the EZ-NetAdvantage!™, Issue V.

 Creating Forms