Creating a Form with Dreamweaver

Contents:

  • Section 1: Getting Started
  • Section 2: Creating the Form
  • Section 3: Text Fields
  • Section 4: Radio Buttons
  • Section 5: Pop-Down Menu

 

1.0 Getting Started

  1. Open Macromedia Dreamweaver MX. Make sure you have a new file open. (If not, click on File -> New. Under Category select "Basic Page", and under Basic Page select "HTML". Click "Create".)

     


  2. Click on design view in the Document Toolbar, pictured above. (If Dreamweaver doesn't start up with this toolbar displayed, click on View -> Toolbars, and make sure "Document" is checked.) In this same toolbar, title your page "Send me your comments".

     

  3. Now, let's add some text to the top of the page, so that your guests will know what they are looking at. In the "Properties" box, click on the arrow next to "Format" and select "Heading 1".


    Click back onto the main editing window, and type:
    Send me your comments.

     

  4. Go to a new line, and make sure the formatting is set to "Paragraph".


    Continue typing:
    Thank you for visiting my World Wide Web pages. If you have comments or suggestions for how I might improve my pages, please fill out this form and send it to me.

     

  5. With that, you're ready to actually add a form to this page. But before you go any further, it would be a good idea to save your work thus far.

     

2.0 Creating a Form


  1. To create forms, we will be using the Form Toolbar. This can be accessed by going to the "Insert" toolbar and clicking on the tab labelled "Form", as shown in the above image.

     

  2. Place your cursor just below the text you entered previously. Now click on the "Form" icon on the Form Toolbar. This will create the outline of a box with red dashes. (If Dreamweaver does not display the dashed outline, go to View -> Visual Aids, and make sure the "Invisible Elements" item is checked.) We will be adding other elements to this form in the next sections.

     

  3. We need to adjust a few of the properties of the form. Highlight the entire form by clicking on it. Under the "Properties" box at the bottom of the screen, rename the form from "form1" to something more intuitive, such as "webfeedback". In the "Action" box, type:
    http://www.stolaf.edu/cgi-bin/form-mailto.pl

     

  4. To make this form work properly, so that its results will be emailed to you, we must add a "Hidden Field" that will help the form know what to do. Place your cursor inside the form, and click the "Hidden Field" icon.

     

  5. Select the Hidden Field, and go to the "Properties" box. Change the Hidden Field's name to "_recipient", and type your email address in the "value" box (this is where the form will be sent to when it is completed).

     

3.0 Text Fields

Text fields are boxes that allow users to type in text as part of a form. You may have seen them when web sites or computer programs ask for a username and password.

  1. To add text fields to our form, click into the form and first type a prompt asking your guest for a certain bit of information. For the purposes of this form, type:
    Name:

     

  2. Now click on the "Text Field" icon under the Form Toolbar. This will add a text field to the form.

     

  3. Click on the text field to select it, and adjust its properties. Change its Name to "name", and set the Max Chars to 30 (this will be the maximum number of characters someone will be able to enter into the form; keeping this number low will use fewer computer resources).

     

  4. We want to know a few more things about our guests, so let's add some more text fields for the following information: Company or School, City, State or Province, Country, and E-mail Address. In each case, make sure to name each of the fields with an appropriate name, and set the Max Chars to a reasonable number (30 is usually sufficient).

     

  5. After these text fields, type:
    If you have a home page and would like me to see it, please enter your URL:

    Below this, create one more text field, name it "url" and set its Max Chars to 60.

     

4.0 Radio Buttons

Placing a set of radio buttons in your form allows a user to select one (and only one) of several options. Radio buttons look like this:

  1. Below the text fields entered in the previous section, type:
    What browser do you use?

     

  2. Place your cursor below this text, and click on the "Radio Group" icon.

     

  3. This will bring up a dialog box that will help you build the radio buttons. In the "Name" field, type "browser". Create a total of three radio buttons by clicking on the "plus" button. Alter the labels and values of these three buttons. The first should have "Netscape" for its Label, and "netscape" for its value. The second should have "Internet Explorer" and "explorer". The third should have "Other (please name):" and "other". The Label is the text that will appear next to the radio button, and the Value is the text that will be submitted with the form. Press OK when you are finished setting up the radio buttons, and Dreamweaver will create the radio buttons for you. The dialog box should look like this when you are finished:

     

  4. On the same line as the "Other (please name):" button, create another text field with the name "otherbrowser" and set Max Chars to 30. This way, if your guests click on the "Other" radio button, they can still inform you which browser they use.

     

5.0 Pop-Down Menu

Pop-down menus allow your guests to select one item from a list of items. They look like this:

  1. Below the radio buttons from the previous section, type:
    Please rate my web pages:

     

  2. Click on the "List/Menu" icon to add a Pop-Down Menu to your form.

     

  3. Adjust the properties for this menu. Change its name to "rating". Click the "List Value" button. In the dialog box, type in four labels (Excellent, Good, Fair, Poor) that correspond to four values with the same names. Press OK to exit the dialog box. Under "initially selected", select "Excellent".

     

6.0 Finishing Up

  1. Let's add one more text box for any additional comments people may have. Below the Pop-Down Menu created in the previous section, type:
    Please enter any additional comments or suggestions you might have:

     

  2. Click the "Textarea" icon to add a big box for text.

     

  3. Adjust the properties of this Textarea. Name it "comments", and set Num Lines to 10.

     

  4. At the bottom of the form, add a "Submit" button that will send the information in the form to your email address. Click on the "Button" icon, and Dreamweaver will create a default "Submit" button. If a Submit button is not created, make your own by creating a button, naming it "Submit" with a label of "Submit" and an Action of "Submit Form".

     

  5. And that's it! Save your file and post it on the web. If you followed the directions in these sections, your form should look something like this.

     

  6. When this form is submitted, it will be emailed to you in the default format. In the default format, variables from your form will be placed in alphabetical order, so the variable "name", for example, will be about halfway down the list, and not right at the top where it might make most sense. It is possible, however, to change the format in which a form will be emailed to you. To do this, you will need to create a filename.form document, such as that outlined here. (filename can be any name you choose, though it is recommended that it be similar to the name of your .html page.) It will be easiest to create this file in a text editor, such as Notepad. In addition to creating the filename.form document, you will also need to add another "Hidden Field" to your form. Add this Hidden Field just after the one you made earlier. It should be named "_formname" and have a value of "filename.form".

     

  7. For more help with forms, access the Dreamweaver help file.

     

 

 

Back to Top | Contents |IIT Documentation