PCTutorweb.com :: Inserting Forms into your web page

NEW! check out the email encoder at bottom of page

Forms provide a way of soliciting information from people who visit your site. You can create interactive forms that your audience can use to order a product, provide feedback, fill out a questionnaire. Here are two methods for adding forms to your web pages. The first one is the easiest. The second one requires a CGI script to handle the form data.

Method 1: Creating a simple Email form

This is probably the simplest way to get information from your viewer back via email. Once they have filled in the form and clicked the Submit button, you will receive an email in your Inbox which will show the field names and how they were filled in. (I am using Dreamweaver.)

1. Insert the form field on the page using the Form panel.

2. Inside the form field, insert the field labels and fields you require to be filled in, including a submit and reset button. You can set up a table inside the form field to make layout easier.

3. Name each field with a unique name and set up its properties.

4. Select the form by clicking your cursor into it and then click on the form tag on the tag selector.

5. Give the form a unique name, ie: orderform.

6. Action is: mailto:yourisp@xxx.co.nz?subject=Form from Web Site.

7. Method is: post

8. Enctype is: text/plain
note: if your software does not have an Enctype option, type this command into the code as follows:

<form name="orderform" method="post" ENCTYPE="text/plain" action="mailto:yourisp@xxx.co.nz?subject=Form from Web Site."

9. Validate the form by selecting it with the form tag selector, then choose Window > Behaviors. Click the Plus button and choose Validate. Set up the validation commands and click OK.

Once the form has been uploaded you should fill it in and submit it to check that it is working correctly.

Please fill in the form below and submit it. Thank you.

*First name:
*Surname:
*Email:
Gender:	Male Female
Favourite hobby:
Software:	MS Office Photoshop Dreamweaver FrontPage

Method 2: A "Form to Email" CGI script

CGI (common gateway interface) script forms require a CGI that is specifically designed to process the data entered by your Web audience. The CGI must run on the Web server. Many Internet service providers have ready-made CGI programs that need little or no modification to use with the form pages in your site.

Your ISP will normally have a Form to Email Script you can use. While this is perhaps the most common method of working with forms, many ISP's offer other technologies for managing forms. Ask about a method to set up a feedback form. Specify that you want to have the results mailed to your email address.

This is an example of the HTML that you will need to include in your webpage in order to utilise the script. This script supports all form input types including file attachments. The output of the email should appear in the order that the form is processed on the html page.

Specifying the form's CGI script

The form action is the URL of the CGI script on the Web server and the method describes how to send the information to the server. Which action and method you specify depends on the instructions you receive from the server administrator.

To specify the form’s CGI script:

1. In the Action text box, type the path of the data-handling CGI script on the server. For example:

/cgi-bin/public/counters/count.acgi

What you type in the Action text box depends on instructions you receive about the CGI script’s name and location on the server. Consult your Internet service provider or Web server administrator for the appropriate information for your form and CGI.

2. Choose Post or Get from the Method pop-up menu. Check this choice with your Web server administrator or Internet service provider.

<FORM ACTION="http://www.iserve.co.nz/scripts/formtomail/formproc.php"

METHOD="POST" ENCTYPE="multipart/form-data">

<INPUT TYPE="HIDDEN" NAME="thankyou_page"

VALUE="http://www.yourdomainname/thankyou.html">

If you add TYPE=HIDDEN to one of the above input tags, the page will not display an input field. Usually you would have this tag for the recipient and followup-page. Examples of how to add the TYPE=HIDDEN are included on these two normal fields.

This is the incoming email from the server showing the contents of the form:

----- Original Message -----

To: <james@ xxxxxxxx.co.nz>

Sent: Tuesday, 2 April 2002 18:06

Subject: Enquiry from Web Site

> At 18:06 on Tuesday 02 April 2002, the following information was submitted

to your form at http://www.xxxxxxxx.co.nz/order.htm :

>

>firstname: Margaret

>lastname: Marsh

>dayphone: 94780300

>email: pctutor@clear.net.nz

> streetaddress: PO Box 40531, Glenfield, Auckland, Auckland

> comments : Just checking to see if this form will work OK!!

> thankyoupage : http://www. xxxxxxxx.co.nz/thankyou.htm

>Submit: Submit

Email Encoder

What's one spider you DON'T want on your site? An email spider that visits with one purpose in mind: to collect as many email addresses as possible so the owner can spam you with email later. Learn how to keep your email address available to humans but invisible to email spiders. Since the HTML code produced by the encoder doesn't look like a proper email address, the email spider doesn't harvest it. But the browser understands the code and displays it on the page properly. Visitors will be able to send you mail from the linked address if they have their mail client configured to do so. Otherwise, they can cut and paste from your Web page into their mail client to email you.

This form will allow you to encode your e-mail address through the use of Character Entities, transforming your ascii email address into its equivalent decimal entity. Simply enter your e-mail address in the first text box, click the encode button, and then highlight and copy the resulting code produced in the second text box. This encoded e-mail address can be read and translated back into its original ascii text by almost any web browser without any further action on your part. Just replace all instances of your e-mail address on your pages with the code, and you won't have to worry about spam lists.

For example:

On the visible web page you will see the following text:

In the source code for the web page, the above email link should look like this:

"For more information, send email to <A HREF="mailto:
yourname@domain.com">
yourname@domain.com
</A>"