Create forms
  • 09 Sep 2021
  • 13 Minutes to read
  • Dark
    Light
  • PDF

Create forms

  • Dark
    Light
  • PDF

Forms are used to capture customer information during a workflow. This article describes how to design forms using the form designer.

🎦 Watch related video:

Create a new form

This section describes how to create a new form.

To create a new form:

  1. In the Lightico Administration page, in the left pane, click Workflow > Form Designer.

  2. Click Create in the top right corner. 

  3. In the Create New Form Dialog box, enter the name of the form and click Create.

    The Form Designer opens, allowing you to add different elements to the form.

    Note:
    When you create a new form, it includes the first section by default. Sections are used to organize the information on your form and are not visible to the customer.
  4. Add fields to the forms as described below.

  5. Design and format the form as described below.

  6. Click Save.

Add fields to the forms

There are 6 types of fields that you can add to a form: Text, Checkbox, Dropdown, Number, Date, and Radio Button

All fields in a form need to be bound to an attribute. Therefore, before you add a field, you need to first create the relevant attribute

To add fields to a form:

  1. Click the + button in the relevant section.

  2. From the menu that opens, select the type field you want to add.

  3. Bind the field to an attribute.

    The attributes are grouped according to categories based on their tags. Select the relevant category and attribute.

    The field is added to the form.

  4. Configure the field settings.

    When you select a field, the settings for that field are displayed in the settings pane on the right.

    See Field settings for a description of each of the field settings and how to configure them.

  5. Click Save to update the form.
Note:
Each checkbox and radio button option contains a sub-section, which allows you to nest a field inside one of those options. For example, If you have a checkbox with a few options, you can nest a text field under one of the options. The field will only be displayed if the customer chooses the relevant checkbox option. To nest a field, click the + button under the relevant checkbox or radio button option and add the desired field.

Field settings

This section describes the types of fields you can add to your form and how to configure the field settings for each one.

Text

You can add a text field to your form, allowing the customer to enter free text into the form such as full name or address. You can configure the following text settings:

PropertyDescription
LabelThe label of the field that is visible to the customer in the form.
Default ValueYou can select a default value in 2 ways:
  • Enter a default value by selecting Value and entering the value in the box.
  • Define another attribute as the default value by selecting From Attribute and entering the relevant attribute.
Bind To AttributeAll form fields are bound to an attribute. You can change the attribute to which this field is bound.
RequiredWhether or not the text is required. If you choose Yes, you can set the field to only be required under a certain condition. To do this, select Condition. The condition window opens:

Enter the condition statement by selecting an attribute, a comparison operator (for example, Contains) and the value you want to compare it against. For example, you can set a condition that the attribute state_address should contain the value California.

ValidationsThis property is read only and indicates whether there are any input validations on the text field. You edit this property in the attribute itself in the Attributes mapping page.
Min characters requiredThe minimum number of characters that the customer needs to enter.
Max characters allowedThe maximum number of characters that the customer is allowed to enter. This property is read only. You edit this property in the attribute itself in the Attributes mapping page.
WidthYou can arrange the different elements in the form by dragging them to their relevant location. If you drag this field next to another field in your form, you can use this setting to define the relative width of the field.

Checkbox

You can add a checkbox to your form, allowing customers to select multiple checkbox options. You can configure the following checkbox field settings:

PropertyDescription
LabelThe label of the field that is visible to the customer in the form.
Bind To AttributeAll form fields are bound to an attribute. You can change the attribute to which this field is bound.
RequiredWhether or not the checkbox is required. If you choose Yes, you can set the field to only be required under a certain condition. To do this, select Condition. The condition window opens:

Enter the condition statement by selecting an attribute, a comparison operator (for example, Contains) and the value you want to compare it against. For example, you can set a condition that the attribute state_address should contain the value California.

Default ValueChoose the values that are selected by default in the form.
Selected CheckboxesChoose a minimum and maximum number of options that the user can select in the form. 
Sort
Sort the checkboxes by the selected property in ascending or descending order.
WidthThis field is read only. The width of the checkbox is always 100%. You cannot drag this field next to another field.

Dropdown

