Forms - Using the Form Builder

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 focus on this page is how to use the Form Builder section to create a BizForm. To create the form using Fields, see Forms - How to Create Fields 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 Form Builder from the left navigation.

The Form Builder section is setup in three main parts: Components on the left, the Form Content Area in the middle, and the Properties/Validation on the right. 

Components 

The Components section of the Form Builder are composed of all the available field types that can be added to a Bizform.

The list of available field types are as follows:

• E-mail - Provides a field for entering one or multiple e-mails separated by a definable separator.
• U.S phone number - Provides fields for entering a phone number in U.S. format.
• U.S. ZIP code - Provides a field for entering a ZIP code.
• Country selector - Provides a drop-down list with country names as values.
• Security code - Provides a simple image CAPTCHA, which requires retyping digits into a provided field, with no available options.
• Rich text editor - Provides a field of adjustable size for entering text with HTML tags.
• Drop-down list - Enables entering a list of values for the user to choose from.
• List box - Enables entering a list of values for the user to choose from (similar to drop down list, but the values are displayed all the time). Offers an option for allowing multiple selection.
• Calendar - Provides a calendar date and time picker and a 'Now' button, which allows users to choose the current date and time.
• Check box - Provides a Boolean (only 2 choice data type in a form of a single checkbox that can be checked (true) or unchecked (false).
• Text area - Provides a field of adjustable size for entering text.
• Text box - Provides a sing-line field for entering text.
• Upload file - Provides an uploader of one or more files from the file system. Can be used in online forms and Page types.
• Multiple choice - Allows specifying multiple selectable values in the form of checkboxes, which can be arranged vertically or horizontally.
• Radio buttons - Allows specifying multiple values in the form of selectable buttons, which can be arranged vertically or horizontally. Only one value can be selected a time.

It is advisable to add a security CAPTCHA field to all BizForms that is accessible to the general public. Where CAPTCHA translates to Completely Automated Public Turing test to tell Computers and Humans Apart. This can be done by adding the security code field type. For details, see Adding Security to a Form under Related Articles in the right navigation.

Form Content Area in the Middle

The Form Content Area in the middle column of the Form Builder, is where all the Components will be compiled to create the BizForm. The Components can be arranged in this area to represent how the form will appear on the club's website.

In the Form Content Area, there is a reminder that collecting sensitive information using the BizForm is strictly prohibited. 

ATTENTION: Collecting sensitive information by way of BizForms is strictly prohibited. If found, the forms and corresponding data will be deleted immediately without warning.
Sensitive information includes, but is not limited to: Credit Card Information, Social Security Numbers, Social Insurance Numbers and Driver License Numbers.
 

To add a Component to the BizForm

1. Form the Components section on the left, select a field type, drag and top it into the Form Content Area labeled "Start by dragging a component here".
2. On the right, Properties for the field selected will display. Configure the Properties for the field accordingly. For more details see the Properties section below.
3. Drag additional Components into the Form Content Area and configure the Properties accordingly.

To remove a Component from the BizForm

1. Select or hover over the field in the Form Content Area.
2. Click the red trash can icon (Remove component).
3. At the top a confirm remove message will display.
4. Click Ok to remove the component.
   • Once the component is removed it can be restored by going to the Field section.

To restore a field removed in error

1. Click the ... icon (3 dots) to the left of Components. 
2. The BizForms left navigation will be revealed.
3. Select Fields from the left navigation.
4. Select the field from the box on the left - This lists any fields that were created from Fields or the Form builder section.
5. Display field in the editing form: Select the checkbox.
6. Click Save - The field will be added back into the Form builder section.

To rearrange order the field types are displayed

1. Select the field in the Form Content Area.
2. Drag and drop the field to the new position for it to be displayed on the form.

Edit Submit button

The Submit button will appear automatically after the first component is added to the Form Content Area.

To change the text on the Submit button

1. Click the ... icon (3 dots) to the left of Components. 
2. The BizForms left navigation will be revealed.
3. Select General from the left navigation.
4. Submit button text: Enter text to be displayed on the button.

More information on other items that can be edited in the General section can be found in Forms - General Settings under Related Articles in the right navigation.

Component Properties/Validation

Each component will have properties/validation that can be customized on how it will be displayed and how it will behave within the form.

To access Component Properties

1. Select the field in the Form Content Area.
2. On the right, Properties for the field selected will be selected by default 
3. Properties to be configured
   • Label: The caption displayed before the field on the form, for example “First Name”.
   • Required: (checkbox) - select this box if the field must be filled in order to submit the form.
   • Default Value: The default value which will show inside the field.
   • Explanation Text: Text that will be displayed under the field on the form. Use this to give a user more details about a specific field.
   • Tooltip: Text shown when the user hovers over the field
   • Options: This will only display for field types that have options for users to select (Drop-down list, List box, Multiple Choice and Radio buttons)
     • Type in text that users can select as answers
     • Example: Replace Option 1, 2 and 3 respectively with Entree Choices: Chicken, Steak and Vegetarian.

Validation 

Validation can be used to ensure the information entered is valid before it is submitted.

To access Component Validation

1. Select the field in the Form Content Area.
2. On the right, select Validation button at the top. 
3. Click Add validation rule button
4. 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').
5. Error Message: Type in a message to display on screen when the validation fails.
6. Click Apply.
7. Repeat process, if more than one rule should be applied to the same field type.
8. To Edit a rule - Click the Rule to make edits. 
9. To Delete a rule - Hover over rule and then select the red trash can icon (Remove Rule).

Other items to setup before adding the form to a page on the website.

• Fields - (Optional) Additional Properties for a field type can be modified, this includes Form Controls, CSS Styles, Visibility Conditions etc. 
  • For details, see Forms - How to Create Fields under Related Articles in the right navigation.
• Layout - The layout could be displayed as it appears in the Form Content Area or it could be customized by going to the Layout section.
  • For details, see How to Create a Custom Form Layout under Related Articles in the right navigation.
• Form Notifications - This is where notifications can be set up to automatically send to users an email after they submit a form (Autoresponder) or to staff (E-mail notification) when a form has been submitted.
  • For details, see Configuring Form Notifications under Related Articles in the right navigation.
• General - Set up text for the submit button, does all the fields get cleared when the form is submitted, what do members see on screen after they submit the form.
  • For details, see Forms - General Settings under Related Articles in the right navigation.
• Where users will access the form - When everything for the form has been set up. Decide which page the form should be accessed from on the club's website.
  • For details, see Inserting a Form on a Page under Related Articles in the right navigation.