Dreamweaver Mail Forms: Using ritmail.cgi

Transcription

1 Dreamweaver Mail Forms: Using ritmail.cgi The recommended RIT form processor is ritmail.cgi. Forms have two parts: the web page and the form program The web page is where users enter information. The form program is a script on the server that processes the collected information (in this case ritmail.cgi) Dreamweaver can assist in creating the form web page. Exercise: Create a comment form. See a sample at: 1. Start Dreamweaver. Create a new Dreamweaver document. Click the cursor in the document window, where you would like the form to begin. 2. Choose Insert > Form > Form. A red dotted box outline will appear. Important: All of the form questions and buttons must be inside this the red dotted border for the form to work. 3. Setting up Form and Form Action (Program that processes information) (*Required*) 3a. Click on the red dotted outline of the form to display the Property Inspector. Note: Select Window > Properties if the property inspector does not appear. 3b. In the Properties Inspector for Form designate a unique name for the form (i.e. Feedback) and a form action and method. The action is:

2 Set method to POST Note: The form action is the web address of the program that will process the submitted information from your form and it to you. 3c. Click back on the document window. If you need to make changes to these properties click on the red dotted outline of the form and the form properties will reappear. This will give you access to correct this setting if there are typos. Note: The ritmail.cgi program is provided for RIT campus users to form feedback to themselves from the web. It is configured to work for web forms on any web server in the rit.edu domain. The ritmail program originates from Matt's Script Archive. To learn more about it: 4. Who should the form feedback be ed to? Insert a recipient hidden field: (Required) 4a. Click inside the form red dotted outline and choose Insert > Form > Hidden Field 4b. Type recipient for the name of the hidden field 4c. Type your address at RIT in the Value field. This is where the feedback from the form will be sent. 4d. Click back on the document window. A yellow tab will appear for the hidden field recipient setting. Clicking this tab will give you access to correct this setting in case of typos. 5A-E. Creating form questions and answers with form objects. (Required: Use one or more form objects for each Q&A.) 5. Click inside the red outlined box and type questions that users will answer. After each question select the best form object for the response you expect. See 5A-5D. Unique Naming of All Form Objects (Except Radio Buttons): Each form object in the same form must have a unique name to avoid overwriting user responses. For example, if two different form objects, a text box and a checkbox, are called " ". The returned information will only be reported for the last " " form object filled in. The only repetition of form object names occurs in a question using radio buttons for responses. Each radio button in that question will be named the same so that only one answer can be selected. (For example: reply with a value of yes or reply with a value of no) All Form Objects must be inside the dotted red border line of the form.

3 Do not collect private information off your form. This type of form is not encrypted so student id numbers, credit card and even nonpublic personal information are not a good idea to collect. Answer Options: A. Text Field: Use single line for fill in the blank answers or multi-line for short paragraphs. B. Check boxes: Use for questions where there is more than one possible given answer, such as "choose all that apply". C. Radio buttons: Use for questions where there is only one answer, such as yes/no questions or multiple choices. D: List/Menu: Use to choose from a set of short responses. E. Buttons: Use to submit or clear the form information. OR Image Field: Can be substituted for Submit if you wish to use an image button for submit. Inserting Questions and Answers: Type a question and then insert the best type of answer response. (A-E described above.) All of these options can be selected from the Insert > Form menu or from the Objects Form palette. (Window > Objects. Click Common drop-down on the objects palette and pick Forms.) 5A. Text Fields: For open-ended questions. 5A1. Click inside the form outline and choose Insert > Form > Text Field to collect open-ended answer data. (realname, , subject, question.) 5A2. Type a unique name for the text field and choose options of character length and maximum length if appropriate. Click single line for short answers. Char width: This controls the width of the text field Max Chars: This controls the maximum number of characters to be entered into the text field Note: Try experimenting with these numbers, for example if you set the Max Chars to less than the Char width the text typed within the text field will scroll once you exceed the Char width. 5A3. Multi line Text Fields: To collect longer open-ended information check-off Multi line. Fill in the number of lines. Optionally, include the initial value you would like to have appeared.