You can add a dropdown list to your form, allowing customers to select one of the dropdown options. You can configure the following dropdown field settings:

PropertyDescription
LabelThe label of the field that is visible to the customer in the form.
Bind To AttributeAll form fields are bound to an attribute. You can change the attribute to which this field is bound.
RequiredWhether or not the dropdown is required. If you choose Yes, you can set the field to only be required under a certain condition. To do this, select Condition. The condition window opens:

Enter the condition statement by selecting an attribute, a comparison operator (for example, Contains) and the value you want to compare it against. For example, you can set a condition that the attribute state_address should contain the value California.

Default ValueChoose the value that will be selected by default in the form.
FiltersYou can filter which dropdown options the customer will see in the form, based on the value of one of the dataset properties.

For example, if you have a dataset for different types of phones where one of the properties is the model of the phone, you can apply a filter to only show the options for a particular phone model.
Cascade by

This is a filtering option that connects 2 different dropdowns.

You can filter which dropdown options the customer will see in the form, based on the input of a property from a different dropdown. The 2 dropdown datasets need to share at least one property. For a detailed explanation, see Dropdown cascade example.

SortSort the dropdown list by the selected property in ascending or descending order.
WidthYou can arrange the different elements in the form by dragging them to their relevant location. If you drag this field next to another field in your form, you can use this setting to define the relative width of the field.

Dropdown cascade example

You can filter which dropdown options the customer will see in the form, based on the input of a property from a different dataset. For example, assume you have 2 dropdown lists in your form based on 2 different datasets, phone_type and phone_cover, and that these datasets share a common property called model.

In the first dropdown list (phone_type), customers select a particular phone they want to buy and in the second dropdown list (phone_cover), customers select a cover for their phone. In the phone_cover list you can use the cascade option to only show the phone covers for the particular model that was selected in the phone_type list.

Under Cascade By, in the first box, select the other dataset that you want to filter by, for example phone_type. In the second box, select the shared property that you want to filter by, for example, model.

Number

You can add a number field to your form, allowing the customer to enter numbers into the form. You can configure the following number settings:

PropertyDescription
LabelThe label of the field that is visible to the customer in the form.
Default ValueYou can select a default value in 2 ways:
  • Enter a default value by selecting Value and entering the value in the box.
  • Define another attribute as the default value by selecting From Attribute and entering the relevant attribute.
Bind To AttributeAll form fields are bound to an attribute. You can change the attribute to which this field is bound.
RequiredWhether or not the number is required. If you choose Yes, you can set the field to only be required under a certain condition. To do this, select Condition. The condition window opens:

Enter the condition statement by selecting an attribute, a comparison operator (for example, Contains) and the value you want to compare it against. For example, you can set a condition that the attribute state_address should contain the value California.

Min Characters requiredThe minimum number of characters that the customer needs to enter.
Max characters allowedThe maximum number of characters that the customer is allowed to enter. This property is read only. You edit this property in the attribute itself in the Attributes mapping page.
Format (Decimal Places)Select how many decimal places you want to display in the number format
WidthYou can arrange the different elements in the form by dragging them to their relevant location. If you drag this field next to another field in your form, you can use this setting to define the relative width of the field.

Date

You can add a date field to your form, allowing the customer to enter a date into the form. You can configure the following date settings:

PropertyDescription
LabelThe label of the field that is visible to the customer in the form.
Date FormatThe format of the date as it appears in the form.
Bind To AttributeAll form fields are bound to an attribute. You can change the attribute to which this field is bound.
RequiredWhether or not the date is required. If you choose Yes, you can set the field to only be required under a certain condition. To do this, select Condition. The condition window opens:

Enter the condition statement by selecting an attribute, a comparison operator (for example, Contains) and the value you want to compare it against. For example, you can set a condition that the attribute state_address should contain the value California.

RestrictionsThis property is read only and indicates whether there are any constraints on the date field. You edit this property in the attribute itself in the Attributes mapping page.
WidthYou can arrange the different elements in the form by dragging them to their relevant location. If you drag this field next to another field in your form, you can use this setting to define the relative width of the field.

Radio button

