Connecting an HTML Form with a CGI Script

Connecting an HTML Form with a CGI Script
Dreamweaver makes it pretty easy to design a good-looking HTML form. But you need a script under the hood for that form to actually work. Here's how to find free CGI scripts and connect them in Dreamweaver to your form. Configuring Your Form to Work with a Script
This tutorial is designed to help you connect a form with CSS and tables to a script so that it will actually do something when a user clicks the submit button. Here's what you'd do to connect a simple contact form to a formmail.pl script.

STEP 1
First, you'll need to select the form tag that encloses your form. (Note: all HTML forms must be enclosed by the

tag. If your script doesn't have a form tag, you'll need to add one around the entire contents of your form.)

Here's a tip for selecting the form tag in Dreamweaver. Place your cursor anywhere in the body of your form, then use the tag selector at the bottom of the work area to select the form tag. Make sure you've selected the Form tag and not just one of the form elements, like the text box I created for comments in this form (Figure 1).



Figure 1.


STEP 2
With the form tag selected, the Property Inspector changes to feature the form tag options (Figure 2). First, you'll want to give your form a name. Dreamweaver automatically gives each form you create a distinct name, like form1, form2, etc., but I prefer to change the name to something that has more meaning, like "contact" for this contact form. You can name your form whatever you like, just don't use spaces or special characters.



Figure 2.


STEP 3
Next, you need to specify the Action for the form, which usually means that you need to include the URL or address where the script is located on your server. In this example (Figure 3), you can see that I've used the address, "cgi-bin/formmail.pl." The address you enter will depend on your service provider, but it is a common convention to call the folder where CGI scripts are stored "cgi-bin." The last part of the address (formmail.pl) is the name of the script. In this case, it's a Perl script, indicated by the .pl.



Figure 3.


Note: you can only use the Browse button (the yellow folder icon in the Property Inspector) to automatically enter this address if you are working on your live server and Dreamweaver has identified the location of your script, or if you have the script on your local system in the same directory structure that exists on your server. In most cases, it's simplest just to ask your service provider or programmer for the address and type it into the Action field.


STEP 4
In the Method field (Figure 4), use the pull-down arrow to select Get, Post, or Default. Again, this depends on your script, but Dreamweaver's default is Post and if you're using Formmail, the best option is usually Post.



Figure 4.


STEP 5
Use the Target option (Figure 5) to specify what the browser does when the submit action is completed. If you choose " _top", the results page will open in a new browser window. If you leave this field blank, the browser window will simply be replaced with the results page. A results page is usually a simple HTML page that is delivered when the Submit button is pressed with a message like: "Thanks for playing."



Figure 5.


STEP 6
The Enctype field (Figure 6) enables you to specify how the data is formatted when it is returned. For example, if you're using a form mail script, this will determine how the text appears in your email when the contents of the form are sent to you. By default, enctype is set to "application/x-www-form-urlencoded." However, if you're using the form mail script, a better option is to enter the value "text/plain" by typing it into the Enctype field. This little detail means the difference between getting the form contents in one long line in an email, or having each field returned on its own line, which makes it much easier to read.



Figure 6.


Note: using text/plain will result in a plain text email message, but at least the text will be displayed like this:

First-Name=Janine
Last-Name=Warner
Email=janine@jcwarner.com

Instead of looking something like this: First-Name=Janine, Last-Name=Warner, Email=janine@jcwarner.com

STEP 7
The class field at the far right of the Property Inspector enables you to apply CSS to the form. In this example, I applied CSS to some of the elements in the form, such as the text, but not to the entire form.

That takes care of all of the options in the Property Inspector. You'll still need to insert a hidden form field into this form to make it work with the formmail.pl script.

STEP 8
Use the Form Insert Menu at the top of the workspace to access the form options and click to select the Hidden Field icon (Figure 7). Note: make sure your cursor is within the form tag when you add the hidden field. Placing your cursor at the top or bottom of the form is a good option.



Figure 7.


STEP 9
When you insert a hidden field, you won't see it in the design area of the page, but the Property Inspector will change to feature the hidden field options (Figure 8). First, enter a name. If you're using formmai.pl, you'd enter "recipient" as the name and the email address where you want the form data sent as the value. You can even enter more than one email address, separated by commas. So, for example, I could enter "janine@jcwarner.com, janine@digitalfamily.com" in the value field, and the data from the form would be emailed to both of my email addresses at once when a user hits the submit button.



Figure 8.


STEP 10
There are many other hidden fields you can add to a form, depending on the script you are using and how much you want to customize the results. For example, you can add a hidden field with the value "subject" and include a subject line you would want inserted into the email message automatically when a user submits the form. In this example (Figure 9), I entered "Contact Information from DigitalFamily.com," as the value.



Figure 9.


And that's it. Assuming all of the fields are filled in correctly and the script is properly installed and configured on my server, I should receive two email messages with the contents of the contact form when a user fills it in and submits on my site.

There are many reasons to create forms on the Web, but emailing the contents of a contact form is one of the most common. I hope this little exercise has helped to give you an idea of what you need to do to make your HTML forms interact with a CGI script on your server.

Remember, most service providers offer a collection of scripts you can use for common tasks like discussion boards, guest books, and more. All you should have to do is create the HTML part of the form and then specify the form fields to interact with your script.