Display Settings
Overview
When editing the settings of a component, the Display tab will now be the first one open. This tab pertains to modifying the front-end UI.
Label
The component's front-end name. The Label displays above the field by default.
Label Position
The label location of the component. The Lable Position will default to the Top option, but you can select several other options:
| Location | Description |
|---|---|
| Top | The Label will be positioned at the top of the component and aligned to the left. |
| Left (Left-aligned) | The Label will be displayed to the left of the component and aligned with the component's width span. |
| Left (Right-aligned) | The Label will display to the left of the component and aligned to the right of the component width span. |
| Right (Left-aligned) | The Label will be aligned to the left of the component width span and displayed on the right side of the component. |
| Right (Right-aligned) | The Label will display to the right of the component, aligned with the left edge of the component's width. |
| Bottom | The Label will display left-aligned below the component. |
On choosing either the Left or Right alignment options, padding is applied to the corresponding side of the component, resulting in space between the Label and the component.
Format your form in a grid or save vertical space using the label position.
Placeholder
It is a short description of the expected value to enter the field. Placeholder displays when the field is empty and is not submitted.
Provide users with helpful guidance using the Placeholder feature as a form field helper text.
Description
Add a description to display below the field. Use this instead of or in addition to the placeholder for more details.
To style the Description content, use HTML in the setting field.
Tooltip
Adding content to the Tooltip setting allows you to create a new UI element represented by a question icon. When users hover over this element, the content inside the Tooltip setting will appear. Tooltips are a helpful way to provide additional information or tips without cluttering your form.
To style the content inside the Tooltip, utilize HTML in the Tooltip setting field.
Prefix
The Prefix setting adds text or characters before the input field. Use this to categorize or label a field, like $, for US currency.
Suffix
The Suffix setting allows adding text or characters after the input field to help label or categorize a field. For example, you can use % to represent a percentage.
Custom CSS Class
Enhance the appearance of your fields with personalized styling by adding Custom CSS Classes. IntelliBuddies form designer uses Bootstrap as the default CSS framework for the renderer. Here are some examples of practical Custom CSS Classes and their respective codes.
Tab Index
To control the tab order of components on a form, set the Tab Index attribute of this component.
Hidden
Hidden components do not display on the form but are still part of the form JSON and submission. Configure Logic with Hidden components to facilitate conditional show and hide workflow.
Hide Label
Hiding a field label can save vertical space on a form. Instead, utilize other display settings like a Placeholder to identify the field.
Hide Input
Mask sensitive data inputs with circle characters (like password fields). Use this setting when dealing with sensitive data like Tax ID or Social Security Number.
The Hide Input setting does not encrypt data on the server and is not recommended for passwords.
Initial Focus
After the form is displayed, the component with Initial Focused selected will automatically receive focus.
Enabling the Initial Focus feature on a single component within the form is recommended for optimal performance. Only the final component in the JSON structure with the feature enabled will receive focus if multiple components are enabled.
Disabled
The Disabled setting prevents users from inputting data into the field and is often used with calculated values to prevent users from altering calculations or populated values.
Table View
On checking the Table View setting, the field and underlying data display within the Submission Data Grid of the form. Irrespective of checking the settings, it saves data to the server.
Modal Edit
It opens a Modal Window to input or edit field data when clicked. When the field is empty, the placeholder text Click to set value. Will display in the field.