e3 Help > Content Management > Biz Forms
Biz Forms

BizForms are a versatile and configurable contact form builder. BizForms are quick and easy means of transmitting user data to the club. The member’s club can define what information is required of the user by naming the fields in a BizForm. User data is then transmitted to the club and a notification email is sent to the club’s staff member who is responsible for receiving and processing the user data.

Over the years, our BizForms have been used in many ways both standard and creative; contact forms, membership sign-up/inquiry, electoral ballots, maintenance requests, client feedbacks, summer camp signups, reading club sign-ups, event inquiries, and much more!

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.

Accessing the BizForm section

To access the BizForms section of the website, log into Club Central and navigate to the Application menu by clicking the Globe at the top left corner or pressing F2 on your keyboard. Next, navigate to CONTENT MANAGEMENT BIZFORMS. This page displays all the existing BizForms on the website, including the forms display name, amount of entries submitted, as well as the ability to create, edit, delete, backup, restore, and export the form.

  •  Click on the Green Pencil Icon to access the editing section of the form. This section containts its own menu to edit various aspects of the BizForm
  •  Click on Red Trash Can icon to delete the BizForm
  •  Click on the Three Dots Icon to see additional options relating to the BizForm
     
    • Clone: Allows a user to make an identical copy of the form
    • Destroy: Completely deletes all aspects relating to the form
    • Export: Exports the form in .zip format which becomes available for download
    • Backup: Backups the object related aspects of the BizForm
    • Restore: Restores an exported BizForm

Creating A New BizForm

To create a new BizForm navigate to the BizForm section in Club Central and click the NEW FORM button.



In the new redirected page, enter a name for your BizForm in the FORM DISPLAY NAME field and click SAVE. Upon completion the page is redirected to the FORM BUILDER section of the newly created BizForm.

Navigating the BizForm Section and Menu

The BizForm menu contains various sections that allow users to modify the settings, look, content, and behavior of the BizForm. It also allows a user to view all the previously submitted entries, as well as submit new ones. The menu items of the BizForm are as follows:



 

Recorded Data

  • This BizForm menu section displays all the entries that were submitted using this form in table format. 
  • A user can submit an entry for this form using the NEW RECORD button located at the top left. 
  • The entries can be filtered by clicking the Display Name for a specific field
  • Each entry can be modified by clicking the following icons:
    • Green Pencil Icon to edit the entry
    • Red Trash Can to delete the entry
    • Three Dots to Clone the entry
  • The data entries can be exported to various formats, including Excel, CSV, and XML by clicking the ACTION column title located at the top left of the data table, and clicking the desired format.

General​

  • Form Display Name: View or edit the display name given to the BizForm
  • Form settings
    • Display Text: Post a message to the user (ie. “Thank You”) once they have submitted their form.
    • Redirect to URL: This allows your BizForm to direct users to a particular page on your website once the form has been submitted, such as a ‘Thank You’ page, a page advertising events at the club, or the website homepage. Once a page has been chosen to re-direct users, select the page and select the ‘Properties > General’ tab – you should see a link to this page on the General tab. Copy the link and paste it into the Redirect URL field within your BizForm.
    • Clear Form: Clear the results in the form and allow the user to submit another form.
    • Continue Editing: Does not redirect, display text, nor clears the form. Allows user to continue editing the form as it is.
  • Submit button Text: Modified the text that appears inside the Submit button.
  • Submit button image: allows the ability to replace the entire Submit button with an image of your choice. Simply insert a URL of your new Submit button.
By default, “Submit” will be the label on the submit button if custom text or image is not selected via the 'Submit button text/image field'.

Click SAVE at the top left when you are finished with the General menu section to save your settings.
 

Form Builder

The Form Builder allows the user to create BizForms quickly and easily by utilizing a simple drag and drop mechanism. It includes three main parts; COMPONENTS on the left, the FORM BUILDER in the middle, and the PROPERTIES on the right. 
  • Components: A list of Field Types that are available to be added. The main elements that construct the form.
  • Form Builder: The section where the Field Types (components) are dragged into to creat the form. Also where they are visually organized and previewed.
  • Properties: Additional fields that modify and configure the settings of each field, including names, requirement, descriptions, choices, etc.
To add a Field Type component to the BizForm, simply select & hold it from the left hand side COMPONENTS list and drag it to the right side of the page. Towards START BY DRAGGING A COMPONONET HERE.


 
NOTE: Changes are saved automatically. When new fields are dragged and dropped into the Form Builder or the properties of a specific field are modified, changes take effect almost immediately. There is no save button to apply changes within the Form Builder.

