Create-Edit Forms

From IT Audit Machine Documentation
Jump to: navigation, search

Creating a New Form

Administrators and users with permissions to create new forms will begin form creation at the Form Manager page and use the CreateNewFormBtn.png button on the top right corner to launch the Form Builder. The Form Builder allows the user to select and place form design elements from a variety of predefined field type elements, define field specific properties, and also to define form specific properties. Upon saving the design of the new form, the user will be redirected back to the Form Manager page and the new form will be displayed in the list of available forms.
Form-New.png

The Form Builder is where users will spend a majority of their time when building a form. Here, users will be able to add fields, set validations, set the form’s schedule and define almost every aspect of the form’s functionality.

The Form Builder is graphically and functionally divided into two main columns. The left column is the workspace area and also serves as a preview of the form design. The right column serves as the forms toolbox interface from which users can select to add fields, change field properties, and change the properties of the form. Note that while the preview section displays a general layout preview of the form any associated theme is not displayed within the preview. Custom themes are only displayed when viewing the live form.
FormBuilderAreas.png

Tagging the Forms

Improve and simplify forms management with the tagging feature.
Form-Tag-Example.png

When there are a large number of forms it is useful to assign a tag name to each form. Tag names will allow the user to dynamically group the forms into categories and improve forms management. Users may input any string as the tag name, including spaces, numbers, and special characters (excluding commas). Also, each form can be assigned multiple tag names. To assign multiple tag names to a form, enter each tag name separated by a comma.

Filtering and Sorting

FormFilterSortOption.png
On the top left corner of the Form Manager, a search box is provided to easily search and filter the list forms. A search of forms may be preformed using either form title and/or by tag names. The results are displayed instantly and the keywords are highlighted. Forms may also be sorted based on a set of predefined conditions. A sort operation is performed by clicking the “Sort By” drop-down on the top right corner of the Form Manager. Tip: To display the total entries for each form, use the Sort-By feature and select “Total Entries”.


Enable/Disable Form

ITAM-Menu-Disable.png

It may be necessary to temporarily disable a form and not accept new entries. Clicking the “Disable” link on the form allows this. To re-enable the form to allow new entries, click the “Enable” link which replaces the "Disable" link when the form is disabled. When a form has been disabled, a message indicating the form’s status will be displayed and the form fields will be hidden from the user.

ITAM-Menu-Enable.png

The "Disable/Enable" feature is useful for forms such as event registration forms, job application forms, or any form that is time-sensitive. The message displayed when a form is disabled can also be customized for each form. The ability to customize these messages specific to each form accordingly allows the administrator the ability to create more informative and useful messages for users.

Note: Disabling a form is not the same function as deleting a form. When disabling a form, all of the data associated with the form is preserved in the database. Disabling is simply turning the form off for use by users.

Changing Themes

ITAM-Menu-Theme.png

A theme is a set of CSS code constructs defined to control the look and feel of a form (colors, backgrounds, fonts, logo, etc). By default, the “IT Audit Machine” theme is assigned to all new forms. The administrator can change the theme by clicking the “Theme” link and selecting a new theme from the drop-down list. There are built-in themes available and users who have been assigned the “Create new theme” privilege can also create new themes by choosing the “Create New Theme” option. View the Edit Themes wiki for specific information on creating and modifying themes.

Duplicating the Form

ITAM-Menu-Duplicate.png

Duplicating a form will create an exact copy of the selected form inclusive of all form settings (notifications, payment, theme). Note that duplicating the form does not copy the data record entries that were created using the source form. The new (duplicate) form will have no data record entries associated with it. If business requirements should define a need for the creation of multiple forms with similar fields, it may be efficient to create a master form that contains all of the common fields among the many forms. Then, each time a new form with these common fields is needed a duplicate of the master form can serve as a starting point for the creation of the new form with additional modification and customization then being applied.

Deleting the Form

NOTICE: Deleting the form should only be performed after much consideration and only with appropriate management approval. Deleting the form will result in both the deletion of the form design and the deletion of all the associated data records and file uploads. There is no trash, recycle bin, or undo function that will easily restore forms and data via the administration panel.

ITAM-Menu-Delete.png

To delete a form, click the delete button on the far right of the form list entry. When deleting a form the user will be presented with a confirmation dialog warning the user of the action with options to either confirm the deletion request or to cancel the deletion action.

DeleteFormConfirmation.png

This is the only confirmation provided and the only opportunity for the user to cancel the deletion action.

Adding Fields

To add fields to a form, select the type of field to be added from the Add a Field tab in the right side of the Form Builder.

Using the mouse pointer, click-hold & drag the selected field type into the form. A dashed box will appear in the form that indicates where the selected field will be inserted. Release the mouse button to insert the field in the indicated location.

