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 Development1

HTML Form Creation in the Vignette

Content Management Application


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.


Add a piece of content (continued)


Select FORM (HTML-FORM)


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.<b>This is a sample form. </b></br><form method='post'><input type='hidden' name='fpFormType' value='MailOut'> 


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

<input type='hidden' name='fpMailFromAddr' value='[email protected]'> 

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 email will be sent.<input type='hidden' name='fpMailToAddr' value='[email protected]'> 

Note: Do not change the name field. It needs to be fpMailToAddr in order for Vignette to recognize it as the MailTo address.



3. Enter the “Subject (fpSubject)” line.<input type='hidden' name='fpSubject' value=‘Sample Request Form’ > 

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.<input type='hidden' name='fpReturnMsg' value='Form has been sent successfully!'> 

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: <form method='post' name='TestForm' action="/e-michigan/0,1607,7-112-15476_16243_25456-88516--,00.html">



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 ‘<form></form>’ 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.

 <table border="1" width="296" cellspacing="0" cellpadding="0" height="121"> <tr> <td width="280" colspan="2" height="19">

Your Form fields……</td>

</tr> </table> <br>

Fields will be returned in random order unless you take care in naming them. To have the fields returned to in yourdesired 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 e-mail, 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 e-mail. The f##_ will be removed prior to sending the e-mail message back to you.

The last part of the code is the submit button (fpSubmit) and the closing form “</form>” tag.<input type='submit' value='Submit' name='fpSubmit' tabIndex=10> <input type='reset' value='Reset' name='Reset' tabIndex=11> </form>


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 - Email field is required

Below is the JavaScript required. It contains a function called verify:

<SCRIPT LANGUAGE="JavaScript">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_Email.value=="") {

themessage = themessage + " - Email Address";}//alert if fields are empty and cancel form submitif (themessage == "Please complete the following fields: ") {

document.TestForm.submit();}else {

alert(themessage);return false; }

}</SCRIPT>


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 <form> tag that will call the function when the form is submitted.

<form method='post' name='TestForm' onSubmit="return verify();“>

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.


Other FORMS……

Listserv Signup Form Code Adds email addresses to Listserv. Instructions and code are in the “Creating a Html Form in the CMA” document on the e-Michigan website.

Simple Voting PollThis 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.http://www.michigan.gov/e-michigan

Email a Post Card (Coming Soon)

Documents

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