There are various Field Type components that can be drag and dropped to build the Form. To see a detailed description for each Field Type, simply hover over each item until a small text box appears. Below are the names of each Field Type and their associated description:
  • 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.
Once an added component is selected within the Form Builder, a new PROPERTIES section will appear on the right hand side. In this section the common properties associated with the field can be modified



The most common properties within fields include:
  • Label: the caption displayed before the field on your form, for example “First Name”.
  • Required (checkbox):checkmark 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. Used to give a user more details about a specific field.
  • Tooltip: text shown when the "?" icon near the field is hovered over 

NOTE: Each field may have different properties, depending on the function it plays within the form. For example, a drop down list will include additional fields within the properties to configure how many options will exist within the drop down list and their associated names.

E-mail Notifications

The E-mail Notifications section allows a notification to be sent out whenever a BizForm has been submitted. To activate this function, checkmark the 'SEND FORM DATA TO  E-MAIL' checkbox, which will allow the following fields to be populated:
  • From e-mail: The email address used within the notification email as the sender.
  • To e-mail: The email address used within the notification email as the receiver. ‘From’ and ‘To’ emails should be different addresses to ensure the email isnt caught in spam filters or a junk email box.
  • Subject: Enter the subject line that you would like to appear when the administrator receives the email.

You can personalize the subject line with field information captured within the form, such as the name of the person who submitted the form:

Subject: Membership Inquiry from {%fullname%}

The attribute/field name when used within two percent-signs and two parentheses as shown above, will auto populate the field value used within that form submission. Make sure to use a field that is required so that all notification emails include data as opposed to an empty field.

Example

If you enter the Display text value like this:

Membership Inquiry from {%fullname%} -- (where 'fullname' is the Field Name)

It will be displayed like the following when “Jane Smith” was entered in the fullname field by the user:

Subject: Membership Inquiry from Jane Smith
 
NOTE: The value inside the two parenthese must match the Field Name of the appropriate field. To find and/or change the field name for a specific field, navigate to the Fields BizForm menu and select the appropriate field on the left (Field Selector). The first property under General is the Field Name.

Autoresponder

The Autoresponder section allows a notification to be sent to the user upon submission. As long as the form is capturing (and validating) an email address from the user submitting, the Autoresponder can be used to confirm with the user that their form has been submitted, thank them for submitting the form, and even present the submitted data back to the user.

Several fields need to be filled out for a successful autoresponder set up:
  • Confirmation e-mail source field: Select the attribute/field name used to capture the user’s email address.
  • From e-mail The address: The email address used within the Autoresponder email as the sender. You can use the same ‘From e-mail’ address used within the ‘Notification Email’ tab.
  • Subject: The subject line that appears when the user eceives the email. The subject line can be personalized by utilizing field information captured within the form, such as the name of the person who submitted the form:
Use the WYSIWYG editor to format the message. 


 

Fields

The Fields section is where advanced configurations to each field can be modified. Unlike the Form Builder, where the basic text and/or components associated with each field can be set, the Fields section allows the modification of advanced properties associated with this field. Some examples may include, changing the identifying name of the field, changing the default size of the default, and setting CSS styles for specific fields.

This Fields section is divided into two major components. The Field Selector and the Field Properties.
  • Field Selector (on the left): A list of the existing fields within your form listed by order of appearance and labeled as their Fieldname
  • Field Properties (on the right): Displays the advanced properties associated with a specific chosen field.
Thus, to view the advanced properties of each field find and click the field within the Field Selector. The associated properties will appear on the right.



 
NOTE: The names that appear within the Field Selector are taken from the Field Name located in the properties (first property field). They are generated by default. It is advisable to rename/assign more appropriate names for the fields to help ensure easier recognition of the fields when using them in various stages of BizForm configuration/modification.

The fields within the Field Selector can be either black or gray. Black fields are active and are therefore visible within the form, while gray fields are inactive and are NOT visible in the form. In other words, the gray fields are 'hidden'. This function can be toggled on and off by checkmarking or unchecking the SHOW ON PUBLIC FORM checkbox under the Field Appearance category within a field's properties.

Layout

The Layout section presents the ability to further customize the form, making changes to the fields positioning and appearance. By default, the fields will be arranged as they appear within the Form Builder (as long as they are marked to be visible). Within the Layout section, it is possible to use HTML and the WYSIWYG editor to populate the fields one by one using field tags, add additional rows or columns to the table, modify the font, size and color, as well as add images and hyperlinks to customize the form.

