Form Field properties – Documentation

26Nov 2018 by andrei

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.

1. Field name

This setting must be a unique one per document, and is mandatory.

This setting must be filled for all fields that supports it. The value of this setting is used across multiple features of the Abcsubmit form builder:

  • In submissions section, where you can see the form results submitted by the users for this field
  • Field name is also used by the Label field, as identifier, from where you can pair a Label field with this field (control, input).
  • The formulas used in conditional logic also are using the field name as a identifier in expressions.
  • The Invoicing (Shopping cart) system uses the field name in it’s expressions if you want to add custom fields in your shopping cart

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

2. Is visible

2.1. There are some scenarios when you want that your field to be visible inside your form only under certain conditions

For example, I would want to display the Textbox field to the user only if another field of the form contains a certain value. For this use-case, we can enter an expression for this setting, by writing in the Formula editor:

IF( 
    VALUE( `My other field name` ) == "john", 
    true, 
    false
)

2.2. There are scenarios when you want that your field to be visible all the time

This is the default behavior, and the value of this setting must be set in Formula editor as:

true

2.3. There are some (rare) scenarios when you want that your field to be invisible all the time

For this kind of scenario, the value of this setting must be set in Formula editor as:

false

3. Validation

3.1. Required field

Set to “YES” in order to force user to set a value for this field (the user won’t be able to submit the form if the field does not have a non-empty value).

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 (fill-in the field).

3.2. Value format

Set the expected format of the value you want this field to have in case it’s filled.

Note that by setting the format of the field this does not mean that the user is forced to set a value for the field (in that case you must set the “Required field” setting to “YES” for this field).

3.3. Min value

Sets a minimum value the value of this field can contain in case it’s filled by the user.

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 (in that case you must set the “Required field” setting to “YES” for this field).

3.4. Max value

Sets a maximum value of the value of this field can contain in case it’s filled by the user.

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 (in that case you must set the “Required field” setting to “YES” for this field).

4. Text

4.1. Font face

You can choose from a list of a fonts what type of font will be used when painting this field on screen

4.2. Font size

You can choose from a list of font sizes what size will have the font used by this field when it’s painted on the screen

4.3. Font style

You can fine tune the settings used when painting this field on screen (like Bold, Italic, Underline)

4.4. Text alignment

Depending on what text alignment you want (Left, Right, Centered, Justified), you can modify this setting in order to affect the alignment of the text inside this field.

5. Appearance

5.1. :normal (or default state)

Use this group of settings in order to modify the appearance of the field when the field is in it’s default (normal) state.

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:

– 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)
– The mouse pointer is not over the surface of this field (then it would be hovered)

5.1.1. Background color

Sets the color of the background this field will have when the field is in it’s normal (default) state

5.1.2. Border color

Sets the color of the border this field will have when the field it is it’s normal (default) state

5.1.3. Border style

Allows you to specify a border style (or pattern) that will be used when drawing this field, when the field is in it’s normal (default) state

5.1.4. Text color

Sets the color of the text this field will use when it’s state is normal (default).

5.2. :focus (state)

Use this group of settings in order to modify the appearance of the field when the field is in it’s focused state.

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:

– The left mouse button of the user is in it’s pressed state, and the mouse pointer is situated over the surface of this field, and the initial left mouse button press coordinates was situated over the surface of this field
– The user navigated with the TAB key (or other focus mechanism) over this field, and the field responds to keyboard events

When the field is in it’s focused state, a focus ring (dotted internal border) is drawn inside the field.

5.2.1. Background color

Sets the color of the background this field will have when it’s state is focused

5.2.2. Border color

Sets the color of the border this field will have when it’s state is focused

5.2.3. Border style

Sets the style (or pattern) the border of this field will have when it’s state is focused

5.2.4. Text color

Sets the color of the text this field will have when it’s state is focused

5.3. :hover (state)

Use this group of settings in order to modify the appearance of the field when the field is in it’s hovered state.

A field is in it’s hovered state if all these conditions are met while the field is not in it’s error state:

– The field is not in it’s focused state
– No mouse button is pressed, or a mouse button is pressed, but the original coordinate of the button mouse press was not inside the surface of the field

5.3.1. Background color

Sets the color of the background of this field when the field state is hover

5.3.2. Border color

Sets the color of the border of this field when the field state is hover

5.3.3. Border style

Sets the style (or pattern) of the border this field will have when the state of the field is hover

5.3.4. Text color

Sets the color of text this field will use when the state of the field is hover

5.4. :error (state)

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

5.4.1. Background color

Sets the color of the background of this field when the field is in error mode state

5.4.2. Border color

Sets the color of the border of this field when the field is in error mode state

5.4.3. Border style

Sets the style (or pattern) of the border of this field when the field is in error mode state

5.4.4. Text color

Sets the text color this field will use to draw it’s text when the field enters in error state mode.

6. Size

Use the Size group of settings in order to set the dimensions of the field.

6.1. Field width

Allows you to specify the width of the field (use CSS dimension format). For example, all these values are allowed: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.

6.2. Field height

Allows you to specify the height of the field (use CSS dimension format). For example, all these values are allowed: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.

7. Position

Use the Position group of settings in order to set the coordinates where the field will be placed on the screen, and also to set the zIndex of the input:

7.1. Left

Set the position of the Left edge of the field (input) on screen. (use CSS dimension format). For example, all these values are allowed: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.

7.2. Top

Set the position of the Top edge of the field (input) on screen. (use CSS dimension format). For example, all these values are allowed: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.

7.3. Right

Set the position of the Right edge of the field (input) on screen. (use CSS dimension format). For example, all these values are allowed: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.

7.4. Bottom

Set the position of the Bottom edge of the field (input) on screen. (use CSS dimension format). For example, all these values are allowed: “82px”, “8em”, “3cm”, “calc(100% – 20px)”.

7.5. Layer depth (zIndex)

If two field positions (or surfaces) are overlapping, the field (input) with the biggest Layer depth (zIndex) will stay on top of the other field.

8. Border

8.1. Rounded corners

By altering the rounded corners (border-radius) property of a field, you affect the amount of roundness will be applied when drawing the corners of the field.

8.2. Thickness

By altering the thickness (border-width) property of a field, you control the width of the border that this field will have.

Spread the love