Form Builder Layout Components

Layout components are used to change the general layout of forms

Click here for info on the form builder field components

HTML Element

An HTML Element component may be added to a form to display a single HTML Element. This is useful if you wish to quickly insert and configure some HTML in your form. All unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, and <style>, and attributes like onmouseover or onload.

If you wish to insert more complicated HTML in your form, see the Content component



HTML Element settings

HTML Tag: The name of the HTML tag to display.

CSS Class: The CSS class to add to the HTML Element. You may specify multiple classes by separating them with single spaces.

Attributes: Attributes and their values to add to the HTML Element. This is commonly used to add href attributes to <a> tags, or src attributes to <img> tags.

Content: The text content of the HTML Element. While adding more child HTML tags here will properly display them, it is recommended you use the Content component to easily write and preview more complex HTML.

Refresh on Change: Makes the HTML Element re-renders whenever any value in the form changes. It might be useful when you want the HTML Element to display dynamic data of the other components after they are filled in with values during the form filling. Simply enter`{{ data.{componentApiKey} }}` into the HTML Element and enable this setting.

Content

A Content component may be added to a form to provide non-field information. For example, if you need instructions at the top of a form that are for display only, use the Content component. The Content component value is not submitted back to the server.

A WYSIWYG editor has been provided to help with formatting the content. If you use the HTML view of the editor, note that all unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, and <style>, and attributes like onmouseover or onload.



Content component settings

Refresh on Change: Makes the Content component re-renders whenever any value in the form changes. It might be useful when you want the Content component to display dynamic data of the other components after they are filled in with values during the form filling. Simply enter`{{ data.{componentApiKey} }}` into the Content component and enable this setting.

Columns

This component can be used for grouping other components, like Text Field, Text Area, Checkbox etc., into configurable columns. It might be useful if you want to display more than one component in one line.



Columns component settings

Column Properties: Here you can configure a number of columns that will be displayed in a form and specify the size, width, offset, push and pull settings for each column. When configured, you can easily rearrange the columns using the drag & drop feature without a need to make everything from scratch.

Auto Adjust Columns: If all the nested components inside one of the columns are hidden, all the other columns position will be adjusted.

Field Set

A Field Set can be used to create a title of an area of the form. This is useful to put inside Layout components or in between lots of related components. The Field Set is for display only and will not be saved to the API.



Field Set component settings

Legend: A Field Set Legend that will appear for the component in the form.

Panel

A Panel is used to wrap groups of fields with a title and styling. This currently maps to Bootstrap Card - Header and Footer.



Panel component settings

Title: A Panel Title that will be displayed at the top of the Panel.Theme: The theming of the Panel. Select one of the options to have the class added to the wrapper div.Collapsible: Turn the Panel into a collapsible Panel. It might be useful if you want to improve usability of the form that has a big number of components, allowing users to hide the fields they don't want to see while they are filling one or another section of the form.Initially Collapsed: The Panel will be collapsed on form load. Applied only when the Collapsible setting is enabled.

Table

A Table component allows creating a Table with columns and rows that allow adding additional components within it.



Table component settings

Number of Rows: Number of rows that will display in the Table.

Number of Columns: Number of columns that will display in the Table.

Clone Row Components: Clones the components that are in a cell of one of the columns to all the other cells of that column. Might be useful if you want to add a lot of Table rows that will have the same content.

Cell Alignment: Horizontal alignment for cells of the Table. Can be Left, Center and Right.

Striped: Adds striped shading to the Table rows.

Bordered: Adds visible borders for the Table.

Hover: Highlights a row on a mouse hover.

Condensed: Condenses the size of the Table, making it takes less space.

Tabs

This component allows creating tabs for grouping different sets of components. To switch between tabs, there is a navigation bar with tab buttons, each of which opens an appropriate tab with a set group of components. Only one tab at a time displays in a rendered form. This currently maps to Bootstrap Navs



Tabs component settings

Tabs: A data grid that allows adding, configuring, reordering and removing tabs.

Vertical Layout: Makes the navigation bar display in vertical orientation instead of horizontal, configured by default.

Well

Wells are wrapped in a div with a class. These currently map to Bootstrap Cards.



Well component settings

Updated on: 29/09/2021