There are two options within this section. Both are found under General > Layout type:

  • Use automatically generated form layout: This option automatically generates a form layout as can be seen within the Form Builder (used to de-activate custom layout)
  • Use custom form layout: Activates the custom form layout function. When selected, two new items will appear; a new category called Insert Field as well as a WYSIWYG editor will appear at the bottom. This elements will assist in structuring the custom form layout.

Creating A Custom Form Layout

NOTE: Fields must already exist within the form in order for the custom Layout section to be used properly. Otherwise, if no fields were created, then there is nothing to arrange

To create a custom layout for your form, select the USE CUSTOM FORM LAYOUT in the Layout section of the BizForm menu. Once this option is selected, a new category called Insert field will appear, as well as a WYSIWYG editor at the bottom. To begin, click on the GENERATE DEFAULT LAYOUT button located at the top of the Layout section:



This button automatically generates a table with all the fields you created in addition to adding codes for the label, input and field validations. These elements can be added manually as well using the Insert Field generator. To insert the field codes manually, select an empty area within the WYISWYG content editor, and then select one of the following options from the LAYOUT ELEMENT  drop down field:
  • Label: this will insert the code for the field in the content editor so that the Label will appear on the form
  • Input: this will insert the input box so that on the form users can type in their information
  • Validation: label this will verify that the information typed in the box is in the correct format
  • Submit Button: by default the Submit button will automatically be generated and placed at the bottom of the form. In the event you prefer it to be positioned somewhere else on the form that is the only time that you would use this button.
Next, select for which field the element should apply by using the FOR FIELD drop down field, and click INSERT to input the field code into the editor section. A code will be generated using the selected element and field.

For example, in the above screenshot where GENERATE DEFAULT LAYOUT button was used;
  • $$label:emailinput_1$$ labels the field populating 'Field Caption' (the text that will appear next to the field box as found in properties), In this case, it is "E-mail"
  • $$input:emailinput_1$$ inserts the actual input box where information is typed,
  • and $$validation:emailinput_1$$ is used to verify that the information is typed in the correct format and/or is required (if this option is set within properties, or set by default for fields such as email, date, etc.).
  • The characters 'emailinput_1' represent the field (as given in Field Name within properties) and as such remains constant.


This is what the form looks like utilizing all three elements in the screenshot; emailinput_1, TextAreaControl, and countrySelector:

Adding A Security (CAPTCHA) Field to A BizForm

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart.

It is advisable to add a security CAPTCHA field to all your BizForms especially when the form is accessible to the general public. This helps to prevent malicious bots from spamming advertisements to your form resulting in unwanted enteries and disorganization.

To add a security field, navigate to the Form Builder BizForm menu and drag the SECURITY CODE compononent to your form. Make sure to label this form as a Required item. This will add the default field with a small image containing numbers and a text field. The user filling out the form will have to enter the correct information located in the image into the field before submitting the form.



If desired, the CAPTCHA image can be made larger for greater visiblity. To do so, navigate to Fields BizForm Menu, find and select the desired 'security code' field, and change the FORM CONTROL  option to Simple CAPTCHA under Field apperance category.



Next, under Editing control settings category (right below), adjust the width and height for the CAPTCHA image. It is best to keep the ratio of the original Width and Height for the image to show up properly. Hence, you can double the size of each value to keep the ratio the same.

Original Width: 80
Original Height 20

New Width: 160 
New Height:  40

Finally, click SAVE at the top to finalize the changes.

Inserting A BizForm into A Page on The Website

A BizForm can be inserted into a page on the website by utilizing the corresponding icon in the WYISWYG (WhatYouSeeIsWhatYouGet) editor when editing a page. To do so, navigate to Club Central:
  • Applications (globe at the top left corner)
  • Content Management > Pages
  • Select the desired page to edit from the Content Tree, and then select the editable text box/section of the page whereby the BizForm will be displayed
  • Locate and click on the Insert Form Icon in the WYSIWYG Editor
  • In the new Pop-up window (Widget Properties On-line form) click on SELECT under Form Settings. This allows the selection of Existing BizForms.
  • Select the desired BizForm from the List by clicking on it. The Form name will populate with the appropriate BizForm.
  • Click SAVE & CLOSE to insert the BizForm into the page.
  • PUBLISH the page to finalize the changes for the world to see!
When a BizForm is successfully inserted, it will appear as a small gear icon within the editing portion:

Navigating to the appropriate page on the Live Site will reveal the actual BizForm.








 

Was this documentation helpful?

Current rating: 5 (1 ratings)