Further configuration of text fields in the Form Builder | FB_009

This tutorial follows on from FB_006. Since the end of that tutorial, we have added a few additional text fields for:

• Title

• Email

• Address

• Date

The following has been configured on these fields in advance:

• Font

• Text size

• Name applied to each field in the Custom Tab

• Placeholder text changed to match the intent of that field

Besides these changes, the fields are all in their default state. We can see there is no sign of them at present on the main form, shown on the right of the screen.

Our intent with this field is to provide a single line input. The user will have the ability to delete this field should they not need it. In addition, the user will have the ability to make this text bold.

As stated, we wish for the customer to be able to delete this field should they not need it. To accomplish this we need two options enabled, deletion and selection.

With this dropdown specified, the field will now be available on the main form for you to interact with.

Formatting options can be configured as required, allowing you to control how much configurability your users have with a field. In this example, we only want the user to be able to make this text bold. Every other option will be disabled.

Our email field will have slightly different configuration options available to the user. We wish the user to be able to change the text colour. In addition, we want to allow the user to open the additional configuration pop-up. This is done by double clicking the field on the canvas and gives access to a wider range of configuration and interactivity options.

To allow the user to utilise the configuration pop up, we need to enable selection and pop up toggles.

As with the previous field, we can control the formatting options available to the user via the set of toggles. In this field, we only want to allow the changing of the font colour.

The address field will be a multiline input, allowing our users to insert line breaks and enter text over multiple lines. All other configuration options will be unavailable to the end user.

As the name suggests, this allows for multi line text input. With this dropdown selected, the field will now be visible on the main form.

The easiest way to remove all customer formatting options is to check this toggle. Only the text input will remain available on the form.

This field will allow users to pick a specific date using a dedicated date picker feature. Users will not be able to format this text or manually input text into the field.

Once an option is selected in this dropdown, the field will be available on the main form.

This set of options will appear when Date is selected. You can choose the format of the date to be displayed on the form and canvas.

For this field, we do not want our end user to have any formatting options.

This option will allow us to interact with the fields on our canvas as our end users would. So, for example, where we've specified fields can or cannot be selected, deleted, moved, etc, we will be able to simulate this configuration using this mode.

Note, Emulation Mode will NOT show you the template exactly as your customer sees it. To see exactly how your end users see your product template, you will need to impersonate or log in as one of those users.