FRONTPAGE FORMS

Transcription

1 tro FRONTPAGE FORMS CREATE A FORM Open your web and create a new page. 2. Click on Insert > Form > Form. 3. A FrontPage Save Results Component will be added to the page, as shown below. The form contains a Submit and Reset button. Users click on the Submit button after completing a form; clicking on the Submit button sends the data to the designated form handler ( , Word, Excel, Access). Users click on the Reset button to clear the form and start over. CREATING FORM FIELDS FrontPage forms can contain the following types of form fields: One-Line Text Box Scrolling Textbox Checkbox Page 1 Frontpage Forms CSU Center for Instructional Development 2006

2 Adding a One-Line Text Box Page 2 Radio Button Dropdown Menu ADDING A ONE-LINE TEXT BOX Click in the form where you want to place a text box, and type a label for the form field (e.g., "E- MailAddress"). 2. Click on Insert > Form > One-Line Text Box. 3. A one-line text box will be added to the form, as shown below. 4. Double-click the text box, and set the Text Box Properties. In the Name box, type a label to identify the text box. This name will appear as the form field label when the data is sent to the form handler ( , Page 2 Frontpage Forms CSU Center for Instructional Development 2006

3 Adding a One-Line Text Box Page 3 Word, Excel, or Access), and it will also appear on the default confirmation page that users receive after submitting the form. If you want initial text to appear in the text box when users view the form, type the text in the Initial value box (e.g., "Enter Last Name.") Adjust the text box width by changing the number in the Width in characters box, if desired. Enter a Tab order number, if desired. (Note: The tab order number permits users to quickly advance to the next form field by pressing the Tab key on their keyboards. Example: A tab order of 3 indicates that the item is the third form field from the top of the page.) 5. Click on the Validate... button. The validation settings check the data input and display a warning when improper data is entered. Select the desired input data from the Data Type drop-down menu. Type a label for the validated text box in the Display name box. (Note: This will be the form field name used in the error message that is displayed when users fail to enter the form field data in the correct format.) If you selected "Text" for the data type, select the permissible Text Format by clicking in the desired check boxes. (Note: Allow for all possible text characters.) To require users to complete this form field, click in the Required check box under Data length, and enter values in the Min length and Max length boxes. Click OK. Page 3 Frontpage Forms CSU Center for Instructional Development 2006

4 Adding a One-Line Text Box Page 4 When the Text Box Properties box reappears, click OK. Page 4 Frontpage Forms CSU Center for Instructional Development 2006

5 Adding a Scrolling Text Box Page 5 ADDING A SCROLLING TEXT BOX Click in the form where you want to place a scrolling text box, and type a label for the form field (e.g.,"career Plans"). 2. Click on Insert > Form > Scrolling Text Box. 3. A scrolling text box will be added to the form, as shown below. Page 5 Frontpage Forms CSU Center for Instructional Development 2006

6 Adding a Scrolling Text Box Page 6 4. Double-click the scrolling text box, and set the Scrolling Text Box Properties. In the Name box, type a label to identify the scrolling text box. If you want initial text to appear in the text box when users view the form, type the text in the Initial value box (e.g., "Type Your Career Plan Here...") Adjust the scrolling text box width by changing the number in the Width in characters box, if desired. Enter a Tab order number, if desired. 5. If you want to validate the data, click on the Validate... button. The validation settings check the data input and display a warning when improper data is entered. Page 6 Frontpage Forms CSU Center for Instructional Development 2006

7 Adding a Scrolling Text Box Page 7 Select the desired input data from the Data Type drop-down menu. Type a label for the validated text box in the Display name box. (Note: This will be the form field name used in the error message that is displayed when users fail to enter the form field data in the correct format.) If you simply want to ensure that users respond to this question, you can set the Data type to "No Constraints," and then designate a minimum data length by clicking in the Required check box under Data length, and entering a value in the Min length box. Click OK. When the Scrolling Text Box Properties box reappears, click OK. Page 7 Frontpage Forms CSU Center for Instructional Development 2006

8 Adding Checkboxes Page 8 ADDING CHECKBOXES Click in the form where you want to place a question containing checkboxes, and type a label (e.g.,"skills") for the question. 2. Click on Insert > Form > Check Box. Page 8 Frontpage Forms CSU Center for Instructional Development 2006

9 Adding Checkboxes Page 9 3. A checkbox will be added to the form, as shown below. Enter a label for the checkbox, and repeat Steps 2-3 until you have added all of the checkboxes needed for thisquestion. 4. Double-click the first checkbox, and set the Checkbox Properties. For checkboxes, there are two ways to configure the properties: Method #1 - Use the same Name for each checkbox in the question, and set each Value to match the corresponding checkbox label. If you select this method, a list of the checked fields will be placed under the same label when the data is sent to the form handler. For example, set the Name to "Skills" and set the Values of the checkboxes to " ," "MS-Office," and "Scanning." If a user checks and scanning, these two skills will be listed under a heading labeled "Skills." Set the Initial state to "Checked" or "Not checked." Page 9 Frontpage Forms CSU Center for Instructional Development 2006

