The Render Form component allows you to create interactive forms with a wide range of options. For example, you can prefill fields using variables or default values, and mark fields as required.

❗️

Similar to components, it is mandatory to provide a Component name (Figure 1 - 1).

The form Fields section (Figure 1) allows you to configure each form field you want to include. When you open the component editor, you have the option to add a title to the form (Figure 1 - 1) and configure one or more fields (Figure 1 - 2).

To add more form fields, click the Add field button (Figure 1 - 3). You can also remove a field that is no longer needed by clicking the delete icon (Figure 1 - 4).

🚧

A Render Form must always have at least one field. There is no maximum number of fields.

Each form field has the following configuration options:

• Required toggle (Figure 1 - 5) - mark the field as required by toggling the button.
• Label (Figure 1 - 6) - provide a caption for the form field (required field).
• Type (Figure 1 - 7) - select the type of form field from the available options.

The available form field types are:

• Text.
• Textarea.
• Checkbox.
• Dropdown.
• Custom.

Each component type has its own set of fields and a clear objective, as explained below.

📘

When using Variables with default values, the form field will only be automatically filled if and when the variable has a value. If not, it will remain empty.

Text

The text form field type displays a simple text input (Figure 3). The following configuration options are available:

• Default value (Figure 2 - 1) - set the default value of the form field. You can choose between a variable or a specific value to automatically fill in this field.
• Store in variable (Figure 2 - 2) - specify the variable in which you want to store the field value after form submission. This stored value can be used later in the flow. Only read-write variables are available (required field).

Once you have filled out all the form fields, click the Save button (Figure 2 - 3).

Textarea

The textarea form field type displays a textarea input (Figure 5). The following configuration options are available:

• Default value (Figure 4 - 1) - set the default value of the form field. You can choose between a variable or a specific value to automatically fill in this field.
• Store in variable (Figure 4 - 2) - specify the variable in which you want to store the field value after form submission. This stored value can be used later in the flow. Only read-write variables are available (required field).

Once you have filled out all the form fields, click the Save button (Figure 4 - 3).

Checkbox

The checkbox form field type displays a checkbox (Figure 7). The following configuration options are available:

• Default value (Figure 6 - 1) - set the default value of the form field. You can choose between a variable or a specific value to automatically fill in this field.
• Store in variable (Figure 6 - 2) - specify the variable in which you want to store the field value after form submission. This stored value can be used later in the flow. Only read-write variables are available (required field). Once you have filled out all the form fields, click the Save button (Figure 6 - 3).

🚧

When using the Checkbox field type and adding a default value if:

• The value is from a variable, it must be true or false.
• You add a custom value other than true or false, it will be converted to true.
• The variable has a value of undefined, null, or an empty string, the checkbox will be blank. If there's no interaction, the value is preserved. Otherwise, it will be true or false, depending on the checkbox status.

Dropdown

The dropdown form field type displays a dropdown menu (Figure 11). The following configuration options are available:

• Configure manually (Figure 8 - 1) - for each dropdown option, you need to define a value (Figure 8 - 2) and a display name (Figure 8 - 3). You can add options by using the available buttons (Figure 8 - 4), or remove options (Figure 8 - 5). To pre-select a specific value, you can define it in the default value field (Figure 8 - 6). Once you have filled out all the form fields, click the Save button (Figure 7 - 8).

• Configure variable (Figure 9 - 1) - when using this configuration type, you need to select a variable (required field) from the list (Figure 9 - 2) to populate the dropdown options. The variable must be an array or an array of objects.

The following snippet demonstrates how to use an array or an array of objects to feed the dropdown options list:

//Array variable
["Option 1", "option_2", 123]

//Array of objects variable
[
  {
    display_name: "Portugal",
    value: "+351"
  },
  {
    display_name: "United States",
    value: "+1"
  }
]

To save the selected options, use the Store in variable field (Figure 10 - 1). This value will be available after the form submission, allowing you to use it later in the flow. Please note that only read-write variables are available for this purpose (required field).

Once you have filled out all the form fields, click the Save button (Figure 10 - 2).

Custom

The custom form field type allows you to render any form field based on custom HTML and JSX (example in Figure 13). The following configuration options are available:

• Default value (Figure 12 - 1) - set the default value of the form field. You can choose between a variable or a specific value to automatically fill in this field.
• Store in variable (Figure 12 - 2) - specify the variable in which you want to store the field value after form submission. This stored value can be used later in the flow. Only read-write variables are available (required field).
• Code (Figure 12 - 3) - define the custom configuration of the form field using HTML and JSX. If a default value is defined, use Field.getDefaultValue() in the code to retrieve the selected default value. To store the desired value in the chosen variable, use Field.setValue(value).

Once you have filled out all the form fields, click the Save button (Figure 12 - 4).

Below (Figure 13) you can find an example of a custom component that will show a 5-star rating system.

📘

This example uses custom styles and fonts

🚧

Talkdesk utilizes ReactJS and its state management system to compile the code.

Please note that certain HTML functionalities may not work correctly.

If you need to modify properties like checked, please use the ReactJS compatible property defaultChecked instead.

For setting the value to be saved in the variable, Talkdesk exclusively employs the Form.setValue method.

<style>{`
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
fieldset, label { margin: 0; padding: 10px 0 0 0; }
.rating { border: none; display: flex; flex-direction: row-reverse; justify-content: flex-end;}
.rating > input { display:none; } 
.rating > label::before {margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\\f005";}
.rating > .half::before { content: "\\f089"; position: absolute;}
.rating > label { color: #ddd; float: right; cursor: pointer;}
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
`}
</style>
<fieldset className="rating">
    <input defaultChecked={Field.getDefaultValue() === "5"} type="radio" id="star5" name="rating" value="5" onClick={() => { Field.setValue(5)}} /><label className="full" for="star5" title="Awesome - 5 stars"></label>
    <input defaultChecked={Field.getDefaultValue() === "4"} type="radio" id="star4" name="rating" value="4" onClick={() => { Field.setValue(4)}} /><label className="full" for="star4" title="Pretty good - 4 stars"></label>
    <input defaultChecked={Field.getDefaultValue() === "3"} type="radio" id="star3" name="rating" value="3" onClick={() => { Field.setValue(3)}} /><label className="full" for="star3" title="Meh - 3 stars"></label>
    <input defaultChecked={Field.getDefaultValue() === "2"} type="radio" id="star2" name="rating" value="2" onClick={() => { Field.setValue(2)}} /><label className="full" for="star2" title="Kinda bad - 2 stars"></label>
    <input defaultChecked={Field.getDefaultValue() === "1"} type="radio" id="star1" name="rating" value="1" onClick={() => { Field.setValue(1)}} /><label className="full" for="star1" title="No good - 1 star"></label>
</fieldset>

Troubleshooting

If you have questions or technical issues, please open a ticket using this form.