While most form fields and style options are intuitive, our platform provides a variety of additional settings you can use for more advanced customization options.

This document will walk you through how to access these settings and how you can utilize each one.

Accessing Component Settings

To access the component settings for an element, hover over it while it is in the form builder. Then, click on the gear icon that appears.

The settings menu will vary slightly depending on the field you are choosing to modify. However, this menu has a consistent layout regardless of which you choose to edit.

Using the Component Settings

The basic settings for a Text Field Component contain Display settings and Validation settings. A preview of the component will also appear on the right in real time.

Display

Screenshot_2021-08-17_124725.png

Label

The Label is what appears next to the text field on the form. For example, if you are asking for a first name, the Label should be titled “First Name.”

Label Position

This dropdown allows you to select a new position for the label to appear. It does not need to appear at the above default position. Click through the various options and observe how it changes the appearance in the preview.

Label Width & Label Margin

This allows you to create your custom sizes for the width of the label itself as well as the margin.

Placeholder

This is the custom text that will appear in the field by default. This is useful for helping your users understand what they need to enter in the field. This is completely optional.

Description

This allows you to write a small description that appears next to the field. Use this if you want to further qualify the information you wish to obtain in this field.

Tooltip

A tooltip is a small hint that appears to users when they hover over the question mark next to the label. You can write your tooltips to help users when filling out the form.

Prefix

This allows you to add a short word or phrase within the field next to the text entry space.

Widget

This allows you some customization over what type of input method you wish to use for this field. A basic text field will be set to Input Field by default. Experiment with the different options available to see how this affects the functionality of your field.

Input Mask

An input mask helps ensure that entries in this field follow a pre-determined format. For example, asking for a phone number in the format of (123) 456-7890 is using an input mask. This is generally used for phone numbers, emails, URLs, etc.

Tab Index

When navigating a webpage, you can sometimes navigate through the various elements by simply hitting your tab key. Adding a number to the tab index will determine the order in which a user can tab through the various field options on your form. You can learn more about this here.

Hidden & Hide Label

You can hide a field entirely from users by checking the box next to Hidden. Likewise, you can hide the label only by checking Hide Label.

Show Word Counter & Character Counter

Checking either of these boxes will cause a counter to appear below your field for either/or words and characters. You may want to enable this if you also set a word or character limit.

Initial Focus

You can check this box to make this field the first field that comes into focus for the user when clicking on the form.

Allow Spellcheck

Check this box to provide your users with a built-in spellchecking tool to avoid low-quality entries.

Disabled

You can disable the ability to enter text into this field if necessary for any reason.

Validation

Screenshot_2021-08-17_124752.png

Validate On

Selecting an option for this will alert users to incorrect or improper entries. Different options change the way that this alert appears.

Required

Check this box to require this field for a successful form submission.

Maximum/Minimum Length

The next four options allow you to set the minimum and the maximum number of characters or words allowed in this field.

Regular Expression Pattern

This is an advanced option that allows you to write in a regular expression that ensures that users enter the text within a predefined format. You can read more about regular expressions here.

Error Label

You can create a custom label that appears over the field when an error occurs.

Custom Error Message

An error message can go along with your label and explain to the user what type of error occurred and why.

Custom Data Settings

Screenshot_2021-08-17_124833.png

Certain fields require a bit more setup and provide you with additional settings that you must adjust before using them within your form. Examples of these would be Select Boxes, Select, Radio, etc. These new settings appear under the Data tab that will appear between the two above settings tabs.

The Data menu allows you to create the values users can select when filling out the form. The Label is what the users will read as the option whereas the Value is what will appear when you receive the data from the completed form submission. The Shortcut Key allows you to create a one-letter shortcut to jump to that option in the list.

To add more options, click the +Add Another button at the bottom. To delete an option, click the X to the right of the value.

Date/Time Settings

Screenshot_2021-08-17_124858.png

Finally, any options that call for a date or time inputs will feature basic settings for further customization. You can find these in the same settings menu under Date and Time.

To enable data input, check the box next to Enable Date Input.

You can set a minimum date to ensure that all form entries contain a date that takes place on this date or after. Simply click the calendar icon and select the date you want to use for this purpose.

In the box below, you can blacklist dates entirely by entering the date in the format YYYY-MM-DD.

Finally, you can disable weekends or weekdays entirely by checking the box next to these prompts.

Screenshot_2021-08-17_124925.png

For time settings, you can customize the increments in which the time selector moves. By default, you generally want both your minutes and hours to move in an increment of 1.

Finally, you can set your time selector to be in 12-hour time as opposed to military time by checking the box.

Did this answer your question?