This is the builder that you'll use to create your Custom LLM form. The builder is separated into two sections that will help you build and edit your form based on your project's requirements. These sections are the Form UI builder and the Custom LLM code editor. Read on below to learn more about the builder's process.

Form UI builder

In this section, you can begin to build the base structure of your form. Here's how it works:

There is a list of components you can use, each with their own properties that you can edit and manage. These components are laid out in the left panel.
You can add as many of them as you need onto your canvas, which is the middle section of the builder.
Each component's properties can be viewed and edited in the right panel when selected.

Below, we have listed every component and their corresponding properties, as well as all the information you need to know about them.

Components

You can use these components to build and customize your form the way you want to. Every component has a list of properties that allow you to fine-tune the use of it.

All components have an ID property that provides an automatically generated ID. This ID can be used to identify the component when calling it or editing its function in the code editor. This field is editable and required, it can't be left blank, and it must be unique.

On the right side of every component are two buttons that allow you to Delete or Copy a component.

Button

This button is a simple component that can be programmed to respond in any given way when clicked.

Properties:

Button Text: The text that is displayed on the button.
Primary/Secondary: Two color options that you can choose to determined whether the button takes on a primary or secondary color.

Input

This field can be used for any case (name, email, etc.) and can be further edited by label, placeholder and more.

Properties:

Label: This is the text to be displayed above the input field.
Placeholder: This is the text that will show in the input field before anything is typed in.
Is required: Checking this box defines whether or not this field is required. If the input field is required, it must be filled before the item's status can be changed to Quality Check or Complete.
Hidden: Checking this box will hide the component from the form. The component's data will still be visible in the JSON.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Text Box

This is a text box that gives the user a large area to input text into. This can be used for cases where longer/bigger answers are required.

Properties:

Label: This is the text to be displayed above the text field.
Placeholder: This is the text that will show in the text field before anything is typed in.
Is required: Checking this box defines whether or not this field is required. If the text field is required, it must be filled before the item's status can be changed to Quality Check or Complete.
Hidden: Checking this box will hide the component from the form. The component's data will still be visible in the JSON.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Number

This is a numeric input field. The number entered here can be increased or decreased by using the arrows on the right side of the input field.

Properties:

Label: This is the text to be displayed above the numeric field.
Min Value: Set a minimum value for the numeric input.
Max Value: Set a maximum value for the numeric input.
Step: This indicates the number by which the numeric value increases or decreases using the arrows.
Is required: Checking this box defines whether or not this field is required. If the numeric field is required, it must be entered before the item's status can be changed to Quality Check or Complete.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Code

This is a code component that allows the user to write or edit any kind of code. If you type in a default code block, it can later be edited when viewed in the form.

Properties:

Label: This is the text to be displayed above the code field.
Is required: Checking this box defines whether or not this field is required. If the code field is required, it must be filled before the item's status can be changed to Quality Check or Complete.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Slider

This slider can be used to set a range between two numbers.

Properties:

Label: This is the text to be displayed above the slider.
Min Value: Set a minimum value for the slider.
Max Value: Set a maximum value for the slider.
Step: This indicates the value by which the number increases when using the slider.
Suffix: This allows you to add #, % or $ at the end of the number.
Slider / Range Slider: This is a single selection option. Slider allows you to drag the slider from left to right to select a number between the min-max range. Range Slider allows you to drag the slider from either side to place a range within the min-max range.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Radio

This component provides text label to input a name, sentence or question, as well as a list of single selection options.

Properties:

Label: This is the text to be displayed above the options.
Is required: Checking this box defines whether or not this component is required. If the component is required, an option must be selected before the item's status can be changed to Quality Check or Complete.
Options: This is the list of options you can provide as the single selection responses. Here, the field of each option can be edited. You can use the reorder ⋮⋮ button to click and drag the options into any order. When you click the radio selection of an option, that option will be selected by default when the form is created.
+ Add option: Clicking this will add another option. You can find the delete button on the right side.
Reset defaults: If you have an option selected as the default, this will reset the selection.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Checkbox

This component provides text label to input a name, sentence or question, as well as a list of multiple selection options.

Properties:

Label: This is the text to be displayed above the options.
Is required: Checking this box defines whether or not this component is required. If the component is required, at least one option must be selected before the item's status can be changed to Quality Check or Complete.
Options: This is the list of options you can provide as the multiple selection responses. Here, the field of each option can be edited. You can use the reorder ⋮⋮ button to click and drag the options into any order. When you click the checkbox of an option, that option will be selected by default when the form is created. This can be done with multiple options at once.
+ Add option: Clicking this will add another option. You can find the delete button on the right side.
Reset defaults: If you have one or multiple options selected as the default, this will reset the selection.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Rating

This component allows you to add a rating to your form.

Properties:

Label: This is the name of your rating component.
Number of stars: Set a number of stars to show in the component (between 5 - 10).
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Approve / Disapprove

With this component, you can add an approval response.

Property:

