How to Create a Custom Form Layout

The Layout section of a BizForm can be used to create a custom layout rather than using the pre-defined Form Builder. Customization options include making changes to the fields positioning and appearance. HTML code via the What You See Is What You Get (WYSIWYG) Content Editor could be used to populate the form with all the available fields created.

There are two Layout types to choose from when creating a Custom Layout.

• Automatically Generated Form Layout - This option will automatically generate a form layout based on the setup used Form Builder.
  • This is the default setting.
  • All the fields will be listed one after another in one column. 
• Custom Form Layout - Choosing this option 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. These elements will assist in structuring the custom form layout.

Creating A Custom Form Layout

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.
5. Select Layout from the left navigation.
6. Layout type: Select Use Custom Form Layout. HTML will be selected.
7. (Optional) Click on the Generate Default Layout button located at the top. This will auto-add all the Fields (set to display in the form) into the content editor below, to be part of the layout. After it's generated, fields can be moved, additional text, images or link could be added to the form.
   • A table will be added into the content editor automatically. Each field will be inserted using code in a single row with 3 columns (label, input and validation). 

^Ex. In the image below, the form created only had three fields, when the Generate Default Layout button was used it added all the fields. Here's an explanation of the code added automatically for the Email field.

• $$label:emailinput$$ labels the Field populating Field Caption 
• $$input:emailinput$$ inserts the actual input area where information is typed,
• $$validation:emailinput$$ is used to verify that the information is typed in the correct format and/or is required. 
  • The validation option must be set within the Field Properties, or set by default for Fields such as email, date, etc.).

The Generate default layout and the Automatically generated form layout would be identical if additional changes aren't made in the content editor. Make changes using the Content Editor to customize the layout. Below the last name label was manually typed as Surname instead of using the code and color was changed for the emailinput label.

The layout of the form, could be viewed by adding it to a page on the ClubHouse Online website, using the CHO Online Form widget. See Inserting a Form on a page for details. 

Instead of having one data field on each row, the fields can be formatted in any order or even in two or three columns. For example, the first name field on the left and last name field on the right.

To add Fields manually to the Layout, use the Insert Field option:

1. Place cursor in empty area within the Content Editor.
2. 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 Field Caption will appear on the form.
   • Input - This will insert the input area for the Field where users can enter in their information on the form.
   • Validation - This will verify that the information typed in the input area is in the correct format based on the Field Properties.
   • Submit Button - This will insert the Submit button somewhere else on the form, instead of it being positioned on the bottom. Otherwise the Submit button is added to the form by default.
3. Select for which Field the element should apply to by using the For Field drop-down list.
4. Click Insert button to add the field code to the Content Area. 
5. Repeat the process to add all the elements.
6. Remember to click Save at the top.

In the example below, from the content editor tool bar a table was inserted to be used to format how the fields will display on the form. Then the Layout element (Label, Input or Validation) was inserted into the content editor. The last field inserted was the Label for U.S. Phone number, see the code $$label:usphone$$ inserted into the table.

This is what the form will look like on the live site. The layout of the form, could be viewed by adding it to a page on the ClubHouse Online website, using the CHO Online Form widget. See Inserting a Form on a page for details.