Forms - How to Create Fields

There are two ways to build the form, Form Builder and Fields. It is flexible to switch between either method at any time to make modifications and the fields will still be saved between both methods.

1. Form Builder is the easier method, simply click and drag the components to build the form.
2. Fields is more for Advanced users that are familiar with building forms and would like to build more complex or customized forms. 

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 a few Properties were configurable for each Component, the Fields section allows control to more properties for each type of field added. Additional Properties include selecting a Field Type, Form Controls, CSS Styles, Visibility Conditions etc. 

The focus on this page is how to use the Fields section to create a BizForm. To create the form using the Form Builder, see Forms - Using the Form Builder under Related Articles in the right navigation.

To access an existing BizForm

1. Log in to the club's ClubHouse Online website with an Administrator user account and access Club Central.
2. From within Club Central, click Planet icon (Open Application List) at the top left.
3. Select Content Management > BizForms from the Applications list. 
4. Select the pencil icon (Edit) beside the Form name to be edited.
5. Select Fields from the left navigation.

The Fields section is divided into two major components, the Field Selector and the Field Properties.

Field Selector

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

This box will display more rows, as new fields and categories get added, either from this Fields section or using the Form Builder. 

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 the BizForm. The grayed out fields are inactive and therefore not visible on the BizForm.

To add a new field

1. From within the Fields section, click on the New Field button.
2. Field Type section:
   • Field Type: Select Standard field
3. General section:
   • ​Field Name: Enter in the Name or unique identifier of the field. No spaces in the name but underscore "_" could be used. This is not visible to the users. 
   • Field type: Select the data type to be used for this field from the drop-down list.
   • Field Size: (Optional) Could be used to control the maximum number of characters that can be entered into the field.
   • Required: Select the checkbox if the field is meant to be a mandatory field.
4. Field appearance section:
   • Field Caption: Enter text that will appear next to the field in the form. Usually the text entered in the General - Field Name would be entered here, but this time spaces are allowed. In the Form Builder, this is the Label information that would have been entered for users to see.
5. Click on the Save button to create new field.

Each field will have additional field properties that are optional to modify. For more details scroll down to the Field Properties section below.

Moving Fields

The order in which fields appear in the Field Selector can be changed using the move arrows.

To change the position of a field, follow these steps:

1. In the Field Selector box, select the Field from the list.
2. Use the Move up or Move down arrow buttons found above the field selector box.
3. The field selected would move up or down in the list.

Deleting Fields

When a field is added in error and no longer required to be part of the form. A field can be deleted.

To delete a field, follow these steps:

1. In the Field Selector box, select the Field from the list.
2. General - Required box: Deselect the checkbox
3. Click Save.
4. Click on the red trash can icon (Delete item).

Categories

Categories allow multiple fields to be grouped together and they 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. This is not required for all forms created, it is recommended when creating large forms, to make it easier for users to fill out information. 

Creating a Category

1. Click on the ^... icon (3 dots ellipses) next to the New Field button and select New Category.
2. Category Caption: Enter in the name of the Category 
3. (Optional) Collapsible: Select the checkbox if this Category should be collapsible within the form.
   • Collapsed by default: Select the checkbox if the category should be collapsed when users access the form. 
4. Visible: Select the checkbox if the Category and the subsequent fields should be visible within the form.
5. Click on the Save button to save the creation of the Category.

Moving Categories

The order in which a Category appears in the Field Selector can be controlled using the move arrows.

To change the position of a category, follow these steps:

1. In the Field Selector box, select the category from the list. Categories can easily be found, because they have a blue background. 
2. Use the Move up or Move down arrow buttons found above the field selector box.
3. The category selected would move up or down in the list.

Deleting Categories

When a category is added in error and no longer required to be part of the form. A category can be deleted.

To delete a category, follow these steps:

1. In the Field Selector box, select the category from the list. Categories can easily be found, because they have a blue background. 
2. Click on the red trash can icon (Delete item).

Field Properties

The Field Properties are divided into the following sections: General, Field appearance, Validation, CSS styles, HTML Envelope and Field advanced settings. 
At the very least, fields found in the General and Field appearance sections should be configured for each field before it is made available on the BizForm. The additional sections are optional to modify.

General

• ​Field Name: Enter in the Name or unique identifier of the field. This is not visible to the users.
  • When a Text Box component was used to create a field from the Form Builder section, the field name would be TextBoxControl. It can be renamed here to match the Field Caption that will be visible to users. 
• Field type: Select the data type to be used for this field from the drop-down list.
• Field Size: Could be used to control the maximum number of characters that can be entered into the field.
  •  Only available if the Field Type selected is Text.  
• Required: Select the checkbox if the field is meant to be a mandatory field. If not checked the field will be optional.
• Default Value: Optional to have a pre-set value or text that will already be populated in the field as a response when users access the form.
• Translate - Not currently used in Bizforms (ignore)
• Display field in the editing form: Select the checkbox for the field to be visible on the form to users.

 

Field Appearance

• Field Caption: Enter text that will appear next to the field in the form. In the Form Builder this is the Label information that would have been entered.
• 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: Select the checkbox and 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. Option to switch between Advanced and Simplified mode. 

Validation

1. Validation Rules: Select a Rule from the drop-down list
   • E- mail - Checks whether the e-mail entered in the field is in standard e-mail format.
   • Date from - Checks whether the date entered in the field is later (greater) than or equal to the specified date.
   • Date to - Checks whether the date entered in the field is earlier (less) than or equal to the specified date.
   • Maximum length - Checks whether the text entered in the field is shorter than or equal to the specified number of characters.
   • Maximum value - Checks whether the number entered in the field is less than or equal to the specified number.
   • Minimum length - Checks whether the text entered in the field is longer than or equal to the specified number of characters.
   • Minimum value - Checks whether the number entered in the field is greater than or equal to the specified number.
   • Phone number (US) - Checks whether the number entered in the field is in a standard US phone number format.
   • U.S. ZIP code - Checks whether the number entered in the field is in a standard US ZIP code format ('12345').
2. Error Message: Type in a message to display on screen when the validation fails.
3. Click Apply.
4. Click Add validation rule button to add another validation rule to the same field type.
5. To Edit a rule - Click the Rule to make edits. 
6. To Delete a rule - Hover over rule and then select the red trash can icon (Remove Rule).

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 customization of 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 closing 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. Write any condition according to specific requirements the club wants to use. To create a condition that depends on the state of other fields, they can be accessed 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 entering 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.

• 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.
  • 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 for the behavior of this field to be dynamically updated according to the value of another field.