Creating Forms

The CMS can be used to create online forms to help gather information from visitors.  Forms can be used to make simple contact forms, requests for information, registrations, polls and surveys, and more.  The below steps will demonstrate how to use the CMS to make a variety of forms.
  

Add the Form


  1. From the Content tab, navigate to the folder where you will be adding your form
  2. Click on New on the top menu and then click HTML Form/Survey
  3.   form

  4. A list of form options appears.  Choose Blank Form.  And then click Next at the top.
    *If you want to make a Survey or Poll, the instructions to do so will be very similar to these.
  5.  formtype

  6. Give the form a Title and a Description
  7. If you want to create a task and assign it to a certain group of people, or a specific user, you can add that in this step.  If you just want the form to be emailed to a certain user upon completion, then do not select any user and just click Next.  The email option can be added in a later step. Click on Select User or group and make your selection and click Next. (The user or group must have permission to edit content in the folder.  Contact webmaster@fhsu.edu to add user or group permissions.)
  8. Create the post-back response.  This is what action will be taken after the user submits the form.  You can display a message (fill out the content area at the bottom), or redirect to another file or page.  Once you make your selection and create your postback message, click Next.
  9. postback
  10. Click Done.

Create the Form

The editor window appears.  Fill out the metadata, Alias, etc. as you would a normal content item.  Also be sure to click the Template tab, and choose a form template.  The editor looks the same as when creating a content page, but the form specific buttons have been added.

formcreator

 
The below image shows the form specific features labeled 1 – 11.  Each option is explained in detail respectively.

formfields
 
1.    Text Field:  allows the user to enter text.  To insert a text box, position your cursor where you want the text box placed, and click the “Text Field” button.  The text field dialog will pop up. 

  • Fill in the Description, Field Name, and ToolTip fields with a description of the field.  
  • Choose the maximum number of characters allowed in your text field.  
  • Choose any options that apply in the Options area
  • Click the Validation tab at the top.  If the user should only be allowed to input certain types of data, then use the options here to set restraints.
  • Click the Data Styles tab at the top.  Apply styles to your form fields. (Although style options are available, most options are limited to the FHSU predefined styles)

  data style

  • Click OK.  The Text Field is added to the Form

2.    Choices Field:  This field is used to create a list of choices.  Choices fields can be displayed in many different ways.  For example, a vertical list with checkboxes, a horizontal list with checkboxes, a list box, or a drop down list.  To insert a choices field, position your cursor where you want it placed, and click the “Choices Field” button.  The choices field dialog will pop up.
 
choices  

  • Fill in the Description, Field Name, and ToolTip fields with a description of the field.  
  • By default the List option displays (Custom).  This means you will create your own options.   Click the down arrow next to the List option to view prepopulated lists that can be used.
  • Allow Selection: Choose details about how the user can make selections.  
  • Appearance: Choose the way the list should appear
  • Item List: Add each list item by filling in the Display Text and Value options.  The display text is what appears on your form, and the value is what appears in your data results.  Usually these two can be the same.  If you want a certain item selected by default, then put a checkmark in the selected checkbox.  To disable an option select disabled.
  • Fill in the Validation tab and Data styles tab options as needed
  • Click OK to add the choices field

3.    Checkbox Field:  This field is used whenever a user needs to make a True (checked) or False (unchecked) selection.  To insert a checkbox field, position your cursor where you want it placed, and click the “Checkbox Field” button.  The checkbox field dialog will pop up.

  • Fill in the Description, Field Name, and ToolTip fields with a description of the field.  
  • Select the default value for the checkbox. It can be automatically checked, or automatically unchecked on the form
  • Fill in the caption for the checkbox and apply any validation rules in the validation tab
  • Click OK.  The checkbox field is added to your form

4.    Calendar Field:  This will create a text box with a calendar icon so the user can select a date from the calendar.  To insert a calendar field, position your cursor where you want it placed, and click the “Calendar Field” button.  The calendar field dialog will pop up.

  • Fill in the Description, Field Name, and ToolTip fields with a description of the field.  
  • If you want the calendar to automatically select a default date, enter it as the default value.
  • Choose any validation or data styles that are need
  • Click OK.  The calendar field is added to your form

5.    Insert Button:  Inserts form information to the server.  By default it is blank.  To add text, double click the button and update the fields that display at the bottom of the editor.
6.    Insert Reset:  Inserts a reset button that will revert all fields back to their state when the form was first loaded
7.    Submit: Inserts form information to the server.  By default, it says submit
8.    Field properties:  Select a field and click this to edit the field properties.  You can also select the field and right click and choose field properties to edit.
9.    Validate:  Will check if the page is validated
10.  Check Compatibility:  Check’s for compatibility issues
11.  View Data as field list:  Displays the field list coding

*When creating the form, the content editor can be used as it would any other content page to develop the forms content.  

Publish the form when it is complete.


 Set up the Mail Properties

Once the form has been published you can go in and add more properties.

  1. Navigate to your form and click it once
  2. At the top menu click “Edit Properties”

  3.  
    edit properties 
     
  4. Form Data:  Place a checkbox in the Mail box if you want the form emailed every time it is submitted
  5. Tasks can be assigned from the Edit Properties dialog if needed
  6. Click the Mail Properties tab and customize the Mail options as desired.
  7. Click Save

View Reports

If a form is set to store data in the database, you can run a report that displays the submitted data. To view a form report, follow these steps.

  1. Navigate to your form and click it once
  2. At the top menu click “View Reports”


  3. reports  
     
  4. The View Form Report screen appears
  5. Enter the report criteria
  6. Report Display:  Choose the way you wanted the data presented
  7. Select Legacy Report:  Do not change
  8. Click Get Report.
  9. The report is displayed.

 

 Creating Forms How To Video

8 minutes and 14 seconds

 

 

Back to top