Creating Your Online Form/Survey
with Dreamweaver

Last updated October 5, 2005



To create your form or survey, open Dreamweaver. Create a new file by pressing Ctrl+N or choosing File >> New from the menu at the top. If you are using Dreamweaver MX, you will want to select Basic Page as the category type and HTML as the Basic Page type. After you have opened the blank page, select Insert >> Form. This will insert a red form field in which all form objects will reside. Form objects are discussed below.


The first thing you need to do after the red form field has been inserted is set up the form properties. The Properties Inspector (or Properties window) should be displayed. If it is not, select Window >> Properties from the menu across the top. You will know it is displayed when a check mark is present beside Properties under the Window menu. Click on the red box to see the form's properties in the Properties window. Make sure the Method is set to Post, and enter a name for the form in the Form Name field. For this example, the form will be named "tutorial_survey". Next, you need to establish the script that inFORM will use to process your form. You have four types of script choices: Normal inFORM, WRAP'ed inFORM, SSL'ed inFORM, and SSL/WRAP'ed inFORM. To use one of these scripts, type the appropriate URL below into the Action field

  • Normal inFORM: This type of inFORM is submitted across a Web connection that is not secure and does not require the respondent to login. To use this script, enter http://www.cgibin.ncsu.edu/cgi-bin/inform3 in the Action field. (NOTE: This tutorial uses the Non-Authenticated inFORM script.)
  • WRAP'ed inFORM: This type of inFORM is submitted across a Web connection that is not secure, and it requires the respondent to login with his/her unity id and password before submitting the form. To you this script, enter http://www.cgibin.ncsu.edu/cgi-bin/secure/inform3 in the Action field.
  • SSL'ed inFORM: This type of inFORM is submitted across a secure Web connection allowing you to protect submissions of sensitive data such as Social Security Numbers. This script does not require the respondent to login nor can it be used if you chose to receive data via email. To use this script, enter https://www.cgibin.ncsu.edu/cgi-bin/inform3 in the Action field.
  • SSL/WRAP'ed inFORM: This type of inFORM is submitted across a secure Web connection and requires the respondent to login with his/her unity id and password before submitting the form. This script cannot be used if you chose to receive data via email. To use this script, enter https://www.cgibin.ncsu.edu/
    cgi-bin/secure/inform3
    in the Action field.


The next two steps are critical! If you do not complete these steps, the form will be useless.
Now that the form properties have been set up, it is time to establish the connection between the form you are currently creating and the form settings you registered earlier using the inFORM Admin program mentioned above. The key to this connection is the FormID (e.g., ec8ce4b7) that was assigned when you completed the registration of your form. To make this connection, you must enter a hidden field. Do this by selecting Insert >> Form Objects >> Hidden Field.


Click on the hidden field icon to highlight it and to display its properties in the Properties window. In the field located beneath "HiddenField", type inform_formid. This is a response variable that will tell inFORM to compare the value that you enter (i.e., your FormID) with other FormID's that the system has generated. When the system produces a match, the corresponding settings will be applied to your form.


Creating Form Objects

Now that the preliminary work is complete, it is time to prepare the section of your form/survey that will collect data through the use of form objects. Each item/question in your form will use a single type of the form objects listed below. An item may use more than one object, but the type of object should be consistent for that item (e.g., "Yes" and "No" radio buttons). Naming the form objects is another thing to consider. Form objects relating to a single item should have the same name, and any form object name should not include spaces because inFORM will ignore any word after the space. Instead, use an underscore (e.g., Last_Name). The data that is gathered from these objects is referred to as a value. (NOTE: This term will be used extensively throughout the remainder of the tutorial.) This part of the tutorial will demonstrate how these form objects can be used to answer a variety of questions and gather information. An example of each of the following form objects will be shown:

  1. Text Field
  2. Text Area
  3. Radio Button
  4. Check Box
  5. List/Menu
  6. Button

Inserting a Text Field
Text fields are perfect for collecting information from respondents such as names, phone numbers, open-ended questions, etc. To insert a text field, select Insert >> Form Objects >> Text Field from the menu. Upon insertion, make sure the field is highlighted and locate the Properties window. Give the text field a unique name in the area provided. (NOTE: Default names will be "textfield", "textfield1", "textfield2", and so on unless you provide unique names for each one.) Char Width (character width) and Max Chars (maximum number of characters allowed) require numeric inputs and are used to customize your form. Char Width simply limits the number of characters that are visible in the form and can be modified for aesthetic purposes. It is possible for the Max Chars total to exceed the Char Width total. The Type for a standard text field is Single line. A Multi line is classified as a Textarea and is briefly addressed below. Select Password if the information to be entered by the respondent is confidential. The text entered will not be encrypted but will be concealed as it is typed (e.g., •••••••••). Finally, any value you enter in the Init Val (initial value) will be displayed in the text field until the respondent makes his/her own entry. Either you can leave this blank or you can enter something useful like "Enter response here". Please keep in mind that if you enter an initial value here and the respondent fails to enter his/her own response, then the initial value will be submitted as the final response. This is true even if the field is a required field. For an example of a text field, view the tutorial sample survey.