4 5B. Insert checkboxes: For questions with more than one correct response. 5B1. Click inside the form outline and choose Insert > Form > Checkbox for questions with more than one possible response. Use a different name for every checkbox that describes the response. (i.e. faculty, student) 5B2. In the Properties Inspector, select the check box and give the check box a unique name having to do with the response. (I.e. Faculty) 5B3. Type yes in the checked value. Mark the initial state as unchecked. 5C. Insert a radio button: For questions with only one correct response. 5C1.Click inside the form outline and choose Insert > Form > Radio Button. 5C2.In the Properties Inspector, give the radio button a name having to do with the question. For each radio button that responds to this question use the SAME name. Use the same unique name for every button that responds to the same question.(i.e. reply) 5C3.Type in answer for the checked value. The checked value should be different. (I.e. Yes or No)

5 5D. Insert a List or Menu: For a drop-down menu of answers. 5D1. Click inside the form outline, Choose Insert > Form > List/Menu 5D2.In the Properties Inspector (Window > Properties) choose Menu or List. Give the List/Menu a unique name (select, vote, etc.) Menu vs. List: A Menu is a drop down that shows all choices and lets the user select one. A List shows all the items and allows the user to select one or more selections. item 1 item 2 item 3 Illustration of List and Menu Properties 5D3. Click List Values button on the upper right of the list property inspector :

6 List Values Dialog 5D4 Fill the Item Label names for each item as it should appear on the list or menu Fill in a one word value on the right that reminds of which item on the list was chosen. These are the categories that will be returned to you in to specify the response to the question. Click the + to add more items. Use the up and down arrows on the List values to change the order of the choices. 6E. Required: Insert a button to submit. The reset form button is optional. Image button can also be used to submit a form. 6E1. Click inside the form outline, choose Insert > Form > Button. A Submit button will be put in depending on the action that is selected. Name the button by its function (Submit or Reset). Label it by function with whatever you like (Submit, Send, to Webmaster OR Reset, Clear, Clear the Form, etc.) 7. Testing the Form: To fully test the form with ritmail.cgi, you must upload it to grace.rit.edu. with the Site Editor. Go to the form with your web browser and fill it in to test that all of your elements are working. ( For example: You should get an message from the ritmail program:

7 What you get back in mail: Subject: test of my form Date: Thu, 05 Oct :09: (EDT) From: () To: Below is the result of your online form. It was submitted by on Thursday, October 5, 2000 at 12:09: name: Abby Clark message: I am testing out my form Submit: Submit Other optional configuration with form objects. Anywhere within the form red dotted outline you can add the following objects to customize your form. Object type Name Fill in Value Description Text subject user types in appears as subject of Hidden subject you type in a subject word or phrase you specify the subject of the s from the form Text user types in appears in the From: line of allowing direct reply Text realname user types in appears in the From line of the Hidden redirect web address of the redirect page you create. web address of a page that is returned to the user after they fill in the form Hidden required field names separated by commas Create a document called thanks.html If value is set as subject, , realname then those fields cannot be left blank. (see missing_error report) Hidden missing_fields_redirect web address web address of a page that is returned to the user after they fail to fill in the form required fields. Create a document called error.html

8 Hidden env_report Hidden sort Hidden print_config any allowed environmental variables alphabetic order:name1,name2 comma separated names Try values as follows to learn the host and IP address of the server making the request and the browser type used. REMOTE_HOST, REMOTE_ADDR,HTTP_USER_AGENT will have fields organized in specified order , realname, subject are in the header. Designate them if you want them in the body too Object type Fields to use if you DO NOT use the hidden redirect tag Name Fill in Value Description Hidden title Feedback Form title of reporting page if no redirect (after form is submit) Hidden return_link_url web address the web address of reporting page Hidden return_link_title text the clickable text to go to the return link Hidden background Hidden bgcolor Hidden text_color Hidden link_color Hidden vlink_color Hidden alink_color web address of image location page text link visited links text background pattern of the page #FFFFFF for a white background color # for black text #FF0000 for red link color #0000FF for blue links #FF0000 for red link text Other sample forms for ideas: Look at some real service forms to see how they can be used: 1.) Comments to Library WebMaster: 2.) Evaluation of Open Computer Workshops: 3.) Student Application Library Computer Jobs 4.) Library Material Purchase Suggestion Form: