Tutorial: Creating a form that s the results to you.

Transcription

1 Tutorial: Creating a form that s the results to you. 1. Create a new page in your web site Using the Wizard Interface. a) Choose I want to add a form that s the results to me in the wizard. b) Enter an appropriate name for the page. c) Use all the default values in the wizard, clicking the Next button continuously to the Finish tab. Do not edit the form in the content tab. We will open the form later to edit it. For now, continue to the finish tab and save the form and keep it On Hold. 2. Return to the site outline and find the form page that you just created. You must open the form from the site outline to edit it in our advanced form editor. Right click on the page name and select Edit this page with Advanced Editor (Figure 1). Figure 1

2 3. Your form will appear in the editor window, with a set of default contents (Figure 2). This is just a basic form designed to get you started. You can use the form as is if you want, or you can change the elements within the form to meet your specific needs. However, before you make the form live, you must finish configuring the form. Figure 2

3 4. Finish configuring the form. At the bottom of the form you will find a section titled FORM CONFIGURATION VALUES. There is text with square brackets and a set of fields with text in them. Enter values as described below to finish configuring this form. To change the values inside of the fields you should click once (do not double click) on the box to make the square boxes appear around the field, then click once within the field to make the diagonal lines appear around the field and enter edit mode on that field (Figure 3). Change the text as desired, then click outside of the box to set the value. DO NOT ENTER HTML INTO ANY OF THESE FIELDS. HTML IS REJECTED BY THE FORM PROCESSOR, TO PROTECT YOU FROM SPAM BOTS THAT MAY ATTEMPT TO SUBMIT YOUR FORM. Figure 3 If you double click on the box, I dialog window will open (Figure 4). You can use that to edit the values also. Just edit the text within the Value field, then click OK. Figure 4 a) [Send To] This is the address that the form will be sent to. If your domain has been pre-configured properly, you only need to enter the username part of the . This will hide your address from spam bots. If you are sending to an address that is not part of your domain, you will need to enter the full address. (the name of this field in the form is eto )

4 i. In the example above, if your domain name was .com, you would only need to enter the your part of the address, where your is your actual address username. (ex: if is your address, enter bill into the field. The yourdomain.com part of the address will be added to the address when it is sent.) b) [Copy To] This is where you can specify a second address to send a copy of the form to. Use the same rules as the [Send To] field. Leave the field blank if you do not want to send a copy to anyone. (the name of this field in the form is cto ) c) [ Subject] Enter the text that you would like to appear in the subject line of the that is sent to you. If you enter a unique subject line for each form, it will help you to know what form was used to sent the info to you. (the name of this field in the form is Subject ) d) [Return Page] This is the page that users will be sent to after submitting the form. The /default.aspx that is shown, uses the web site home page. You can use any valid URL. If the URL contains your domain name (example: ) be sure to include the at the beginning, or the link will create an error. (the name of this field in the form is ReturnPage ) e) [Success Message] Enter the text that you would like to appear on the acknowledgement page when a form is successfully submitted. (the name of this field in the form is SuccessMessage ) Your form is now complete enough to work on the web and send information to you. The text that is in square brackets in this section will need to be deleted. It will look like (Figure 5) below when properly cleaned up. If you do not delete the text, it will appear on your web page. Be careful to not delete the fields. Figure 5