You can add a radio button group to your form, allowing customers to select one of the radio button options. You can configure the following radio button field settings:

PropertyDescription
LabelThe label of the field that is visible to the customer in the form.
Bind To AttributeAll form fields are bound to an attribute. You can change the attribute to which this field is bound.
RequiredWhether or not the radio button is required. If you choose Yes, you can set the field to only be required under a certain condition. To do this, select Condition. The condition window opens:

Enter the condition statement by selecting an attribute, a comparison operator (for example, Contains) and the value you want to compare it against. For example, you can set a condition that the attribute state_address should contain the value California.

Default ValueChoose the value that will be selected by default in the form.
SortSort the radio buttons by the selected property in ascending or descending order.
WidthThis field is read only. The width of the checkbox is always 100%. You cannot drag this field next to another field.

Design the form

This section describes how to work with the different design elements of the form.

Pages

Using the page toolbar at the top of the page, you can add new pages to a form and set conditions to determine if and when the page will be visible to the user.

Add a new page

To add a new page, click the + button in the page toolbar.

To scroll between the pages, use the dropdown list or the arrows.

To rename the page, click on the current page name, and edit the name.

Show or hide pages based on conditions

You can set visibility conditions to determine when the page will be visible to the customer based on certain conditions. For example, you can set a page to be visible only to people who live in California (based on the value they entered for State).

To set visibility on a page:

  1. Click the settings button. The page settings pane opens:

  2. Click Only visible if, and in the dialog box that opens, set the visibility conditions based on the relevant attributes.

    You can combine multiple condition statements using And / Or logical operators. You can also create more complex conditions by including some condition statements in parentheses. For more information about working with conditions, see Setting conditions in workflows.

Make a page repeatable

You can allow customers to fill out a page in your form twice, by making the page repeatable. You can set a condition to make the page repeatable based on the value of an attribute.

To make a page repeatable:

  1. Click the settings button to open the page settings and click the Repeatable toggle. 

  2. In the Repeat By Attribute box, enter the attribute that you want to base your condition on.

  3. Enter the condition for when the page will be repeatable.

  4. Click Save.

Sections

You can divide a page on your form into different sections. You use sections to organize the information on your form and set visibility conditions. 

Note:
The customer does not see the actual division into sections.

Add a new section

To add a section, click the + button and select Section from the Add item list. A new section is added.

To rename the section, click on the current section name, and edit the name.

Section visibility

You can set visibility conditions on a section to determine when the section will be visible to the customer based on certain conditions. For example, you can set a section to be visible only to people above the age of 18 (based on the value they entered for Age).

To set visibility on a section:

  1. Click the section so that the Section Settings appear in the Settings pane:

  2. Click Only visible if, and in the dialog box that opens, set the visibility conditions based on the relevant attributes.

    You can combine multiple condition statements using And / Or logical operators. You can also create more complex conditions by including some condition statements in parentheses. For more information about working with conditions, see Setting conditions in workflows.

Make a section duplicatable

When you create a visual cart, you can set a section to be duplicatable. This means that the agent can re-use the section of the form multiple times in the the same journey. For more information, see Create a visual cart.

Labels

You can add a label to your form that will be visible to the customer as text.

To add a label:

  1. Click the + button and select Label from the Add item list. A new label is added and the Label settings pane opens on the right.

  2. You can enter the name of the label or base the label value on an attribute.

    • To enter the value of the label, select Value and type the name of the label
    • To base the label value on an attribute, select From Attribute and select the relevant attribute
  3. Select the font size from the Font size list.

  4. If you drag this field next to another field in your form, you can define the relative width in the Width list.

Custom HTML

You can add Custom HTML content to your form using the built-in WYSIWYG editor. 

To add custom HTML, click the + button and select HTML code from the Add item list. The WYSIWYG editor opens allowing you to add the custom HTML.

Layout

You can arrange the different elements in the form by dragging them to the relevant location in the form.

Most elements can be arranged side by side in the same row, except for dropdown fields, checkbox fields and HTML elements. You can place up to a maximum of 3 elements per row.

In the element settings you can set the relative width of each element in the Width box.




Was this article helpful?