HTML Form Creation in the Vignette

1

• HTML Form Creation in the Vignette
• Content Management Application

2
Add a piece of content in the CMA

• Click on the link Add Content on the Left Nav
  bar, under the Content Entry category.
• The Category Group page will display.
• Select the second level category where the
  content will be associated.
• Click Continue
• Displays the Add New Content Item page.
• Select a Primary Category, (Example
  MDCH-WHATSNEW)
• Enter the Title
• Verify Release Date and Release Hour are correct
  and are set to when the content is to go live on
  the web site.

3
Add a piece of content (continued)
4
Select FORM (HTML-FORM)

• Select FORM (HTML-FORM) for the Content type.
• Fill in the Description (Short Text). This is
  optional.

5
Fill in the Body with your form

• Add the HTML FORM code to the Body.
• Copy and paste the HTML FORM code into the body
  of the content.
• At the top of the form, add html and any
  information about the form.
• lt!-- Start form to e-mail code --gt
• lt!--Your Information about this form here--gt
• ltbgtThis is a sample form. lt/bgtlt/brgt
• lt!--Do not alter this code. It is required by
  Vignette to post the form--gt
• ltform method'post'gt
• lt!-- REQUIRED Form tag, NO Action attribute, NO
  enctype attribute. Method attribute set to post
  --gt
• ltinput type'hidden' name'fpFormType'
  value'MailOut'gt
• lt!-- REQUIRED MailOut or ListServ --gtnbsp

6
Steps to creating the HTML FORM

• Enter the From (fpMailFromAddr) address, using
  the senders address.
• Use of default address may be appropriate for
  senders address
• lt!-- Step one Insert 'From' address--gt
• ltinput type'hidden' name'fpMailFromAddr'
  value'DoNotReply_at_michigan.gov'gt lt!-- REQUIRED
  If MailOut set to fake email address using the
  michigan.gov domain. --gt
• Note Do not change the name field. It needs to
  be fpMailFromAddr in order for Vignette to
  recognize it as the From address.
• Enter the To (fpMailToAddr) address, using
  address of all recipient(s) where the email will
  be sent.
• lt!-- Step two Insert 'To' address--gt
• ltinput type'hidden' name'fpMailToAddr'
  value'thompsonj_at_michigan.gov'gt lt!-- REQUIRED
  Set to the desired recipient of the form
  information. --gt
• Note Do not change the name field. It needs to
  be fpMailToAddr in order for Vignette to
  recognize it as the MailTo address.

7
Steps to creating the HTML FORM

• Enter the Subject (fpSubject) line.
• lt!-- Step three Insert 'Subject'--gt
• ltinput type'hidden' name'fpSubject'
  valueSample Request Form gt lt!-- Optional
  Subject for the email. --gt
• 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.
• Enter the Response (fpReturnMsg) message. It is
  used to communicate message back to the person
  who will submit the form on web site.
• lt!-- Step four Insert 'Response message'--gt
• ltinput type'hidden' name'fpReturnMsg'
  value'Form has been sent successfully!'gt lt!--
  Optional Message to be displayed on the screen
  after submission.--gt
• 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 ltform method'post' name'TestForm'
  action"/e-michigan/0,1607,7-112-15476_16243_25456
  -88516--,00.html"gt

8
Steps to creating the HTML FORM

• 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 ltformgtlt/formgt 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.
• lt!-- Step five Insert Your Additional Form
  Fields Here --gt
• lt!--Any additional fields will be passed in the
  message body sent to the recipient.
• They will be in the format Fieldname1 Value1
  Fieldname2 Value2 ... --gt 
• lttable border"1" width"296" cellspacing"0"
  cellpadding"0" height"121"gt
• lttrgt
• lttd width"280" colspan"2" height"19"gt
• Your Form fields
• lt/tdgt
• lt/trgt
• lt/tablegt
• ltbrgtnbsp
• 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 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.

9
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 ltSCRIPT
  LANGUAGE"JavaScript"gtfunction verify() var
  themessage "Please complete the following
  fields "if (document.TestForm.f01_UserName.valu
  e"") 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
  submit
• if (themessage "Please complete the following
  fields ")
• document.TestForm.submit()
• else
• alert(themessage)
• return false
• lt/SCRIPTgt

10
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 ltformgt
  tag that will call the function when the form is
  submitted.
• ltform method'post' name'TestForm'
  onSubmit"return verify()gt
• 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.

11
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 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.
• http//www.michigan.gov/e-michigan
• Email a Post Card (Coming Soon)