HTML Forms with Dreamweaver

Form Setup

In Objects Palette (can select from "Window" drop down menu if not visible), Select the "Forms" menu.
Click on the top left icon "Insert Form". You'll see a red dashed box appear on your screen. This is the form boundary.
Click inside the red line to insert fields and format the form. You'll notice that when you click inside the form area, your Property Palette (usually appears at the bottom of the page) will change to the form options.
Define the ACTION (these instructions are for MUSC-hosted forms):
1. Type in this URL in the "Action" field - http://www.musc.edu/cgi-bin/formmail.pl
2. Method= POST
3. form name - type in whatever name you want the form referred to
Troubleshooting - If your form gives you an Error that it is not finding the "recipient" field, check your html code for this text in the FORM definition (very beginning):
enctype="multipart/form-data"
If you see this inserted code, delete it, Save, Refresh your form, and test again.

To see and edit the html code in Dreamweaver, click on the second icon at the top of the page (under the Edit menu).

Inserting Fields

Text Fields: click on top right button in Forms Palette (make sure your cursor is inside the Form area).
1. Defining length - "Max Chars" you can define a specific number of characters that will be allowed to enter.
  - For instance, if you know the field is for a zip code, you can limit the entry to five characters to ensure accuracy (eliminate errors). This is an optional attribute to define.
2. Defining width - "Char Width" is how long you want the text box to appear.
  - If you're limited on space, you may only want the box to be as wide as 10 characters, even though you will allow more to be entered. A "last name" field is a good example.
3. Init Val - Initial Value: If you want text to appear in the box as the form is loaded, put that here. This is helpful if the field has a common entry, and the user only needs to change the text if it doesn't apply.
  - For instance, you could have a "City" text field where the Initial Value=Charleston. If the user did not live in Charleston, he or she could change the text to the appropriate city.
  - Another example would be the prefix to a phone number (792-) so the user would only need to complete with his extension.
4. TextField - Name - Name every field so it can be easily identified to the recipient. Use a short one-word description (no spaces).
5. Multi-line - Use this option to create a text block for writing more than a few words - used for paragraphs, comments, descriptions longer than one sentence, etc.
  - You can make the text block appear any size by adjusting the Num Lines (will display that many lines in height).
  - Char Width will adjust the horizontal length.
  - Wrap
       "Off" is no word wrapping; users must enter their own line breaks/returns
       "Virtual" displays the wrap on screen, but one line is transmitted to the database or recipient
       "Physical" displays and transmits line endings
Check Boxes - multiple choices may be selected
1. Click on Icon with "x" in a box (make sure your cursor is inside the Form area).
2. Checkbox - Name the field (usually a description of the question) - the Checkbox name will be the SAME for each checkbox referring to that question; the values will change.
3. Checked_Value - type in what the recipient should see as an answer: yes, no, etc.
4. Initial State - You can choose to have the box already checked or have it be blank.
Radio Buttons - multiple options, but only one can be selected
1. Click on Icon with black dot (picture of a radio button)
2. RadioButton - name the button; use the same name with all the listed options (the question)
3. Checked_Value - list the value; this will be unique for each button (the answer)
4. Initial State - You can choose to have the box already checked or have it be blank.
Drop-Down List
1. List/Menu - the name of the List (age)
2. Type: Menu - can make one selection; List - can make multiple selections, and can display more than one row
3. Height - option to display more than one row (if List is selected)
4. Selections - option to allow multiple selections/answers
5. Initially Selected - the option that will show up as the selected default
6. List Values button - click here to begin listing your options. You can use the same text in "item label" as in "value".
  Item label is the text that will appear to the user.
  Value is the text that will be sent to you or the database as a result/answer. If the Item Label text is particularly long, you could shorten the description here.
Browse for a File - Click the folded page icon that says "Insert File Field"
Making Required Fields (procedure for MUSC formmail only) - Required means that the form will not be submitted until the named fields are completed.
1. Insert a hidden field (bottom left icon)
2. HiddenField name is "required" (lowercase)
3. Value - list the field names that you want to be required; separate with commas; the field names must be exact (case-sensitive)

Defining the Action

Reset button - Click "Insert button" (plain blue square icon); select Reset Form under "Action"
Label is the name the button appears on screen; it can be changed to "Clear Form" or something else.
Submit Button - Click "Insert button" (plain blue square icon); select Submit Form under "Action"
Label is the name the button appears on screen; it can be changed to "Send your Answers" or something else, instead of "Submit".
Hidden Fields when using Formmail:
1. The one required hidden field is "recipient" - Name= recipient Value= e-mail address that results should be e-mailed to
2. An optional hidden field is "subject" - this will put a Subject in the submitted message, so the recipient will recognize it
  There will not be a "From" address when a form is submitted unless you have an "email" field in the form that is required. To keep the users anonymous, simply don't include an "email" field.
Redirect/Confirmation page
Insert a hidden field: Name=redirect Value= URL (full path) http://www.musc.edu/
This will redirect the user to a website upon submission of the form. You can also use this to go to a Thank You page.

More Information on FormMail options:
http://www.scriptarchive.com/readme/formmail.html

View Sample form and see code - test.html

Redirect Page: http://people.musc.edu/~adamskr/ccit/Forms/thankyou.html

Results

What will be e-mailed to the recipient:

--------------------------------------
name: Kristi Adams

million: I would...blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
blah, blah, blah,

color: blue, yellow

vehicle: small_car

age: 26-35

file: C:\temp\file.htm

Submit: Send Now

-------------------------------------

Sample Form

Click on any form field to see the defined properties (displayed in the properties box at the bottom of the page)

	About MUSC · Education · Medical Center · Research · Library