Visforms 5
Required Field Display

Required Field Display

Configuring the Required Field Display

Many forms contain required fields and are marked as required fields for easy user recognition. The way required fields are marked can be configured in the form configuration. The settings affect the following configuration options:

  • ‘Required *’ text display and display position.
  • ‘Required *’ text color.
  • Required Field Asterisk * Display.
  • Required Field Asterisk * Color.

Note: The default colors ensure a sufficient contrast between the foreground color and the background color for accessibility.

Accessibility

Contrast ratios are important components of form accessibility.
The preset colors in Visforms support accessibility and meet international standards.
Even the individually selected colors must ensure sufficient contrast between the foreground and background colors.
Read more about this in the sections Visforms and Accessibility and Creating Accessible Forms.

Default Configuration

The preset accessibility default configuration works as follows:

  • The ‘Required *’ text is placed at the top of the form.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: ‘Required *’ Text Position = “At the top”.

  • The ‘Required *’ text has a distinct red color.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: ‘Required *’ Text Color = ‘#bf1722’.

  • The label of a required field receives a required field asterisk.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: Required Asterisk * Show = “Yes”.

  • The required field asterisk on the label has a distinct red color.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameters: Required Field Asterisk * Color = ‘#bf1722’.

Configure required field display: Default setting in the form

Configuration

‘Required *’ text in the Form

This setting affects the following parameters:

  • ‘Required *’ text display and display position.
    • Top: First at the beginning of the form.
    • Above Captcha: Directly above the captcha, if a captcha is used in the form.
    • Bottom: Last element at the very bottom of the form, directly above the form button.
    • Don’t show: No ‘Required *’ text is displayed in the form.
  • ‘Required *’ text color.
    • Open the color selection dialog by clicking on the color area.
    • Manual entry in hexadecimal notation with a leading # character: #ff0000.

Note: If a captcha is used in the form, the captcha should appear as the last element at the very bottom of the form, directly above the form button. In this case, the 'Required *' text can also be displayed above the captcha.

Configure required field display: Default setting in the form configuration

Required field asterisk * on the field

This setting affects the following parameters:

  • Required field asterisk * display.
    • Yes: The field label receives a required field asterisk *.
    • No: The field label does not have a required field asterisk *.
  • Required field asterisk * color.
    • Open the color selection dialog by clicking on the color area.
    • Manual entry in hexadecimal notation with a leading # character: #ff0000.
Configure required field asterisk * on the field: Default setting in the form configuration

Changes

Below are two examples of custom configurations for displaying required fields.

Color and Text Position

Here is an example in blue with the ‘Required *’ text at the very bottom of the form, directly above the form button.

  • The ‘Required *’ text is at the very bottom of the form, directly above the form button.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: ‘Required *’ Text Position = “At the bottom”.

  • The ‘Required *’ text has a distinct blue color.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: ‘Required *’ Text Color = ‘#0900ff’.

  • The label of a required field receives a required field asterisk.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: Show mandatory field asterisk = “Yes”.

  • The mandatory field asterisk on the label is a distinct blue color.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: Mandatory field asterisk * color = ‘#0900ff’.

Example configuration in blue with the 'Required *' text at the very bottom of the form Example form in blue with the 'Required *' text at the very bottom of the form

Only show the field asterisk

Here is an example in blue with no ‘Required *’ text in the form.

  • The ‘Required *’ text does not appear in the form.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: ‘Required *’ Text Position = “Don’t show”.

  • The label of a required field receives a required field asterisk.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: Required Asterisk * Show = “Yes”.

  • The required field asterisk on the label has a distinct blue color.
    • Field Configuration » Tab: Advanced

      Group: Layout » Parameter: Required Field Asterisk * Color = ‘#0900ff’.

Example configuration in blue with no 'Required *' text in the form Example form in blue with no 'Required *' text in the form
What's on this Page