How to Create Forms in Dreamweaver 8

Web forms are used to collect information and feedback from your website visitors. The web page contains special boxes called "fields" that collect certain pieces of data. The fields can be designated as text boxes, check boxes, radio buttons or drop down menus. The form also contains a Submit button that calls the script to process the information entered, and a Reset button to return the form to its default state and erase all information entered. Dreamweaver 8 includes built-in tools to help you create forms with the click of a button.

Things You'll Need

• Adobe Dreamweaver 8

Instructions

Insert a Form with Text Fields

1. Open Dreamweaver and click "HTML" on the start-up screen to create a new page.

2. Type the instructions for filling out your form on the web page.

3. 

   Click "Forms" from the main toolbar menu at the top of the screen or click the "Forms" tab if your toolbar is set for tabs instead of menus.

4. 

   Move your mouse, without clicking, over the buttons on the Forms toolbar to see help text that describes what each button does.

5. Click on your web page and add a carriage return below the directions you typed and click the first button on the Form toolbar to insert a new form. The form is indicated by a faint red outline. All fields for the form must go inside this red outline.

6. Click the "Text Box" button on the Form toolbar (next to the Form button) to enter a text field to the form.

7. 

   Type a label for this field (e.g., "Name") that indicates what sort of information you wish to collect. This ste[ will automatically create a text label for your field on the web page if you leave "wrap with label tag" selected. You can choose if the label should come before or after the form field as well.

8. Click "OK" when done setting up the text field.

9. 

   Repeat Steps 6 through 8 for any other text fields your form needs. The "Text Area" field type (next to Text field on the Forms toolbar) allows you to add a text field that has multiple lines, which can be used for collecting feedback or comments that require extra room.

Other Types of Form Fields

1. Add a carriage return after your last text field and click the "Check box" field button. Like the Text field, enter a label for this field in the dialog box.

2. Click the "Check box" field on the web page to see its settings in the Properties Inspector at the bottom of your screen.

3. 

   Click the box on the far left that says "Checkbox" and replace this text with a label that relates to your check box's purpose so when you receive the results of this form, you'll understand what field the visitor checked. This lable is the field's "name" or ID. You can use a group of checkboxes together for multiple selections under the same category by giving them all the same name/ID.

4. 

   Customize the property "Checked Value" to indicate what the the value of that field is when the visitor clicks it. Does it mean "Yes" or "No," for example? Check boxes can have the same ID (see previous step), but each check box must have a unique value. Visitors can check off multiple check boxes on a form.

5. Click any blank space on the web page to return to editing the page.

6. Click the "List/Menu" field type on the Forms toolbar and give it a label.

7. Click the "Menu" field after it is added to your web page so you can see its setting in the Properties Inspector.

8. 

   Click the "List Values" button on the right hand side of the Properties Inspector to add the values to your list or menu field. Click "OK" when done.

9. Select "List" or "Menu" as the type of field you want. A list shows all the options in a box. A menu is more compact and takes up only one line. If you choose List, you need to increase the Height value from 1 or it will be the same as a Menu field. List fields can also be set to allow multiple selections; menus cannot.

10. Click the "File" menu and then "Save." You now have a a web form in Dreamweaver 8.

Tips & Warnings

• The radio button field works similar to the checked box field, but only one radio button under the same name/ID can be selected by the visitor. Radio button fields are good for "Either/Or" and "Yes/No" questions. Web forms require a script to process the information entered. Click the "FORM" tag in the tag selector (bottom left of the editing window) to access the Form properties to enter the URL to your web script. A good mail script to use with web forms is the NMS FormMail script (see Additional Resources). It keeps your form more secure by hiding the recipient email addresses and restricting execution of the form to pages originating in your domain, which prevents the web form from being used as a relay for spam.

References

• Creating Forms in Dreamweaver 8
• Dreamweaver Forms

Resources

• Dreamweaver Home Page
• Install the NMS FormMail Script