Every field element is unique to the other elements and have special definitions and functionality.

Select a field element from the following table to learn more about it.
Single-line-text.png Paragraph-text.png
Name.png Address.png
Phone.png Email.png
Time.png Date.png
Number.png Price.png
Web-site.png Syndication.png
Multiple-choice.png Checkboxes.png
Matrix-choice.png Drop-down.png
File-upload.png Media-player.png
Section-break.png Page-break.png
Form-cascading.png Signature.png
Form-chat.png

Ordering Fields

To order or rearrange the position of fields in a form, click & drag the field within the form preview area. As the field is moved within the form a dashed box will indicate the new location the field will be placed. When the desired new location is indicated, release the mouse button.

Field Properties

To display the Field Properties tab for a field, click the field in the form preview area. The available field properties of a field will depend on the field type. The field properties tab will display any applicable settings for a particular field, including the label, rules, size, options, guidelines, etc. Clicking the Help icon FieldHelpIcon.png next to each option/property will display detailed information regarding the property.

FieldPropertyHelpDisplay.png

Field Guidelines

Field Guidelines serve as an additional user instruction feature within forms. For most fields the text entered into the guidelines property will display to the immediate right of the field as can be seen in example below.

Guidelines-Form.png

Field types such as a Section Break allow for more lengthy instructions. For instance, a new form section may require a summary introduction with a number or bullet list of compliance standards that the section will address.

Custom CSS Class

Custom CSS Classes allows you to create more advanced layout of your form fields, such as two fields on a row, three fields on a row and so on. Up to six fields on a row may be implemented.

Here are some examples:

  • column_2
  • column_3
  • column_4
  • column_5
  • column_6
  • guidelines_bottom

It is important that form designers be aware that the space utilized by guidelines can be an issue with the overall form design. One option for managing the space utilized by guidelines is to use a built-in CSS class property that will position the display of the guideline text below the associated field. With the form in edit mode, click the field to display the field properties. In the Custom CSS Class property, enter in the desired code.

You will need to place the exact number of sequential fields along with the same Customer CSS Code in each field for this to work.

For example, let's use the Address field and you'd like a side-by-side appearance. Enter the Custom CSS Class value column_2 into the Custom CSS Class value entry blank like this:

Side-by-side-example1.jpg

Save your work and view it. It should now appear like this example:

Side-by-side-view1.jpg

As you can see, the Custom CSS Classes are very handy to align your fields into a line. You can create multiple columns within a form, each row having its own column size however, there are some exceptions with the field alignment class. It will not work on Matrix Choice, Form Cascade, Syndication and Section Break fields. Also, these only work if you are using the default alignment for the field labels (Top Aligned). If you are using Left or Right Label Alignment for your fields, this will not appear differently.

Creating a Multi-Page Form

When a form has numerous fields, it is good practice to split the form into multiple pages. This allows for a logical separation of content in addtion to not overwhelming clients which could cause them to abandon the form. To creating a multi-page form within IT Audit Machine, simply drag a “Page Break” field into the form preview area and a new page will be created. Additional fields may be added and organized within the page as normal.

Custom Handling and Formatting with HTML

Custom formatting of form text is possible using simple HTML tags. This example generates normal text into bold text.

Custom-Formatting.png

Additional HTML custom formating examples:

The following text would be entered in the Guidelines For User box.

Example 1

Entering the text and inline HTML...

If assessing Requirement 11.3 against PCI DSS v2, complete the questions indicated with a “V2” prefix <SPAN style="BACKGROUND-COLOR: #fbd4b4">(shaded).</SPAN>

The result would appear as...

If assessing Requirement 11.3 against PCI DSS v2, complete the questions indicated with a “V2” prefix (shaded).


Example 2

Entering the text and inline HTML code...

If assessing Requirement 11.3 against PCI DSS v2, complete the questions indicated with a “V2” prefix <SPAN style="BACKGROUND-COLOR: #fbd4b4">(shaded).</SPAN>

The result would appear as...

If assessing Requirement 11.3 against PCI DSS v3, complete the questions indicated with a “V3” prefix(shaded).


Example 3

Adding inline hyperlinks to external content that would open up another browser tab...

Specific instructions and requirements for reporting misuse of Company information and telecommunications systems and equipment are provided in the <strong><a href="http://yourcompany.com/documents/index.php/File:Misuse_Reporting_Standard.pdf" target="_blank">Misuse Reporting Standard.</a></strong>

The result would appear as a URL...

Specific instructions and requirements for reporting misuse of Company information and telecommunications systems and equipment are provided in the Misuse Reporting Standard.

Form Properties

Form-Properties.png

The Form Properties options control almost all operational aspects of the form. To modify form properties open the form in edit mode and select the Form Properties tab in the Form Toolbox. The Form Properties toolbox allows the form administrator/editor to change the form’s title, language, processing options, protection and limit, schedule, etc.

