Appearance
Last updated
Last updated
In the Appearance section, you can configure various options related to the visual presentation of fields in the form. Although these types of properties focus on style or formatting choices that do not directly affect the functionality of the components, it is important to note that they can significantly impact their effectiveness: a clear and user-friendly design will facilitate proper management, while an unintuitive design may hinder it.
Let’s take a look at these properties for the different types of form elements. Remember that you can activate the Preview mode while working to review in real-time how your choices affect the design.
Both columns and static elements like Text and Image have specific properties that define their positioning on the screen. The Vertical align property is common to all of them and refers to the position of the components relative to the top and bottom margins of the section or column containing them. This property can be set to Top (aligned at the top), Center (aligned in the center), or Bottom (aligned at the bottom).
Another property that only affects columns is Spacing, which refers to the vertical space between elements within the same column. The higher this value, the greater the separation between fields.
The Align property, found in both text and image fields, works similarly but defines the horizontal positioning of the content. This can be set to Left, Center, or Right, indicating alignment to the left, center, or right, respectively.
The Text field offers a richer set of options, with the following properties:
Margin
With values ranging from 0 to 10, this allows you to choose the margin of free space around the text. A lower value positions it closer to other components, while a higher value increases the separation.
Weight
Allows you to set the font weight to Light, Regular, or Bold.
Font style
Allows you to select the text style as Italic or Normal.
Text variant
Offers a series of preconfigured variants with different levels for headings, subtitles, body text, and other options.
Although input fields offer a wider range of options depending on their functionality, most of them include the following appearance properties:
This property defines a structure for the requested data, determining its possible values. To use this property, you need to understand certain parameters that define the type of characters allowed in each position of the string:
The character "a" represents any letter, meaning that when included in the mask, the user can only enter an alphabetic character in that position.
The character "0" represents any number. When included in the mask, it only allows values from 0 to 9 in that position.
If only a specific letter or number is valid in a position of the string, you must enter the corresponding character in the mask.
If a character in the string must specifically be "a" or "0" (since these also serve as generic letter or number placeholders), you must precede it with a backslash "\" to ensure only that specific character is accepted.
Other characters like periods or hyphens can be added to the mask so that the entered data adopts this format.
Sets a default text displayed to the user in the field, which can be used to provide examples or suggestions for completing it.
Adds an expression as a prefix to the data entered in the field, such as the area code before a phone number.
You can choose the value True if you want the field to have multiple lines (for a larger text area) or False if it should be displayed in a single line.
Keep in mind that some field types, such as Date or Attachment, will have fewer properties or may not display this section, as they have a predefined format that does not allow variations. Other fields, like Options or Boolean, will have unique properties specific to their type, as we will see later.