Label: This is the text to be displayed above the buttons.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Select

This allows you to add a dropdown menu to your form. The setup is similar to the Radio and Checkbox components.

Properties:

Label: This is the text to be displayed above the dropdown menu.
Placeholder: This is the text that will show in the input field before anything is selected.
Is required: Checking this box defines whether or not this component is required. If the component is required, at least one option must be selected before the item's status can be changed to Quality Check or Complete.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.
Is multi-select: This is a checkbox that denotes whether or not this component is required. If the component is required, at least one option must be selected before the item's status can be changed to Quality Check or Complete.
Options: This is the list of options you can provide as the selection responses. Here, the field of each option can be edited. You can use the reorder ⋮⋮ button to click and drag the options into any order. When you click the checkbox of an option, that option will be selected by default when the form is created. If Is multi-select has been checked, this can be done with multiple options at once.
+ Add option: Clicking this will add another option. You can find the delete button on the right side.
Reset defaults: If you have one or multiple options selected as the default, this will reset the selection.

Date & Time

This component allows you to choose a specific time or date. By default, the time input is not visible, but this can be switched on.

Properties:

Label: This is the text to be displayed above the date and time.
Is required: Checking this box defines whether or not this component is required. If the component is required, it must be filled in before the item's status can be changed to Quality Check or Complete.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.
Time enabled: Checking this box will show the time field alongside the date field.

Paragraph

With this component, you can have a paragraph of text on your form, with or without a label.

Properties:

Label: This is the text to be displayed above the paragraph.
Text: This is a text input field that can be written in during the form building. It will be shown as a block of text on the form.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Image

This is an image component. It displays any image, whether you provide the source for it or if the user uploads one.

Properties:

Label: This is the text to be displayed above the image.
Source URL: Here you can input the source URL of the image you want to place in your form. Alternatively, you may leave this field empty so that the component can instead display an image uploaded to the form by the user. This'll have to be configured through the code editor and can be associated by the actions of another component.
Alt text: The alternate text that goes with the image. It will show as a placeholder in case the image does not load.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Video

This is a video component. It displays any video, whether you provide the source for it or if the user uploads one.

Properties:

Label: This is the text to be displayed above the video.
Source URL: Here you can input the source URL of the video you want to place in your form. Alternatively, you may leave this field empty so that the component can instead display a video uploaded to the form by the user. This'll have to be configured through the code editor and can be associated by the actions of another component.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Audio

This is an audio component. It displays any audio clip, whether you provide the source for it or if the user uploads one.

Properties:

Label: This is the text to be displayed above the audio clip.
Source URL: Here you can input the source URL of the audio clip you want to place in your form. Alternatively, you may leave this field empty so that the component can instead display an audio clip uploaded to the form by the user. This'll have to be configured through the code editor and can be associated by the actions of another component.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Avatar

This component is an avatar icon display.

Properties:

Label: This is the text to be displayed above the avatar.
Source URL: Here you can input the source URL of the image you want to place in your avatar icon. Alternatively, you may leave this field empty so that the component can instead display an avatar uploaded to the form by the user. This'll have to be configured through the code editor and can be associated by the actions of another component.
Alt text: The alternate text that goes with the avatar. It will show as a placeholder in case the avatar does not load.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

CSV

This component allows you to display editable CSV grids in your forms.

Properties:

Label:
Value: This field is where you type in all the data you want to include in your CSV grid. You can use the Delimiter to separate columns, and each new line in this field creates a new row.
Delimiter: This is where you can select what symbol to use to divide your data into columns.
Exclude from annotation: This will exclude the component from being added into the form JSON upon download.

Group

This component allows you to group multiple components together. This is useful for if you need to refer to a selection of components using one ID.

Properties:

Is template: This makes your component a template that you can later duplicate through your code and render into your form.
Show delete icon: This will display a small delete button that will remove the component from the generated form.

Grid

With this component, you can line multiple components up beside one another rather than stack them vertically.

Properties:

Columns: This section lets you choose how many columns you want to have on one row. Each column can fit one component into it. You can change the size of the column by adjusting the value.

Tabs

This component allows you to fill separate tabs with multiple components of your choice. This is useful if you want to separate different parts of your form into separate tabs.

Properties:

Tabs: This is the list of tabs visible in the component. Here, the field of each tab can be edited. You can use the reorder ⋮⋮ button to click and drag the tabs into any order.
+ Add tab: Clicking this will add another tab. You can find the delete button on the right side.

Upload/Download JSON

You can upload or download a JSON file of your form. This gives you the chance to save the layout and function of any given form and then upload it into other projects with the same format. The JSON will maintain the general layout of your form, the generated code and all code changes you have made.

Save as draft

By clicking Save as draft, you save all the changes you've made to a form without publishing it into your project. When you go to create a form in the same project, it will bring back your saved draft unchanged.

Custom LLM code editor

Once you've created the UI structure of your form, the next step is to edit and set up the functionality behind it. You can do so through the code editor. Learn more.