5 Click on the Save Tab, select Publish To Web, then click on the Save button to save your changes. Test your form by going to the page on your website, filling in the form and submitting it. You should receive an with the results shortly after you fill in the form. TROUBLESHOOTING: If you do not receive the form submission results in an Check to be sure the address is correct in the [Send To] field. Check your spam filter to be sure the is not getting hung up there. Use your full address in the [Send To] field and test it. Remember, each time you make a change to the form, you should refresh the live form and fill it in before re-submitting it. MODIFYING THE FORM: Adding fields to your form is a simple process. The form is already set up in a table. Suppose you want to add field after the Name field that is already in the form. PLEASE NOTE: WHEN ADDING FIELDS TO YOUR FORM, THE NAME FOR ANY FIELD TYPE THAT IS USED CAN NOT CONTAIN SPACES. USE A SINGLE WORD ONLY, OR A SINGLE WORD WITH UNDERSCORES FOR SPACING. CREATING YOUR ROW AND ENTERING YOUR DESCRIPTION 1. Click your mouse inside of the table cell that says Name in it. 2. Right click your mouse in the same cell and select Table>Insert Row Below from the pop up menu. 3. A new row will appear. 4. Enter your description text into the cell on the left. 5. Follow the procedure below for the type of field that you want to add to the form. ADDING A TEXTBOX OR A TEXTAREA TO THE FORM: A textbox allows for a single line of text to be entered into a form, whereas a textarea allows for multiple lines of text to be added to a form (Figure 6). Figure 6

6 Suppose that you want to add a phone number field after the Name field. Follow these instructions. 1. Follow the instructions above for creating your row and entering your description. 2. Click your mouse in the cell on the right. 3. Right click your mouse in the same cell and select Insert>Form>Textbox from the pop up menu. The text box is inserted into your form and a pop up window appears (Figure 6). 4. Enter an appropriate name in the Name field, such as PhoneNumber or Phone_Number. DO NOT USE SPACES IN THE NAME. IT SHOULD BE ALL ONE WORD. 5. If you want a default value in the field, enter it into the Value field. Otherwise, delete the text that is in the field, so that it will appear blank. 6. The size field is used to change the size that is displayed on the page. Entering a number in here will cause the field to be wider or narrower. You can also change the size of the field by leaving this blank and dragging the edge of the field on the page to resize it. 7. The MaxLength field is used to control how much text can be typed into the box. For example, entering 10 in field will only allow 10 characters to be typed into the box. Leave it blank to allow any number of characters to be entered. 8. You can leave the ID field alone. 9. Click OK and you will see the element added to the page. Figure 7 Use the same instructions to add a textarea to your form. The pop dialog will include additional fields (Figure 8).

7 1. Columns controls how wide your textarea appears on the page 2. Rows controls how many rows of text are visible in your text area. 3. You may choose to set thesize by dragging the corners of the textarea on the page as well. Figure 8 ADDING A DROP DOWN LIST OR A LISTBOX TO YOUR FORM A dropdownlist or select-list box allows for many selections to be added to a form in a compact area of your form. 1. Right click in your table and select Insert>Form>Drop Down Textbox. 2. The dropdownlist will be added to your form and a dialog box will appear (Figure 9). 3. Enter a single word with no spacing in the Name field. 4. You can leave the ID field with the default value that is in it. 5. The size indicates how many items will show at one time. The default of 0 should be used to get the drop down effect when clicked. A value of 2 or more will show only that many items and arrows will allow for scrolling through the items. You should never set this to a value of Allow Multiple Selections will allow more than one choice to be selected from the list. This should only be checked if the size is 2 or greater. 7. Adding items to the drop down list:

8 a. Enter the text that will be displayed in the dropdown into the Text field, and enter the value that will be sent in the form in the Value field. Usually these two items will be set to the same value. b. Click Insert to add it to the bottom of the list. c. To change an item, click on it so that its text and value appear in the Text/Values boxes. d. Change the text and value as desired e. Click the update button to set the item. f. You can move items up and down the list by clicking the Move Up or Move down buttons. Figure 9 8. A listbox is essentially the same as a dropdownlist, but has the a size that allows the user to view multiple entries. ADDING CHECKBOXES AND RADIO BUTTONS TO YOUR FORM Checkboxes allow for one or more items to be selected by clicking a checkbox on the form. Radiobuttons allow for only one choice to be made from a group of choices. While checkboxes can be added individually or as groups, radio buttons must be added as groups. To add either of these items as groups, they must simply have the same name for each option.

