FRONTPAGE FORMS

(1)

. . . . . . . . .

F RONT P AGE F ORMS tro

. . . .

C R E A T E A F O R M

1. 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 (e-mail, Word, Excel, Access). Users click on the Reset button to clear the form and start over.

. . . .

C R E A T I N G F O R M F I E L D S

FrontPage forms can contain the following types of form fields:

• One-Line Text Box

• Scrolling Textbox

• Checkbox

(2)

Adding a One-Line Text Box P a g e 2

• Radio Button

• Dropdown Menu

. . . .

A D D I N G A O N E - L I N E T E X T B O X

1. 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.

(3)

F R O N T P A G E F O R M S

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.

(4)

When the Text Box Properties box reappears, click OK.

(5)

Adding a Scrolling Text Box P a g e 5

. . . .

A D D I N G A S C R O L L I N G T E X T B O X

1. 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.

(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.

(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.

(8)

Adding Checkboxes P a g e 8

. . . .

A D D I N G C H E C K B O X E S

1. 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.

(9)

Adding Checkboxes P a g e 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 "E-mail," "MS-Office," and

"Scanning." If a user checks e-mail and scanning, these two skills will be listed under a heading labeled

"Skills."

Set the Initial state to "Checked" or "Not checked."

(10)

Adding Radio Buttons P a g e 1 0 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 "E-mail," "MS-Office," and "Scanning" and set the Value of each checkbox to

"Yes." If a user checks E-mail and scanning, "Yes" will be displayed under the headings labeled "E-mail" 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.

. . . .

A D D I N G R A D I O B U T T O N S

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.

(11)

Adding Radio Buttons P a g e 11

2. 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.

(12)

Adding Radio Buttons P a g e 1 2

4. 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.

(13)

Adding Drop-Down Menus P a g e 1 3

. . . .

A D D I N G D R O P - D O W N M E N U S

1. 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.

(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.

(15)

Set the tow Height, Tab order, and determine whether users can select more than one choice from the drop- down menu.

Click on the Validate... button.

(16)

Selecting a Form Handler P a g e 1 6

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.

. . . .

S E L E C T I N G A F O R M H A N D L E R

After users complete the form, the data can be saved to the following form handlers:

1. E-Mail - form data is sent via email 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.

. . . .

C U S T O M I Z I N G T H E C O N F I R M A T I O N P A G E

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.

(17)

Sending Form Data via E-Mail P a g e 1 7

. . . .

S E N D I N G F O R M D A T A V I A E - M A I L

1. 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 E-Mail address box. Type a descriptive title in the Form name box. Click on the Options... button.

3. Click on the E-mail Results tab. Verify that the E-mail address to receive results is correct. Select Formatted text from the E-mail format dropdown menu. Verify that the checkbox labeled "Include field

(18)

Sending Form Data via E-Mail P a g e 1 8 names" is checked. Enter the desired Subject line to be displayed on incoming e-mails 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 email addresses. Click in the checkbox labeled Form field name, and enter the form field name that you used for the e-mail 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.

(19)

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. Open your e-mail software program and check for new mail. You should have received a message similar to the one displayed below.

(20)

You can respond back to the user who submitted the form by clicking on the Reply button.

The e-mail address that the user submitted on the form will automatically be placed in the To field of the return e-mail message, as shown below.

(21)

Sending Form Data to a Word Document P a g e 2 1

Note: Since the subject line of the email 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 e-mail messages to a designated folder.

. . . .

S E N D I N G F O R M D A T A T O A W O R D D O C U M E N T

(22)

2. 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

(23)

Form Properties box reappears, click OK.

6. Complete the form and click on the Submit button.

(24)

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.)

(25)

9. 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.

(26)

Sending Form Data to a Excel Spreadsheet P a g e 2 6

11. 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.

. . . .

S E N D I N G F O R M D A T A T O A E X C E L S P R E A D S H E E T

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.

(27)

3. 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.

(28)

6. Complete the form and click on the Submit button.

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.)

(29)

Sending Form Data to an ASP Database P a g e 2 9

9. 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.

. . . .

S E N D I N G F O R M D A T A T O A N A S P D A T A B A S E

Before you can set up your form to send results to an Access database, you must rename the form with an .asp

(30)

extension.

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.

(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.

(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 Email field to be saved to the database, you could remove it.). Click OK.

(33)

7. Complete the quiz and click on the Submit button.

(34)

9. 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.

(35)

Customizing the Confirmation Form P a g e 3 5

11. 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.

. . . .

C U S T O M I Z I N G T H E C O N F I R M A T I O N F O R M

(36)

2. Click on the Options... button.

3. Click on the Confirmation Page tab. Enter the URL of confirmation page. Click OK.

(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.

(38)

6. 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. Email). (Note: The confirmation field must match exactly with the corresponding form field names on your form.) Click OK.

(39)

10. 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.

(40)

12. 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.)