†  

How to Build a Form

In either a new page, or in an existing page, create the form tag using either the Insert Form button on the Insert menu, or using INSERT/FORM/FORM from the Dreamweaver screen menu. This will create a red outlined box, which symbolizes the form tag. All form elements must be placed inside of that red box.

When adding a text field, be sure to name the field in a descriptive manner.For example, if you Label a field as “Name,” make sure you name (ID) the text field as “name.” When form data is sent to the end user, it will be arrayed according to the field ID. Labels are for users to quickly see what data should go into each field.

When adding either check boxes or radio buttons, make sure all the boxes or buttons for a given question have the same ID. For example, if you are asking if someone is male or female, both radio buttons need to have the same ID in order to work correctly. If you are using check boxes, also make sure all the IDs for a given question match each other.

Setting the length of a text field as visible characters can be problematic, as different browsers will formulate the text width differently. It is best to use a class to set the width of a text field.

Assuming you are using the form mail script from class, you will need to add two hidden fields to the Web site to make the form function correctly. One hidden field, is called “recipient” with the value set to a Creighton email address (such as joel@creighton.edu), which designates where the email should be sent. The second field is used to redirect the user to a landing page after they have clicked the button submitting the form. That field should be named “redirect” with a value of an absolute URL for a landing or “thank you” page.

for example:

http://people.creighton.edu/~abc12345/thankyou.php

To make the form actually function, you will need to add an action to the form. Click on the red box or the form tag in the bread crumb trail, and add the following URL to the “action” field:

http://jmc.creighton.edu/formmail.cgi

This script compiles the form and sends it to the email address specified in the “recipient” field. It will only work for creighton.edu email addresses. Most Web hosts have a standard script available for email forms.

Now, you might still have some gnarly looking text boxes on your page, and since this is a design course, we should remedy that. Never use the “character width” attribute to set the width of a text field, always use a class with a custom width.

Tags: , ,