Clicking the Help icon FieldHelpIcon.png next to each option/property will display detailed information regarding the property.

Clicking the "show more options" link will expand the Form Properties tab options which are:

Submission Confirmation

SubmissionConfirmation.png

  • Show Text: This message will be displayed after your users have successfully submitted an entry. Additionally, you can enter HTML codes, Javascript codes or Template Variables to enhance these messages displayed to respondents after they submit a form.
  • Redirect to Website: After your users have successfully submitted an entry, you can redirect them to another website/URL of your choice. You may also insert Template Variables into the URL to pass form data.

Language

This option allows you can choose the language being used to display your form messages. Keep in mind that the language function is only to display the preformatted text in the selected language. You must type in your optional text using the appropriate characters which are associated with your computer's local language settings.

  • Arabic
  • Bulgarian
  • Chinese (Traditional)
  • Chinese (Simplified)
  • Danish
  • Dutch
  • English
  • Estonian
  • Finnish
  • French
  • German
  • Greek
  • Hungarian
  • Indonesia
  • Italian
  • Japanese
  • Norwegian
  • Polish
  • Portuguese
  • Romanian
  • Russian
  • Slovak
  • Spanish
  • Swedish

Label Alignment

This option allows you to set the field label placement which currently is:

  • Top Aligned
  • Left Aligned
  • Right Aligned

Processing Options

ProcessingOptions.png

This option allows you to set post processing options which currently are:

  • Allow Clients to Save and Resume Later: Checking this will display additional link at the bottom of your form which would allow your clients to save their progress and resume later. This option only available if your form has at least two pages (has one or more Page Break field).
  • Show Review Page Before Submitting: If enabled, your clients will be prompted to a preview page that lets them double check their entries before submitting the form.

Review Page Options

ReviewPageOptions.png

This option allows you to set a few form submission options to enhance the user experience. Currently, these options are:

  • Review Page Title: Enter the title to be displayed on the review page.
  • Review Page Description: Enter some brief description to be displayed on the review page.
  • Use Text Button: This is the default and recommended option. All buttons on review page will use simple text.
  • Use Image Button: Select this option if you prefer to use your own submit/back image buttons. Make sure to enter the full URL address to your image.
  • Submit Button: The exact text to display on a Submit Button should be updated with this option. The default is Submit.
  • Back Button: The exact text to display on a Back Button should be updated with this option. The default is Previous.

Protection & Limit

ProtectionLimits.png

This option allows you to set form protection, processing protections and abuse limit options which currently are:

  • Turn On Password Protection: If enabled, all users accessing the public form will then be required to type in the password to access the form. Your form is password protected.
  • Turn On Spam Protection (CAPTCHA): If enabled, an image with random words will be generated and users will be required to enter the correct words to be able submitting your form. This is useful to prevent abuse from bots or automated programs usually written to generate spam. You can select the difficulty level of the spam protection which include:
  1. reCAPTCHA: Display an image with distorted words. An audio also included. This is the most secure but also the hardest to read. Some people might find this annoying.
  2. Simple Image: Display an image with a clear and sharp words. Most people will find this easy to read.
  3. Simple Text: Display a text (not an image) which contain simple question to solve.
  • Limit One Entry Per IP: Use this to prevent clients from filling out your form more than once. This is done by comparing client's IP Address.
  • Limit Submission: The form will be turned off after reaching the number of entries defined here.

Form Availability

FormAvailability.png

This option allows you to set availability options which currently are:

Enable Form Availability: If you would like to schedule your form to become active at certain period of time only, enable this option. The optional parameters are:

  • Only Accept Submission From Date: This is the date and time you want to open availability to users of the form.
  • Until Date: This is the date and time you want to close availability to users of the form.

Policy Machine Options

PolicyMachineOptions.png

This option allows you to set automated document creation and processing options which currently are:

  • Upload Templates: Use this upload function to attach template documents to your form for automated document creation. You will have the ability to attach as many documents as needed and manage them after your form is in production without deleting data. Managing template documents does not require re-saving a form.
  • Enable Policy Machine: If you want to enable this option, you must first upload your template documents.

Advanced Options

AdvancedOptions.png

This option allows you to set form access restriction options which currently are:

  • Load Custom Javascript File: You can register your own custom javascript file to run inline with the form. Your script will be loaded each time the form is being displayed.
  • Private Form: Select this option to prevent subscribers or User Portal from viewing and subscribing to administrative forms.
  • Primary Form Entity Owner: This option allows you to assign a specific form to a specific ITAM Administrator Entity responsible for the submitted information.
  • Secondary Entity Owner: This option allows you to assign a specific form to be used by a single entity, multiple entities or everyone. The default option does not permit access at all.