10 Adding Radio Buttons Page 10 Enter a Tab order number, if desired. (Note: Increment the tab order for each checkbox.) Click OK. Method #2 - Use a separate Name for each checkbox in the question, and set each Value to "Yes." If you select this method, "Yes" will be placed under each label that users check when the data is sent to the form handler. For example, set the Names to " ," "MS-Office," and "Scanning" and set the Value of each checkbox to "Yes." If a user checks and scanning, "Yes" will be displayed under the headings labeled " " and "Scanning." Set the Initial state to "Checked" or "Not checked." Enter a Tab order number, if desired. (Note: Increment the tab order for each checkbox.) Click OK ADDING RADIO BUTTONS 1. Click in the form where you want to place a question containing radio buttons, and type a label (e.g.,"school") for the question. Page 10 Frontpage Forms CSU Center for Instructional Development 2006

11 Adding Radio Buttons Page Click on Insert > Form > Radio Button. 3. A radio button will be added to the form, as shown below. Enter a label for the radio button, and repeat Steps 2-3 until you have added all of the radio buttons needed for this question. Page 11 Frontpage Forms CSU Center for Instructional Development 2006

12 Adding Radio Buttons Page Double-click the first radio button, and set the Radio Button Properties. Use the same Group Name for each radio button in the question, and set each Value to match the corresponding radio button label. When the data is sent to the form handler, the Value of the selected radio button will be displayed under the Group Name. For example, set the Group Name to "School" and set the Values of the radio buttons to "Arts & Sciences," "Business," "Health Sciences," "Information & Mathematical Sciences," and "Technology." Set the Initial state to "Selected" or "Not selected." Enter a Tab order number, if desired. (Note: Do NOT increment the tab order for each checkbox. The tab order for all radio buttons in a question will be the same.) Click OK. Page 12 Frontpage Forms CSU Center for Instructional Development 2006

13 Adding Drop-Down Menus Page 13 ADDING DROP-DOWN MENUS Click in the form where you want to place a drop-down menu, and type a label for the form field (e.g.,"county"). 2. Click on Insert > Form > Drop-Down Menu. 3. A drop-down menu will be added to the form, as shown below. 4. Double-click the drop-down menu, and set the Drop-Down Menu Properties. In the Name box, type a label to identify the dropdown menu. Click on the Add button. Page 13 Frontpage Forms CSU Center for Instructional Development 2006

14 Adding Drop-Down Menus Page 14 Enter the first Choice that you want to appear in the drop-down menu, select Specify Value so that the users' selected choice will be sent to the form handler, verify that the Initial State is "Not selected," and then click OK. (Note: If you expect most of your respondents to select the first choice, then you would set the Initial State to "Selected.") Repeat these steps to add the remaining choices, as shown below. Page 14 Frontpage Forms CSU Center for Instructional Development 2006

15 Adding Drop-Down Menus Page 15 Set the tow Height, Tab order, and determine whether users can select more than one choice from the dropdown menu. Click on the Validate... button. Page 15 Frontpage Forms CSU Center for Instructional Development 2006

16 Selecting a Form Handler Page 16 If you want to require users to respond to this question, click in the checkbox labeled "Data required." If you want to prevent users from selecting the first choice from the drop-down menu (e.g., "Select Your County of Residence"), click in the checkbox labeled "Disallow first choice. Click OK. When the Drop-Down Menu Properties box reappears, click OK. SELECTING A FORM HANDLER After users complete the form, the data can be saved to the following form handlers: form data is sent via to a designated address. 2. Word - form data is saved to a formatted Word document in the _private folder of the FrontPage web where the form is located. 3. Excel spreadsheet - form data is saved to an Excel spreadsheet in the _private folder of the FrontPage web where the form is located. 4. Active Server Page database - form data is saved to an Access database located in the fpdb folder of the FrontPage web where the form is located CUSTOMIZING THE CONFIRMATION PAGE If you are not satisfied with the default confirmation page, you can create a customized confirmation page which can display the data submitted to the form. Page 16 Frontpage Forms CSU Center for Instructional Development 2006

17 Sending Form Data via Page 17 SENDING FORM DATA VIA Right click on the Submit button located at the bottom of the form, and click on Form Properties. 2. Select the Send to option button. Delete the default file name listed in the File name box, and type your e- mail address in the address box. Type a descriptive title in the Form name box. Click on the Options... button. 3. Click on the Results tab. Verify that the address to receive results is correct. Select Formatted text from the format dropdown menu. Verify that the checkbox labeled "Include field Page 17 Frontpage Forms CSU Center for Instructional Development 2006