Inserting a Text Area
A textarea is a multi-lined text field. You can flip-flop between the two simply by changing the Type from Multi line to Single line. Default names for textareas is "textarea", "textarea1", "textarea2", etc., unless you specify a unique name for each one. Char Width and Init Val function the same as they do for a Text Field, and Num Lines allows you to specify only the maximum number of lines visible on the form itself. Actual lines of text can exceed the number you specify. The Wrap feature lists four options: Default, Off, Virtual, and Physical. Default (and Off) prevent text from wrapping to the next line when the respondent’s input exceeds the Char Width limit that you established. Instead, the text will scroll toward the left until the respondent presses [Enter] to move the cursor to the next line of the text area. Using Virtual will allow the text to wrap to the next line if the respondent's input exceeds the character width. However, when the form is submitted, the word wrap is not applied to the data. It is submitted as one string of data. The Physical setting is similar to the Virtual setting, but the data is submitted as it appears in the textarea with the word wrap preserved. For an example of a textarea, view the tutorial sample survey.


Inserting a Radio Button
Radio buttons give users an easy way to respond; they simply click on the appropriate button. Using radio buttons also limits the user to a single response (i.e., the choices are exclusive). To insert a Radio Button choose Insert >> Form Objects >> Radio Button. Highlight the button to display its properties in the Properties window. Obviously if you are using radio buttons, then you want the respondent to have multiple choices. For this reason, all of the buttons corresponding to a particular item/question must have the same name (e.g., Helpful); however, each button must be assigned a unique value (e.g., Yes, No). If the buttons possess different names, inFORM will assume that the buttons are unrelated and will consider each its own entity. Whether or not you want one of the buttons Checked or Unchecked as the Initial State is a personal preference. Please keep in mind that if a button is initially checked when the form is loaded and the respondent fails to enter his/her own response, then the initial value will be submitted as the final response. This is true even if the field is a required field. Unless you create a neutral button that is initially checked (e.g., "Not applicable"), you will have no way of knowing if the user made the response or skipped that item completely. For this reason, I would suggest that you leave all boxes Unchecked initially. Make the object required if you do not want the respondent to leave it blank. For examples of radio buttons, view the tutorial sample survey.


Inserting a Check Box
The directions for inserting and using a Check Box are similar to the directions for Inserting a Radio Button above but with a few exceptions. Instead of choosing Insert >> Form Objects >> Radio Button, choose Insert >> Form Objects >> Check Box. The other exception is that Check Boxes allows the user to make multiple selections for a particular item. Remember the names of each button must be the same; only the Checked Values should differ. For examples of check boxes, view the tutorial sample survey.


Inserting a List/Menu
Lists
and Menus offer yet another method of presenting choices to the respondent. An advantage of Lists and Menus is that it can include just as many (or more) choices as Radio Buttons and Check Boxes while taking up less space on your form. You can switch between the two by changing the Type from Menu to List. There are a couple of major differences between the two. A List allows multiple selections and presents the choices in a window that scrolls up and down (if necessary) while a Menu allows one selection and presents the choices in a drop-down menu. To insert a List/Menu, choose Insert >> Form Objects >> List/Menu. In the box beneath List/Menu, type a unique name for this object. If Menu is selected, Height and Selections will be grayed out. When List is selected, you can determine the number of lines that are visible on the form by entering a number in the Height field. If the number of selections exceeds the number of lines visible, the browser will automatically insert a scrollbar for the user to scroll through the choices. If you would like to allow the user to make multiple selections, then you can check the box for Selections >> Allow multiple. To create values for either a List or Menu, click on List Values...

When the List Values window opens, you will see a blank box beneath Item Label. Anything you type in this box will be visible to the user whether you are using a List or a Menu. After you have entered a label in the box, hit [Tab] or click under Value to open a blank box to the right of the label. Whatever you enter as the value is what will be submitted as the user's response; the value is not visible to the use. However, if you enter an Item Label but give it no corresponding Value, then no data will be submitted even if it is selected by the user. To enter another label and value, click on the button, and to delete a label or value click on the button. By default, the label that appears first in the List Values window will become the Initially Selected value on the form. For this reason, you may want to enter a dummy value like "Please select one" or "Choose from the following" and make it the Initially Selected value. After you enter all of the labels and values, you may decide that you want to change the order of their appearance. To do this, click on the label you would like to move. Then click the button to move it up one position at a time or the button to move it down one position at a time. When you are finished, click OK. For an example of what a finished List and Menu will look like to the user, view the tutorial sample survey.


Inserting a Button
You have almost finished your form/survey. All that remains is a Button that will allow the respondent to submit the completed form. Select Insert >> Form Object >> Button from the menu. You will see in the Properties window that there are two basic Actions for a button: Submit form and Reset form. The names say it all. By selecting one of these two options, Dreamweaver will provide the appropriate name and Label for the button. Anything that is typed in the Label field will be displayed inside the button, so feel free to change the label so it reads "Click here to submit form" or "Delete all responses" for Submit form and Reset form, respectively. Unless you specified otherwise when registering your form, inFORM will automatically generate a summary page showing the user his/her responses after the form has been submitted. To see examples of buttons, please visit the tutorial sample survey.


Remember, if you want to ensure that respondents answer any specific (or all) fields that you created in your form, you can return to the inFORM Admin page and enter the names you assigned to these input objects into the Required Input Objects: field. Be sure to separate the names by a comma ( , ).

Congratulations! You have just finished making your first online form/survey. Remember to upload your form to your personal or project's locker space on the server because no one will be able to access your form until it has been posted.


URL: http://ced.ncsu.edu/ltrc/studio/workshops/inform3/dreamweaver.html
Page maintained by the Learning Technologies Resource Center.
Updated October 5, 2005
NC State University, College of Education. All Rights Reserved © 2004
Best if viewed with IE 5.0 or Netscape 6.0