Forms 1 HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
FORMS 1

ADDING A FORM

I seem to get a lot more questions about, and requests for assistance with forms than any other part of this tutorial, so I have completely revised this section and added a lot more detail and explanations. It is essential that you read the instructions carefully, especially any information from your ISP. If you have any queries about this section, or any others, please click HELPat the bottom of each page.

The most common form you are likely to use at this stage is one that sends you an email with the completed form details contained in it. You will usually receive it via your email mailbox. Just remember, it will NOT look like a form when you receive it - it will look like a normal email with various headings as specified by you. This appears to confuse a lot of people so I need to emphasize this point.

ESSENTIAL The first thing you must do is create your web site, however small, with a link pointing to your form. (My help form is an example.) You must then contact your ISP (Internet Service Provider) and ask them for full details of how to get a form onto their server.

Without going into too many details, what you will need is access to their "CGI-bin" (CGI stands for Common Gateway Interface.) Most will have one or two "standard" CGI scripts they will let you use. For your purposes all you need to know is the format of the coding. It is just simple HTML that you have been doing all the time.

Some free hosting services, like Geocities, have their own type of form, written in a way to suit their requirements. You just fill in the blanks, in effect. You will find that what works on one server will not work on another. That is why you must ask your own ISP.

Decide what kind of form you want to include on your website. You may be doing a survey, or may need an order form, or you want some feedback, but you want it in a specific format, not just a normal email. You've probably seen and filled out dozens of forms yourself by now, so here is how they work.

FORM METHODS

Let's assume you have all the information you need from your ISP. To start we would have some variation of the following:

<FORM METHOD="POST" ACTION="/cgi-bin/formmailer"> This is variable - your ISP will tell you what goes here. Other scripts I've seen go like this:

FORM METHOD=POST ACTION="/cgi-bin/nph-dtmailer">

so you can see there is quite a bit of variation between servers.

Next comes all the information you want to add, then the form is closed with </FORM>.

Make sure you replace the "<FORM METHOD="POST" ACTION="/cgi-bin/formmailer">" with the format supplied by your ISP.

STARTING A FORM

For this exercise we will create a mythical form creator called Rosie Brown, who is doing a shoppers' survey. Her user name is rosbrown, and her ISP is www.bunyip.com. Have a look at the form she has created - Rosie Brown's form . Click your BACK button to return (or Alt + left arrow).

She has started a new HTML page with a heading, Rosie Brown's Shoppers' Survey. Under that she puts something like, "Please complete the form". If there are certain essential bits of information you must have, you can mark them with an asterisk. So next you can put * = required.

So this is what we have entered so far:

<CENTER>
<FONT FACE="Arial,Verdana,sans-serif" SIZE=3> <B>Rosie Brown's Shoppers' Survey></B></FONT>
</CENTER>
<P>
Please complete the form
<P>
<B>* = required</B>
<HR>
<FORM METHOD="post" ACTION="/cgi-bin/formmailer">

(All the input goes here.)

</FORM>

Let's side-track a bit now and look at some of the fields you will need to get the form working.

HIDDEN FIELDS

There are certain essential and non-essential parts to a form. Let's look at some of the options you can use, the parts you won't actually see.

These are some commonly used ones, but there are many other variations. Again, your ISP should supply you with a list which you must follow. You can click the underlined links to go to an explanation of each variable, how it works, and what it does:

<INPUT TYPE="HIDDEN" NAME="recipient" VALUE="your email address">
<INPUT TYPE="HIDDEN" NAME="subject" VALUE="subject of form">
<INPUT TYPE="HIDDEN" NAME="email" VALUE="">
<INPUT TYPE="HIDDEN" NAME="required"  VALUE="field required">
<INPUT TYPE="HIDDEN" NAME="thankyou" VALUE="thankyou.html">
<INPUT TYPE="HIDDEN" NAME="other" VALUE="anything else">

PARAMETERS

The following is intended as a rough guide only. Make sure you use the parameters been supplied by your ISP.

• recipient

This form field allows you to specify where your form results are to be sent. You should set this option as a HIDDEN field with the VALUE as your email address. This is usually the only mandatory field and is the one where the form results will be sent. Using Rosie Brown again, this will become:

• subject

This will set the subject of the email that is sent to you. For example, Rosie Brown has two web sites with forms that send email responses to her, and she needs to identify which is which. To make the identification easier, she has called the subject line of responses sent via the forms on her sites to "Shoppers' Form 1" and "Shoppers' Form 2" so she can easily tell which they are.

<INPUT TYPE="HIDDEN" NAME="subject" VALUE="Shoppers' Form 1"> • email

This allows you to send a reply to your respondent using his or her email address. If you want to be able to reply you should make this a REQUIRED field.

Your email address:

<INPUT TYPE="HIDDEN" NAME="required" VALUE="email"> • required

There may be sections of the form that you absolutely need to have completed. Just place all field names that you want to be mandatory into this field. Then, if the required fields are not completed, the user will be notified of what they need to fill in, and a link back to the form will be provided. At the top of the form put * = required. Then place an asterisk next to each required field. For an example click HERE .

For example, Rosie Brown needs people to fill in the "email" and "location" fields on the "Shoppers' Survey" form. She has decided to make them required fields like this:

<INPUT TYPE="hidden" NAME="required" VALUE="email,location"> You can specify as many required fields as you like with this method. Just make sure that "VALUE" corresponds to the actual field NAME. And don't forget to put in the "unhidden" part of the HTML. In the above example you still need to include:

Your email address: <BR>

and

Your location: <BR>

If a required field is not completed and the form is sent, an error message will be generated, and user will be asked to complete the required sections of the form. The mail will not be sent until this is done.

• thankyou

It is a nice touch to have a "Thank You" page which automatically appears after the SUBMIT button is pressed. On it you can put some reassuring message or greeting so your respondent is fairly sure that his or her email has been sent. You will need to create a new web page, a piece of cake by now! Call it "thankyou.html" or "thanks.html" and include the link to it. You can use and modify the one given here, which is "thanks1.html". This is how it is done:

<INPUT TYPE="HIDDEN" NAME="thankyou" VALUE="thanks1.html"> To see what your visitor will see, click here for an example of a simple Thank You page.

• other

Any other values you set in the form will be sent at the end of the email, reading "NAME", followed by "VALUE". So, this entry doesn't have to be called other. You can call it "Comments", or "Reasons", or whatever you like.

For example, Rosie Brown has a TEXTAREA set up for feedback for her shoppers' page, where visitors can comment on the site. She has named this field "Comments":

<TEXTAREA NAME="comments" ROWS="5" COLS="40"></TEXTAREA> This field will be sent in the email as the word "comments", followed by whatever the visitor typed in. You can include any of these fields you decide to make up in the required field, also.

All the above is an overview. Next we get to add the actual input to make the form look like a form.

Next: Forms 2 - Adding Input

Advanced Index