18 Sending Form Data via Page 18 names" is checked. Enter the desired Subject line to be displayed on incoming s containing form data, or specify a Form field name to use as the subject line. If you plan to reply to individuals who submit the form, be sure to include a one-line text box on the form for users to enter their addresses. Click in the checkbox labeled Form field name, and enter the form field name that you used for the text box in the Reply-to line box. Click OK. When the Form Properties box reappears, click OK. 4. Save the form by clicking on the floppy disk icon on the Standard toolbar. 5. Click on the Preview in Browser icon on the Standard toolbar. Page 18 Frontpage Forms CSU Center for Instructional Development 2006

19 Sending Form Data via Page Complete the form, and click on the Submit button. 7. A default confirmation page containing your form responses will be displayed, as shown below. 8. Open your software program and check for new mail. You should have received a message similar to the one displayed below. Page 19 Frontpage Forms CSU Center for Instructional Development 2006

20 Sending Form Data via Page 20 You can respond back to the user who submitted the form by clicking on the Reply button. The address that the user submitted on the form will automatically be placed in the To field of the return message, as shown below. Page 20 Frontpage Forms CSU Center for Instructional Development 2006

21 Sending Form Data to a Word Document Page 21 Note: Since the subject line of the messages containing form data can be controlled by the form properties, it is possible to create a rule in MS Outlook to automatically filter these messages to a designated folder SENDING FORM DATA TO A WORD DOCUMENT 1. Right click on the Submit button located at the bottom of the form, and click on Form Properties. Page 21 Frontpage Forms CSU Center for Instructional Development 2006

22 Sending Form Data to a Word Document Page Select the Send to option button. Delete the default file name listed in the File name box, and type the path to the Word file where you want to save the form data. Add a.doc extension on the file name. (Note: MS FrontPage will automatically create this file in the designated folder. All form data should be saved in the _private folder.) Type a descriptive title in the Form name box. Click on the Options... button. 3. Click on the File Results tab. Verify that the File name is correct. Select Formatted Text in the File format drop down menu. Verify that the checkbox labeled "Include field names" is checked. Click OK. When the Page 22 Frontpage Forms CSU Center for Instructional Development 2006

23 Sending Form Data to a Word Document Page 23 Form Properties box reappears, click OK. 4. Save the form by clicking on the floppy disk icon on the Standard toolbar. 5. Click on the Preview in Browser icon on the Standard toolbar. 6. Complete the form and click on the Submit button. Page 23 Frontpage Forms CSU Center for Instructional Development 2006

24 Sending Form Data to a Word Document Page A default confirmation page containing your form responses will be displayed, as shown below. 8. To retrieve the form data, open MS FrontPage, double click on the _private folder, and locate the Word document file. (Important: If MS FrontPage was open while you submitted the form, you will either need to close and reopen MS FrontPage, or click on Refresh under the View menu.) Page 24 Frontpage Forms CSU Center for Instructional Development 2006

25 Sending Form Data to a Word Document Page Double click on the Word file, and wait while the file opens. The form data will be displayed, as shown below. (Note: Each time a user submits the form, the data will be appended to the bottom of this file.) 10. You cannot edit this file until you save it to your hard drive. To save the form results file to your hard drive, click on Save As on the File menu. Page 25 Frontpage Forms CSU Center for Instructional Development 2006

26 Sending Form Data to a Excel Spreadsheet Page Locate the desired folder on your hard drive, select Word Document in the Save as type drop down menu. Click Save. After saving the file to your hard drive, you can edit it while still maintaining the original data in the _private folder of your web. SENDING FORM DATA TO A EXCEL SPREADSHEET Right click on the Submit button located at the bottom of the form, and click on Form Properties. 2. Select the Send to option button. Delete the default file name listed in the File name box, and type the path to the Excel file where you want to save the form data. Add a.xls extension on the file name. (Note: MS FrontPage will automatically create this file in the designated folder. All form data should be saved in the _private folder.) Type a descriptive title in the Form name box. Click on the Options... button. Page 26 Frontpage Forms CSU Center for Instructional Development 2006

27 Sending Form Data to a Excel Spreadsheet Page Click on the File Results tab. Verify that the File name is correct. Select Text database using tab as a separator in the File format drop down menu. Verify that the checkbox labeled "Include field names" is checked. Click OK. When the Form Properties box reappears, click OK. 4. Save the form by clicking on the floppy disk icon on the Standard toolbar. Page 27 Frontpage Forms CSU Center for Instructional Development 2006

28 Sending Form Data to a Excel Spreadsheet Page Click on the Preview in Browser icon on the Standard toolbar. 6. Complete the form and click on the Submit button. 7. A default confirmation page containing your form responses will be displayed, as shown below. 8. To retrieve the form data, open MS FrontPage, double click on the _private folder, and locate the Excel file. (Important: If MS FrontPage was open while you submitted the form, you will either need to close and reopen MS FrontPage, or click on Refresh under the View menu.) Page 28 Frontpage Forms CSU Center for Instructional Development 2006