9 1. To create 3 radio button or checkbox choices, click your mouse on the form where you want the items to appear. Select Insert>Form>Radio Button or Insert>Form>Check Box from the pop up menu. DO NOT MIX AND MATCH THESE ITEMS. YOU SHOULD USE EITHER RADIO BUTTONS OR CHECK BOXES IN A GROUP, BUT NOT BOTH OF THEM IN A SINGLE GROUP. Repeat this process three times to add the three items to the page. If you would like each choice to appear on a separate line, type the CTRL and ENTER key to force a single carriage return. (Figure 10) Figure Change the text next to the boxes to reflect the desired choices (Figure 11). Figure Now you must configure each checkbox or radio button to send the appropriate value to you. Double click on the checkbox or radio button next to each description and a dialog box will appear. It looks the same for both of radio buttons and check boxes (Figure 12).

10 Figure For each group of items, the Name field must be the same. In our example, all the radio buttons should be named Favorite_Color and all the checkboxes should be named Favorite_Animal. When completed, you will have 3 radio buttons named Favorite_Color and 3 checkboxes named Favorite_Animal. 5. The Value for each item should be set to the corresponding value that shows on the page (ie, Red for the first, Green for the second and Blue for the third of the radio buttons) 6. The ID field should not be changed on these item. When the field was added, a corresponding label was added that allows the user to click the words next to the checkbox or radio button to select it. It uses the ID to associate it with the correct button. 7. CHECKED the Checked checkbox determines if a default value is selected for any item. You can check this for any number of the checkbox fields, but only one of the radio button fields. 8. Figure 13 shows a proper configuration for the Favorite_Color Radio button that is used for the Green selection. In this case, it has Green selected as the default value.

11 Figure 13

12 SETTING UP FORM VALIDATION AND REQUIRED FIELDS Form validation is a fairly automated process. When the user clicks the submit button on your form, it is automatically checked for valid results. If a field does not pass validation, the user gets a pop up box with a message, then focus is set on the form to the offending field. A form will not get submitted until it passes all validation. You must take a few simple steps to set up validation. Validation is controlled by the naming of the fields. To make a field a required field, add the word _required to the end of the name. For example, the Name field on the form comes preconfigured to be a required field. Double click on a field to open the pop up dialog for that field (Figure 14). In the name field add the appropriate name + _required (in this example Name_required ). PLEASE NOTE THAT THE WORD _required MUST BE LOWER CASE. In the case of radio buttons or checkboxes, all the items in the group must still be named the same, so add the _required suffix to all the items in that group if you want it to be required. You may want to add the words * Required after or near any field that is required, so your visitors know it is required when filling it in. Be careful to select only the required fields that are necessary or your user may not complete the form and send it to you. Figure 14

13 Making a DropDownList a required field means that you are expecting the user to make a selection other than the top item that is showing in the list by default. Therefore, the top item in the list should be a hint, such as the word Select (Figure 15). When a DropDownList is required, the top item in the list cannot be selected. Figure 15

14 VALIDATING AN FIELD In order to make sure an field is checked for a valid format for the address, the field must simply have somewhere in the name of the field. If the field is named or Business or anything else with in the name, it will be validated to be sure that the value entered is in a valid format to be an address. To make an field a required field too, just add the _required suffix as described above. By default, the form that is automatically created for you has an field named _required. HTML IN FIELDS IS NOT ALLOWED In order to prevent spam bots and server hacks, the forms do not allow HTML to be entered into a field. DON T FORGET TO SAVE YOUR FORM AND TEST IT WHEN YOU HAVE MADE CHANGES. THIS WILL ASSURE THAT YOU CATCH ANY PROBLEMS BEFORE YOUR USERS DO. These instructions pertain to new forms that are created on your site only. If you have an old form on your web site, some portions of these instructions may not work properly. Please contact your site administrator to be sure your form is configured to work with these instructions.