Forms - How to Create Fields

The Fields section of Bizforms is recommended for more 'Advanced Users' who are more familiar with the functionality of forms and are looking to create much more complex forms for their site. Unlike the Form Builder, where only few Properties were configurable for each Component, the Fields section allows you to control a much more diverse set of properties for each type of field added. Additional Properties include selecting a Field Type, Form Controls, CSS Styles, Visibility Conditions etc. 

This Fields section is divided into two major components which are the the Field Selector and the Field Properties.

Field Selector

The Field Selector is comprised of all the Fields and Categories that can potentially be displayed on your BizForm. 

Fields

The fields within the Field Selector will be listed in either solid black or grayed out font color. The fields listed in black are active fields and will be visible on your BizForm. The grayed out fields are inactive and therefore not visible on your BizForm.

Creating Fields

To add fields to your BizForm you will first need to create them in the Field Selector. In order to create a new field, you will need to enter in at least the General information to have it displayed on your BizForm. Follow these steps to create a new field:



 

  1. From within the Fields section of your Bizform, click on the New Field button within the Field Selector.
  2. Enter in the Name of the field within the Field Name section.
  3. Select a value from the drop-down list of Field Types
  4. Set the Field Size to control the maximum number of characters that can be entered into the field
  5. Check the Required checkbox if this is meant to be a mandatory field.
  6. Click on the Save button to complete the creation of the field.

Moving Fields

The order in which fields appear in the Field Selector can be controlled using the move arrows. In order to change the position of a Field you must follow these steps:

  1. Select the Field from the list withing the Field Selector.
  2. Move the item using the Move up or Move down arrow buttons.
Note: Moving Fields within the Field Selector, also changes their position within the form.


Deleting Fields

Fields can be deleted from the Field Selector by following these steps:

  1. Select the Field from the list within the Field Selector
  2. Click on the Delete button.
Note: The Field will be deleted without the option of recovery. Also please make sure that you un-check the required check box, if selected before deleting the field.
 

Categories

Categories will allow you to group multiple Fields together and will be displayed as sub-headings within the form. All the Fields that will be displayed within a Category will be listed directly below it within the Field Selector. Using Categories is recommended in large forms to make orientation easier for users. 

In order to create a Category, you will need to follow these steps:

  1. Within the Field Selector, click on the ... (ellipses) next to the New Field button and select New Category option.
  2. Enter in the name of the Category in the Category Caption field.
  3. (Optional) Check the box if this Category will be collapsible within the form.
    1. If you choose to make the Category collapsible, this option will dictate the default state of the category
  4. Check the box if the Category and the subsequent fields will visible within the form.
  5. Click on the Save button to save the creation of the Category.

Moving Categories

The order in which Categories appear in the Field Selector can be controlled using the move arrows. In order to change the position of a Category you must follow these steps:

  1. Select the Category from the list withing the Field Selector.
  2. Move the item using the Move up or Move down arrow buttons.
Note: Moving Categories within the Field Selector, also changes their position within the form.
 

Deleting Categories

Categories can be deleted from the Field Selector by following these steps:

  1. Select the Category from the list within the Field Selector.
  2. Click on the Delete button.
Note: The Category will be deleted without the option of recovery.
 

Field Properties

The Field Properties section must be configured for each field added in the Field Selector before the field can be made available for the Bizform itself. The properties are divided into the following sections:

General

  • Field Name - The name or unique identifier of the field
  • Field Type - The data type of the field 
  • Size  - The maximum amount of Characters that can be entered into the field
Note: Only available if the Field Type has a value of Text.
 
  • Required - If checked, the form can only be submitted if the field has a value specified. If not checked the field will be optional.
  • Default Value - If a pre-filled value will be specified for the field.
  • Translate - Not currently used in Bizforms (ignored)
  • Display Field in Editing Form - Indicates if the given field should be shown in the form to users.
Note: This can be disabled for fields that store values for internal use only.
 

Field Appearance

  • Field Caption - The text that will appear next to the field in the form.
  • Field Description - The Tool tip which will be displayed when a user hovers over the field.
  • Explanation Text - The text that will be displayed directly below the field in the form.
  • Form Control - Defines the type of interaction the user will have with the field in the form.
  • Show on Public Form - If checked, the field will be available for use on the form.

Editing Control Settings

The settings in this section provide a way to configure the parameters defined for the selected Form Control. The available options depend on the parameters defined for the given Form Control. Please see the tool tips of individual parameters for more information. You can switch between Advanced and Simplified mode. 

Note: In simplified mode, only a limited set of parameters is offered, typically the most important ones.
 

CSS Styles

  • Field CSS Class - The name of the CSS class applied to the field.
  • Caption CSS Class - The name of the CSS class used to style the Field Caption.
  • Caption Style - Used to set the CSS styles for the Field Caption.
  • Control CSS Class - The name of the CSS class used to style the field's Form Control.
  • Input Style - Used to set the CSS styles for the input entered in to the field by the user.

HTML Envelope

  • Content Before - HTML content placed before the form field. This HTML code will allow you to customize the form layout by adding elements around the field, such as <div> tags.
  • Content After - HTML content placed after the form field. This HTML code will allow you to close the elements surrounding the field that were added in the Content Before section.

Field Advanced Settings

  • Visibility Condition - This setting can be used to enter a macro condition that must be fulfilled in order for the field to be visible in the form. The condition is dynamically resolved when the form is loaded. You can write any condition according to your specific requirements. If you wish to create a condition that depends on the state of other fields, you can access them in the macro expression using the corresponding Field Name. The data of the fields can then be retrieved through the following properties:
    • Value - returns the current value of the field.
      • Ex. WatermarkText.Value is resolved into the value of the WatermarkText field.
    • Visible - returns a true value if the given field is currently visible in the field editor.
    • Enabled - true if the field is currently enabled, meaning, its value can be edited.
    • Info.<field setting> - may be used to access various settings configured for the field,
      • Ex. WatermarkText.Info.DefaultValue
  • Enabled Condition - This setting will allow you to enter a macro condition that determines when the field is enabled. If this condition is resolved as false, the field is visible, but its value cannot be edited.
Note: You can use the same macro options as described above for the Visibility condition field.
 
  • Display in Simple Mode - Indicates whether the parameter is visible when the Editing Control Settings section of the field properties is switched to the Simplified mode. 
Note: Only available for Form Control parameters.
 
  • Has Depending Fields - If this setting is enabled, the form will be refreshed for the user when ever the value of the given field is changed. This means that the other fields depending on this one can be dynamically updated according to the current value of this field.
  • Depends on Another Field - This setting will need to be enabled if you wish the behavior of this field will be dynamically updated according to the value of another field.