29 Sending Form Data to an ASP Database Page Double click on the Excel file, and wait while the file opens. The form data will be displayed, as shown below. (Note: Each time a user submits the form, the data will be appended to the bottom of this file.) 10. You cannot edit this file until you save it to your hard drive. To save the file to your hard drive, click on Save As on the File menu. 11. Locate the desired folder on your hard drive, select Microsoft Excel Workbook in the Save as type drop down menu. Click Save. After saving the file to your hard drive, you can edit it while still maintaining records of the original data in the _private folder of your web SENDING FORM DATA TO AN ASP DATABASE Before you can set up your form to send results to an Access database, you must rename the form with an.asp Page 29 Frontpage Forms CSU Center for Instructional Development 2006

30 Sending Form Data to an ASP Database Page 30 extension. 1. Right click on the Submit button located at the bottom of the form, and click on Form Properties. 2. Select the Send to database option button. Type a descriptive title in the Form name box. Click on the Options... button. 3. Click on the Create Database... button, and wait while the database is created. Page 30 Frontpage Forms CSU Center for Instructional Development 2006

31 Sending Form Data to an ASP Database Page 31 Click OK when prompted that the database has been successfully created. 4. Notice that a Database Connection to Use has been established corresponding to the name of your form, and a Table to hold form results called Results has been created. Click on the Saved Fields tab. Page 31 Frontpage Forms CSU Center for Instructional Development 2006

32 Sending Form Data to an ASP Database Page 32 Make sure that the Form Fields have been added to the Database Column. You may add, modify or remove form fields (e.g., If you did not want the field to be saved to the database, you could remove it.). Click OK. Page 32 Frontpage Forms CSU Center for Instructional Development 2006

33 Sending Form Data to an ASP Database Page Save the form by clicking on the floppy disk icon on the Standard toolbar. 6. Click on the Preview in Browser icon on the Standard toolbar. 7. Complete the quiz and click on the Submit button. 8. A default confirmation page containing your form responses will be displayed, as shown below. Page 33 Frontpage Forms CSU Center for Instructional Development 2006

34 Sending Form Data to an ASP Database Page To retrieve the form data, open MS FrontPage, double click on the fpdb folder. Locate and double click on the Access database corresponding to the form. 10. Double click on the table containing the form results. Page 34 Frontpage Forms CSU Center for Instructional Development 2006

35 Customizing the Confirmation Form Page The posted data will be displayed in the table, as shown below. (Note: Each time a user submits the form, a new record will be added to this table in the database.) Unlike form MS Word and Excel data files, you can edit the database file without saving it to your hard drive CUSTOMIZING THE CONFIRMATION FORM 1. Right click on the Submit button located at the bottom of the form, and click on Form Properties. Page 35 Frontpage Forms CSU Center for Instructional Development 2006

36 Customizing the Confirmation Form Page Click on the Options... button. 3. Click on the Confirmation Page tab. Enter the URL of confirmation page. Click OK. Page 36 Frontpage Forms CSU Center for Instructional Development 2006

37 Customizing the Confirmation Form Page 37 If you have not created the confirmation page yet, you will get a warning message. Click Yes. 4. When you return to the Form Properties window, click OK. 5. Save the form by clicking on the floppy disk icon on the Standard toolbar. Page 37 Frontpage Forms CSU Center for Instructional Development 2006

38 Customizing the Confirmation Form Page Create a new page by clicking on the New Page icon on the Standard toolbar. 7. Type a heading for the custom confirmation page, as shown below. 8. Click on Insert > Component > Confirmation Field. 9. Enter the Name of Form Field to Confirm (e.g. ). (Note: The confirmation field must match exactly with the corresponding form field names on your form.) Click OK. Page 38 Frontpage Forms CSU Center for Instructional Development 2006

39 Customizing the Confirmation Form Page A form confirmation field is added to your custom confirmation page, as shown below. Continue adding confirmation fields on your custom confirmation page, as shown below. 11. Click on File > Save As.., locate the desired Save in folder (shoulder match the file path specified in Step 3 above), enter the File name (must match the file name specified in Step 3 above), and click on the Save button. Close the confirmation page. Page 39 Frontpage Forms CSU Center for Instructional Development 2006

40 Customizing the Confirmation Form Page Return to the form. Click on the Preview in Browser icon on the Standard toolbar. 13. Complete the form and click on the Submit button. 14. The customized confirmation page will be displayed, as shown below. (Note: When users submit the form, the values that that they entered for the form fields will automatically be displayed on the confirmation page.) Page 40 Frontpage Forms CSU Center for Instructional Development 2006