Understand and manage the Form Components
Adding a Form Component
To add a form component to a form, drag and drop the component from the left column into the desired location within the form.
Each new form starts with a submit button automatically added to it. This can be removed or edited as necessary.
Editing a Form Component
To edit a form component on a form, hover over the component and click the gear icon. You will then be presented with a settings form for the component.
Click the Edit (gear) button to edit a form component
The settings for a form component are different for each component type.
Below is a list of general settings that are offered for the majority of our components.
Label: The name or title for this component.
Hide Label: Hide the label of this component. This setting will display the label in the form builder, but hide the label when the form is rendered.
Label Position: Position for the label for this field.
Label Width: The width of label on line in percentages.
Label Margin: The width of label margin on line in percentages.
Placeholder: The placeholder text that will appear when this field is empty.
Description: The Description is text that will appear below the input field.
Tooltip: Adds a tooltip icon to the side of this field.
Error Label: The label that will display for the field when a validation error message is shown.
Input Mask: An input mask helps the user with input by ensuring a predefined format. For a phone number field, the input mask defaults to (999) 999-9999.
Allow Multiple masks: This setting will allow you to set multiple input masks for the field. The mask is selected by the user via a dropdown list and will dynamically switch the mask for the field when selected.
Prefix: The text to show before a field. An example is ‘$’ for money
Suffix: The text to show after a field. An example would be ‘lbs’ for weight.
Custom CSS Class: A custom CSS class to add to this component. You may add multiple class names separated by a space.
Tab Index: Sets the
tabindex attribute of this component to override the tab order of the form. See the MDN documentation on tabindex for more information on how it works.Multiple Values: If checked, multiple values can be added in this field. The values will appear as an array in the API and an “Add Another” button will be visible on the field allowing the creation of additional fields for this component.
Enable Spell Check: This setting will enable spell check on the field.
Protected: If checked, this field is for input only. When being queried by the API it will not appear in the properties.
Persistent: If checked, the field will be stored in the database. If you want a field to not save, uncheck this box. This is useful for fields like password validation that shouldn’t save.
Hidden: A hidden field is still a part of the form JSON, but is hidden when viewing the form is rendererd.
Initial Focus: Make this field the initially focused element on this form when renderered. Only one component on this form or wizard page can carry the Initial Focus setting.
Hide Input: Hide the input when viewing the form from the front end browser. This does not encrypt on the server. Do not use for passwords.
Disabled: Disable this field on the form.
Show Label in DataGrid: Show the label of this component when in a datagrid.
Table View: If checked, this value will show up in the table view of the submissions list.
Component Layout Settings
In addition to Layout Components, which are detailed in the next section of this guide, you can marginally change the arrangement of the components on your Form within the Layout settings. Each component allows for marginal layout changes from top, bottom, left, and right.
To change the layout, simply input a margin amount in the Top, Right, Bottom, or Left field. Components will be arranged accordingly depending on what margin field you input to. Set margins must be a valid CSS measurement input like “10px” in order to render properly.
Conditional Components
The conditional component requires an API key to be configured to function correctly.
Any form component can use conditional logic to determine when to hide or display itself. The settings for a conditional field, are configured on the component itself, and can be found by viewing the Conditional tab within the components settings.
The conditional logic is based on the following rules:
-
Each field can hide or display
-
The visibility is dependent on another component defined within the form.
-
The logic is activated when the configured field contains the plaintext value defined in the settings.
In addition to Simple Conditional logic, you can also use Advanced Conditional logic, which uses actual JavaScript for any combination of conditions.
JavaScript conditional logic requires you to set the value of show to either true or false. You have access to the current value of any form component via the data object, and the components API key. Advanced Conditional logic will only work, if Simple Conditional logic isn’t already defined.
When using Advanced Conditional logic with the select boxes form component, you must use the following syntax to get the value of the select box, which will always be true or false, depending on if it is checked or not: data.selectbox_component.selectbox_value
Calculated Value
Caclulated values allow calculating values based on the values in other fields of the form. Calculated values uses plain javascript and can return any value to the field. There are two variables available to calculate off of, data and row. data is the full data in the form. You can access values within it by using the field keys. For example data.myfieldkey. If you field is within a datagrid, there is an additional variable available of row which contains the values for that row of the datagrid. You can access the values the same as with data as row.myfieldkey. The values are also in data.mydatagrid[0].myfieldkey and data.mydatagrid[1].myfieldkey plus each additional row as the index.
Also you have access to special util variable – library of useful functions. More information about util library could be find here.
Return the calculated value in the value variable and it will be set. Each time the form values change it will be recalculated. You do NOT need to watch form fields as you do for other custom logic in your form. It will automatically update.
It is very common to disable the field using calculated values.
Component API
Property Name
Form components directly translate to a resource property on the API that is generated for the form. By default a property name is generated by camel casing the field title. You can change the property name by going to the API tab in the form component settings.
Field Tags
Tag the field for use in custom logic or within your application.
Custom Properties
This allows you to configure any custom properties for this component by setting a ‘Key’ and ‘Value’ the property.
