From this section you can see the list of settings common to all of our fields. For a custom specific field settings<\/a> documentation<\/strong>, please visit the product manual<\/a> page.<\/p>\n <\/p>\n This setting must be a unique one per document, and is mandatory<\/strong>.<\/p>\n This setting must be filled for all fields that supports it. The value of this setting is used across multiple features of the\u00a0Abcsubmit<\/a>\u00a0form builder<\/strong>:<\/p>\n For example, if you want to set the role (Field name) of a person name to a field, an appropriated field name would be: Person name<\/p>\n For example, I would want to display the\u00a0Textbox field<\/strong>\u00a0to the user only if another field of the form contains a certain value. For this use-case, we can enter an\u00a0expression for this setting<\/strong>, by writing\u00a0in the Formula editor<\/strong>:<\/p>\n This is the default behavior, and the value of this setting must be set in\u00a0Formula editor<\/strong>\u00a0as:<\/p>\n For this kind of scenario, the value of this setting must be set in\u00a0Formula editor<\/strong>\u00a0as:<\/p>\n Set to “YES” in order to force user to set a value for this field<\/strong> (the user won’t be able to submit the form if the field does not have a non-empty value).<\/p>\n Use this setting in combination with the reset of the validation settings if you want to force the user to set a value for this field<\/strong> (fill-in the field).<\/p>\n Set the expected format of the value you want this field to have<\/strong> in case it’s filled.<\/p>\n Note that by setting the format of the field this does not mean that the\u00a0user is forced to set a value for the field<\/strong> (in that case you must set the “Required field” setting to “YES” for this field).<\/p>\n Sets a minimum value the value of this field<\/strong> can contain in case it’s filled by the user.<\/p>\n Note that by setting the minimum value of the field this does not mean that the user is forced to set a value for the field<\/strong> (in that case you must set the “Required field” setting to “YES” for this field).<\/p>\n Sets a maximum value of the value of this field<\/strong> can contain in case it’s filled by the user.<\/p>\n Note that by setting the maximum value of the field this does not mean that the user is forced to set a value for the field<\/strong> (in that case you must set the “Required field” setting to “YES” for this field).<\/p>\n You can choose from a list of a fonts<\/strong> what type of font will be used when painting this field<\/strong> on screen<\/p>\n You can choose from a list of font sizes<\/strong> what size will have the font used by this field<\/strong> when it’s painted on the screen<\/p>\n You can fine tune the settings used when painting this field on screen (like Bold<\/strong>, Italic<\/strong>, Underline<\/strong>)<\/p>\n Depending on what text alignment<\/strong> you want (Left<\/strong>, Right<\/strong>, Centered<\/strong>, Justified<\/strong>), you can modify this setting in order to affect the alignment of the text inside this field<\/strong>.<\/p>\n Use this group of settings in order to modify the appearance of the field when the field is in it’s default (normal) state<\/strong>.<\/p>\n A field is in it’s default (normal) state if all these conditions are met, while the field is not in it’s error state<\/strong>:<\/p>\n – The field is not focused (the focus ring is not painted over the field, meaning that the user cannot interact by keyboard with the field<\/strong>) Sets the color of the background<\/strong> this field will have when the field is in it’s normal (default) state<\/strong><\/p>\n Sets the color of the border\u00a0<\/strong>this field will have when the field it is it’s normal (default) state<\/strong><\/p>\n Allows you to specify a border style (or pattern)<\/strong> that will be used when drawing this field, when the field is in it’s normal (default) state<\/strong><\/p>\n Sets the color of the text<\/strong> this field will use when it’s state is normal (default).<\/strong><\/p>\n Use this group of settings in order to modify the appearance of the field when the field is in it’s focused state<\/strong>.<\/p>\n A field is in it’s focused state if one of these conditions are met, while the field is not in it’s error state<\/strong>:<\/p>\n – The left mouse button of the user is in it’s pressed state<\/strong>, and the mouse pointer is situated over the surface of this field<\/strong>, and the initial left mouse button press coordinates was situated over the surface of this field<\/strong> When the field is in it’s focused state, a focus ring<\/strong> (dotted internal border) is drawn inside the field<\/strong>.<\/p>\n Sets the color of the background<\/strong> this field will have when it’s state is focused<\/strong><\/p>\n Sets the color of the border<\/strong> this field will have when it’s state is focused<\/strong><\/p>\n Sets the style (or pattern) the border<\/strong> of this field will have when it’s state is focused<\/strong><\/p>\n Sets the color of the text<\/strong> this field will have when it’s state is focused<\/strong><\/p>\n Use this group of settings in order to modify the appearance of the field when the field is in it’s hovered state.<\/p>\n A field is in it’s hovered state if all these conditions are met while the field is not in it’s error state<\/strong>:<\/p>\n – The field is not in it’s focused state<\/strong> Sets the color of the background<\/strong> of this field when the field state is hover<\/strong><\/p>\n Sets the color of the border<\/strong> of this field when the field state is hover<\/strong><\/p>\n Sets the style (or pattern) of the border<\/strong> this field will have when the state of the field is hover<\/strong><\/p>\n Sets the color of text<\/strong> this field will use when the state of the field is hover<\/strong><\/p>\n A field is in it’s error state when the value of the field was rejected by the server or when the value of the field does not match validation or validation constraint rules<\/strong><\/p>\n Sets the color of the background<\/strong> of this field when the field is in error mode state<\/strong><\/p>\n Sets the color of the border<\/strong> of this field when the field is in error mode state<\/strong><\/p>\n Sets the style (or pattern) of the border<\/strong> of this field when the field is in error mode state<\/strong><\/p>\n Sets the text color this field will use<\/strong> to draw it’s text when the field enters in error state mode<\/strong>.<\/p>\n Use the Size group of settings<\/strong> in order to set the dimensions of the field.<\/strong><\/p>\n Allows you to specify the width of the field<\/strong> (use CSS dimension format<\/em>). For example, all these values are allowed<\/strong>: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.<\/p>\n Allows you to specify the height of the field<\/strong> (use CSS dimension format<\/em>). For example, all these values are allowed<\/strong>: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.<\/p>\n Use the\u00a0Position group of settings<\/strong> in order to set the coordinates where the field will be placed on the screen<\/strong>, and also to set the zIndex of the input<\/strong>:<\/p>\n Set the position of the Left edge of the field (input)<\/strong> on screen.\u00a0(use CSS dimension format<\/em>). For example, all these values are allowed<\/strong>: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.<\/p>\n Set the position of the Top edge of the field (input)<\/strong> on screen.\u00a0(use CSS dimension format<\/em>). For example, all these values are allowed<\/strong>: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.<\/p>\n Set the position of the Right edge of the field (input)<\/strong> on screen.\u00a0(use CSS dimension format<\/em>). For example, all these values are allowed<\/strong>: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.<\/p>\n Set the position of the Bottom edge of the field (input)<\/strong> on screen.\u00a0(use CSS dimension format<\/em>). For example, all these values are allowed<\/strong>: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.<\/p>\n If two field positions (or surfaces) are overlapping<\/strong>, the field (input) with the biggest Layer depth (zIndex) will stay on top<\/strong> of the other field.<\/p>\n By altering the rounded corners (border-radius<\/strong>) property of a field<\/strong>, you affect the amount of roundness will be applied when drawing the corners of the field<\/strong>.<\/p>\n By altering the thickness (border-width<\/strong>) property of a field<\/strong>, you control the width of the border<\/strong> that this field will have.<\/p>\n","protected":false},"excerpt":{"rendered":" Field properties – Documentation From this section you can see the list of settings common to all of our fields. For a custom specific field settings documentation, please visit the product manual page.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[113,111,21,108,110,22,109,112,26],"class_list":["post-435","post","type-post","status-publish","format-standard","hentry","category-form-fields","tag-appearance","tag-border","tag-documentation","tag-field-documentation","tag-fields","tag-form-fields","tag-generic-field-properties","tag-validation","tag-visual-appearance"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t<\/a>1. Field name<\/h2>\n
\n
<\/a>2. Is visible<\/h2>\n
2.1. There are some scenarios when you want that your\u00a0field to be visible inside your form only under certain conditions<\/strong><\/h3>\n
IF<\/strong>( \n VALUE<\/strong>( `My other field name` ) ==<\/strong> \"john\", \n true<\/strong>, \n false<\/strong>\n)<\/pre>\n
2.2. There are scenarios when you want that your\u00a0field to be visible all the time<\/strong><\/h3>\n
true<\/strong><\/pre>\n
2.3. There are some (rare) scenarios when you want that your\u00a0field to be invisible all the time<\/strong><\/h3>\n
false<\/strong><\/pre>\n
3. Validation<\/h2>\n
3.1. Required field<\/h3>\n
3.2. Value format<\/h3>\n
3.3. Min value<\/h3>\n
3.4. Max value<\/h3>\n
4. Text<\/h2>\n
<\/a>4.1. Font face<\/h3>\n
<\/a>4.2. Font size<\/h3>\n
<\/a>4.3. Font style<\/h3>\n
<\/a>4.4. Text alignment<\/h3>\n
5. Appearance<\/h2>\n
<\/a>5.1. :normal (or default state)<\/h3>\n
\n– The mouse pointer is not over the surface of this field<\/strong> (then it would be hovered)<\/p>\n5.1.1. Background color<\/h4>\n
5.1.2. Border color<\/h4>\n
5.1.3. Border style<\/h4>\n
5.1.4. Text color<\/h4>\n
<\/a>5.2. :focus (state)<\/h3>\n
\n– The user navigated with the TAB key (or other focus mechanism) over this field<\/strong>, and the field responds to keyboard events<\/strong><\/p>\n5.2.1. Background color<\/h4>\n
5.2.2. Border color<\/h4>\n
5.2.3. Border style<\/h4>\n
5.2.4. Text color<\/h4>\n
<\/a>5.3. :hover (state)<\/h3>\n
\n– No mouse button is pressed<\/strong>, or<\/strong> a mouse button is pressed, but the original coordinate of the button mouse press was not inside the surface of the field<\/strong><\/p>\n5.3.1. Background color<\/h4>\n
5.3.2. Border color<\/h4>\n
5.3.3. Border style<\/h4>\n
5.3.4. Text color<\/h4>\n
<\/a>5.4. :error (state)<\/h3>\n
5.4.1. Background color<\/h4>\n
5.4.2. Border color<\/h4>\n
5.4.3. Border style<\/h4>\n
5.4.4. Text color<\/h4>\n
6. Size<\/h2>\n
<\/a>6.1. Field width<\/h3>\n
<\/a>6.2. Field height<\/h3>\n
7. Position<\/h2>\n
<\/a>7.1. Left<\/h3>\n
<\/a>7.2. Top<\/h3>\n
<\/a>7.3. Right<\/h3>\n
<\/a>7.4. Bottom<\/h3>\n
<\/a>7.5. Layer depth (zIndex)<\/h3>\n
8. Border<\/h2>\n
<\/a>8.1. Rounded corners<\/h3>\n
<\/a>8.2. Thickness<\/h3>\n