Advanced Components

Email

The email component is nearly identical to the text field component. The Email component has a custom validation setting that, if set up correctly, can ensure the value entered is a valid email address.

Graphical user interface, application

Description automatically generated


URL

The URL component is nearly identical to the text field component. It contains a custom validation setting that, if set up correctly, can ensure the value entered is a valid URL (i.e. web address).

Graphical user interface, application, Teams

Description automatically generated


Phone number

  1. The Phone Number component can be used to enter phone numbers.

  2. Label: The label for this field that will appear next to it.

  3. Placeholder: The placeholder text that will appear when this field is empty.

  4. Input Mask: An input mask helps the user(s) with input by ensuring a predefined format. For a phone number field, the input mask defaults to (999) 999-9999.
    i. 9: numeric (numbers only)
    ii. a: alphabetical (letters only)
    iii. *: alphanumeric (numbers and letters)

  5. Prefix: The text to show before a field. An example is ‘$’ for money

  6. Suffix: The text to show after a field. An example would be ‘lbs’ for weight.

  7. Required: If checked, the field will be required to have a value.

    Graphical user interface, application

Description automatically generated


Address

  1. The Address component can be used to enter addresses in a form.

  2. Label: The label for this field that will appear next to it.

  3. Placeholder: The placeholder text that will appear when this field is empty.

  4. Allow Multiple Addresses: Allow multiple addresses to be entered into the field.

  5. Required: If checked, the field will be required to have a value.

Graphical user interface, application, Teams

Description automatically generated

Date/Time

  1. Date/Time components can be used to input dates, times or both dates and times.

  2. Label: The label for this field that will appear next to it.

  3. Default Value: The default value for the date component.

  4. Placeholder: The placeholder text that will appear when this field is empty.

  5. Date Format: The format for displaying this field’s date.

  6. Required: If checked, the field will be required to have a value.

    Graphical user interface, application, email

Description automatically generated


Day

  1. The Day component can be used to enter values for the Day, Month, and Year using a number or select type of field.

  2. Type of input: Type of input for Month, Day and Year can be selected between Number or Select type on Day, Month and Year tabs.

  3. Hide Input Labels: The labels of component Month, Day, Year inputs can be hidden on the form.

  4. Day first: The order of the fields can be changed. The Day field can be displayed before the Month field if Day first is checked on the Day tab.

  5. Minimum Year: A value of the year that this field’s value must be on or after.

  6. Maximum Year: A value of the year that this field’s value must be on or before.

Graphical user interface, application

Description automatically generated


Time

The Time component can be used to input time either using a time picker or manual input option.

Graphical user interface, application, Teams

Description automatically generated


Currency

  1. The Currency component should be used when a field should display currency amounts on a form. This component holds a numeric input mask that allows two decimal values and automatically adds commas as a user inputs a currency amount.

  2. Label: The name or title for this component.

  3. Placeholder: The placeholder text that will appear when this field is empty.

  4. Prefix: The text to show before a field. An example is ‘$’ for money

  5. Suffix: The text to show after a field. An example would be ‘dollars.’

  6. Multiple Values: If checked, multiple values can be added in this field.

Graphical user interface, text, application

Description automatically generated


Survey

  1. The Survey component works like the radio component. Instead of one question, the user(s) can select a value for multiple questions which are configured within the component settings. Survey is a great component to utilize when asking multiple questions with the same context of answers or values.

  2. Label: The label for this component that will appear next to it.

  3. Questions: The questions you would like to ask within the survey.

  4. Values: The values that can be selected per question. Example: ‘Satisfied’, ‘Very Satisfied,’ etc.

  5. Required: If checked, the field will be required to have every question answered.

    Graphical user interface, application

Description automatically generated

Signature

  1. A Signature component is a special field that allows someone to sign the field with either their finger on a touch-enabled device or with the mouse pointer. This signature will be converted into an image and stored with the form submission.

  2. Footer Label: You can enter a short instruction here.

  3. Width: How wide the signature area should be. This can be in pixels or percent.

  4. Height: How high the signature area should be. This can be in pixels or percent.

  5. Background Colour: The Background colour of the signature area. This can be an RGB value in RGB (255,255,255) format, a hex value like #000000 or the name of a color.

  6. Pen Colour: The pen colour in the signature area. This can be an RGB value in RGB (255,255,255) format, a hex value like #000000 or the name of a color.

    Graphical user interface

Description automatically generated

Did this answer your question?