Department of Information Technology e-Michigan Web Development 0 HTML Form Creation in the Vignette Content Management Application

Department of Information Technology e-Michigan Web Development 1 Add a piece of content in the CMA 1.Click on the link Add Content on the Left Nav bar, under the Content Entry: category. The Category Group page will display. 2.Select the second level category where the content will be associated. 3.Click “Continue” Displays the Add New Content Item page. 4.Select a Primary Category, (Example: MDCH-WHATSNEW) 5.Enter the Title 6.Verify Release Date and Release Hour are correct and are set to when the content is to go live on the web site.

Department of Information Technology e-Michigan Web Development 2 Add a piece of content (continued)

Department of Information Technology e-Michigan Web Development 3 Select FORM (HTML-FORM) Select FORM (HTML-FORM) for the Content type. Fill in the Description (Short Text). This is optional.

Department of Information Technology e-Michigan Web Development 4 Fill in the Body with your form 1.Add the HTML FORM code to the Body. Copy and paste the HTML FORM code into the body of the content. 2.At the top of the form, add html and any information about the form. This is a sample form.

Department of Information Technology e-Michigan Web Development 5 Steps to creating the HTML FORM 1.Enter the “From ( fpMailFromAddr )” address, using the sender’s address. Use of default address may be appropriate for sender’s address Note: Do not change the name field. It needs to be fpMailFromAddr in order for Vignette to recognize it as the From address. 2.Enter the “To ( fpMailToAddr ) ” address, using address of all recipient(s) where the will be sent. Note: Do not change the name field. It needs to be fpMailToAddr in order for Vignette to recognize it as the MailTo address.

Department of Information Technology e-Michigan Web Development 6 Steps to creating the HTML FORM 3.Enter the “Subject ( fpSubject )” line. Note: Do not change the name field (unless you are going to use one of the form fields to for the Subject field) It needs to be fpSubject in order for Vignette to recognize it as the Subject. 4.Enter the “Response ( fpReturnMsg )” message. It is used to communicate message back to the person who will submit the form on web site. Although optional, it is highly recommend that the visitor knows the form was submitted. An alternative is the creation of a response page the visitor would be sent when they submitted the form. Place the URL of the response page in the action of the form. Example:

Department of Information Technology e-Michigan Web Development 7 Steps to creating the HTML FORM 5.Insert the fields on the form for the user to enter. If you create the fields in a web editor, DO NOT insert the additional ‘ ’ tags with the fields that you added. They have already been included in the code that you copied and pasted into the body of the form. <!--Any additional fields will be passed in the message body sent to the recipient. They will be in the format: Fieldname1: Value1 Fieldname2: Value > Your Form fields…… Fields will be returned in random order unless you take care in naming them. To have the fields returned to in your desired order: Start all the field names with f##_name, such as f01_lastname, f02_firstname, f03_street, f04_city, etc. The field beginning with f01_ will be the first field in the returned , f02_ the second and so on. Continue the numbering sequence for all the fields in the order in which you want them to appear in the . The f##_ will be removed prior to sending the message back to you. The last part of the code is the submit button (fpSubmit) and the closing form “ ” tag.

Department of Information Technology e-Michigan Web Development 8 Adding Form Validation To ensure that visitors fill in a required field, use JavaScript to validate the form. Insert this JavaScript code in the body field above the html of the form. Example - field is required Below is the JavaScript required. It contains a function called verify: function verify() { var themessage = "Please complete the following fields: "; if (document.TestForm.f01_UserName.value=="") { themessage = themessage + " - First Name"; } if (document.TestForm.f02_UserID.value=="") { themessage = themessage + " - Last Name"; } if (document.TestForm.f03_ .value=="") { themessage = themessage + " - Address"; } //alert if fields are empty and cancel form submit if (themessage == "Please complete the following fields: ") { document.TestForm.submit(); } else { alert(themessage); return false; }

Department of Information Technology e-Michigan Web Development 9 Adding Form Validation Edit/add any fields that you want validate by changing the document.TestForm.f01_UserName.value statements. In the example, the TestForm is the name of the form and f01_UserName is the name of the field that will be validated. Change the message for this statement. Next, add an onSubmit event to the opening tag that will call the function when the form is submitted. If any of the fields to be validated are empty when the form is submitted, then a message box will “pop-up” to let the visitor know that they need fill in the required fields before the form can be submitted.

Department of Information Technology e-Michigan Web Development 10 Other FORMS…… Listserv Signup Form Code Adds addresses to Listserv. Instructions and code are in the “ Creating a Html Form in the CMA ” document on the e-Michigan website. Simple Voting Poll This is a simple form that allows visitors to take a Yes or No poll that can then be calculated with GroupWise based upon the visitors response. Instructions and sample code for the Simple Voting Poll on the e- Michigan website. a Post Card (Coming Soon)