How to Create a Custom Form Layout
The
Layout section of your BizForm will allow you to create a custom layout rather than using the pre-defined Form Builder. This will also present you with the ability to further customize the form by making changes to the fields positioning and appearance. You will be able to utilize HTML coding via the WYSIWYG editor to populate the form with all the available fields you have 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.
Note: This is the default setting
- 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.
Note: In order to utilize the Custom Form Layout, you must have Fields already created. Visit the How to Create Fields page to learn more.
Creating A Custom Form Layout
- In order to create a custom layout for your form you must follow these steps:
- Select the 'Use Custom Form Layout' option as the Layout Type.
- (Optional) Click on the Generate Default Layout button located at the top of the Layout section to auto-add all the Fields to your Layout.
Note: This button automatically generates a table with all the fields you created in addition to adding codes for the label, input and field validations.
To add Fields manually to the Layout, use the Insert Field option:
- Place your cursor in empty area within the Content Editor
- Select one of the following options from the Layout Element drop down field:
- Label - Choosing this element will insert the code for the field in the content editor so that the Field Caption will appear on the form
- Input - Choosing this element will insert the input area for the Field where users can enter in their information on the form
- Validation - Choosing this element will verify that the information typed in the input area is in the correct format based on the Field Properties
- Submit Button - Chosing this element will insert the Submit button. In the event you wish the Submit button to be positioned somewhere else on the form other than the buttom, this element will allow you to do so. Otherwise the Submit button is added to the form by default.
- Select for which Field the element should apply to by using the For Field drop down list.
- Click on Insert to add the field code to the Content Area.
Ex. In the above screenshot, where the Generate Default Layout button was used;
- $$label:emailinput_1$$ labels the Field populating Field Caption
- $$input:emailinput_1$$ inserts the actual input area where information is typed,
- $$validation:emailinput_1$$ is used to verify that the information is typed in the correct format and/or is required
Note: This option must be set within the Field Properties, or set by default for Fields such as email, date, etc.).
- The characters 'emailinput_1' represent the field and as such remains constant.
This is what the form looks like utilizing all three elements in the screenshot; emailinput_1, TextAreaControl, and countrySelector:
