Form Component Customizations

When you drag and drop a form component, like a text field, there are more options to customize the form further to display just like your paper form on the web.

Applies to:
cb Admin, cb Platform 

Introduction

When you drag and drop a form component, like a text field, you are given many further customizations to determine how the form component will look.

These customizations fall under several categories including display, data, and validation.

The different form components: text field, text area, number, password, check box, radio button, etc., have slight differences in terms of which customizations they offer, but all their customization options are generally pretty similar. Customizations that are specific to certain form components are noted below.

Display Customizations

Label: This is the name of the text box. A text box might be called, “Facility Name” or “Role Type” This indicates what a user should type into the text box. For example, in a text box with the label, “Facility Name,” a user might type in “Smithfield Daycare.”

Label Position: This indicates if the label should go above or below the text box.

Placeholder: This is a bit of grey text inside a text box that disappears when a user types in text.

Description: This is further text below a text box that gives additional information or further instructions.

Row: This indicates how many rows of text a text box should have.

Tooltip: This is a bit of text that users can see by hovering over a small circle next to the text box. It can give the user hints or further instructions.

Prefix: This indicates that a user should type in a prefix.  It makes the text box look short.

Suffix: This indicates that a user should type in a suffix. It makes the text box short.

Widget: This allows you to decide if you really want users to input text or if you want them to pick from a calendar dropdown instead.

Data Customizations

Multiple Values: If you check the “multiple values” checkbox, you can allow users to add more than one block of text into the text box.

Default Value: This is a block of text that automatically shows up in the form component unless users change it.

Input Format: This can allow users to type in HTML code instead of regular text.

Text Case: This can force users to type in all capital or all lowercase letters.

Decimal Places: When working with numbers (as opposed to text), this tells users how many decimal places they can enter. With two decimal places, they can enter “3.14.” With eight decimal places, they can enter “3.14159265.”

Validation Customizations

Required: If you check the “required” checkbox, it forces users to enter information into that text box and gives an error message if they skip it.

Unique: If you check the “unique” checkbox, it forces users to enter information into that text box that is different from what they already typed in. If they type in two pieces of text that are the same, they get an error message.

Maximum and Minimum Length: If you choose a maximum and/or minimum length, it requires users to enter a certain number of characters into the text box. If they type in text that is too long or too short, they get an error message.

Maximum and Minimum Word Length: If you choose a maximum and/or minimum length, it requires users to enter a certain number of words into the text box. If they type in too many or too few words, they get an error message.

Maximum and Minimum Value: When working with numbers (as opposed to text), if you choose a maximum and/or minimum value, it requires users to enter a number of a certain value. If they type in too high a number or too low a number, they get an error message.

Error Label: An error label allows you to type in an error message. This error label will be added onto the error message that the system gives automatically.

Custom Error Message: A custom error message allows you to type in a custom error message. This error message overrides whatever error message the system would have otherwise given.

API Customizations

Note: Don’t worry about most of the API customizations. There is only one API customization you need to know about:

Custom Properties Form Redaction: This allows you to redact information on a form. If you need to share a document with other parties and the document contains fields with sensitive data that other parties should not have access to, these fields can be configured so that text like “(undisclosed)” is overlaid on top and the sensitive data remains private.

See the steps below on how to use this feature:

Redacting Content

  1. In a form, create a field with content you want to remain anonymous.
    • In this case, we’ll use the example, “Victim’s Name.”
      Note: See Creating and Editing Forms for more information on creating forms.
  2. Hover over  “Victim’s Name”  and click  edit.
  3. In the window that opens, click “API.”
  4. Click “+ Add Another.”
  5. Under “Key,” write “redact-with.”
  6. Under “Value,” write “(undisclosed).”
  7. Click “Save.”
  8. Now you can see what the victim’s name is in the form, but when someone else downloads the form as a PDF, the victim’s name will be taken out. Therefore, the victim’s name will remain anonymous for anyone who shouldn’t see that private information.

Conditional and Logic Customizations

Simple: This allows you to create boolean operations. This means that you can hide or show a component based off the value of another component. For example, if a user checks off a box in a checkbox component, then a particular text field can appear. If a user does not check off that box, then the text field will be hidden.

Logic: This allows you to trigger an action based off the value of another component. For example, if a user checks off a box in a checkbox component, then the document might be saved.

Special Customizations

These customizations are specific to certain components:

Date/Time Customizations

Display in Timezone: This allows you to decide if the timezone displayed is the time zone that the user is in or if it’s always UTC.

Allow Manual Input: This allows you to decide whether or not the user should be able to enter the time and date manually.

Format: This shows how the date and time should be displayed. For example, the format, “yyyy-MM-dd hh:mm a” would give a date and time like, “2019-10-31 12:00pm” for October 31st 2019 at noon.

Maximum and Minimum Date: If you choose a maximum and/or minimum date, it requires users to enter a date within a certain window of time. If they type in a date that is outside that window of time, they get an error message.

Button Customizations

Action: This tells a user what will happen once they click the button, like if the form will be submitted or if it will be saved or if it will be deleted.

Theme: This shows which color the button will be.

Size: This shows how big or small the button will be.

Block Button: If you check the “block button” checkbox, the button becomes a block.

Currency Customizations

Currency: This shows which currency to use, like US dollars or British pounds.

File Customizations

Storage: This shows where uploaded files will be saved, like to Dropbox or Azure File Services or another file sharing system.

File Name Template: This shows how file names should be displayed. One example could be “IMG_###.JPG.”

Display as image(s): If you check the “display as image(s)” checkbox, the files uploaded to the form will be displayed as images.

Enable web camera: If you check the “enable web camera” checkbox, a web camera will be used to take pictures instead of the user having to upload them.

Maximum and Minimum File Size: If you choose a maximum and/or minimum file size, it requires users to enter a file with a certain size. If they try to upload a file that is too big or too small, they get an error message.

Select Box Customizations and Checkbox Customizations

Input Type: This allows you to decide whether you want to use a radio button or a checkbox.

Maximum and Minimum Checked Number: If you choose a maximum and/or minimum checked number, it requires users to check off a certain number of boxes. If they check off too many or too few boxes, they get an error message or they might not be able to submit the form.

Signature Customizations

Width: This shows how much space users have to sign their names.

Height: This shows how tall users can make their signature.

Background Color: This shows the background color that the user’s signature will be on top of.

Pen Color: This shows the font color that the user’s signature will show up as.

Examples:

Here is a customized text field:

Here is a customized number box:

Here is a customized series of select boxes: