Form Builder

ComponentTypeDescription
imgForm Builder🚩 triggerBuild online forms to collect data
note

There is a lot of documentation for the form builder - be sure to use the navigation menu on the right to find what you need. If you can't find the answer you are looking for, contact us via the live chat or via support@workflow86.com.

Configuring questions#

Inserting a question#

To insert a question, simply click and drag the question type you want to insert and drop it into form.

img

Editing a question#

To edit a question, hover over the question and click the edit button on the right hand side of the question.

img

This will open up the configuration dialog for that question.

img

Deleting a question#

To delete a question, hover over the question and click the delete button on the right hand side of the question.

img

Duplicating a question#

To duplicate a question, hover over the question and click the copy button on the right hand side of the question.

img

note

Duplicating a question creates an exact copy of everything in that question, including any advanced settings configurations, except the placeholder. A duplicated question is always created with a new placeholder.

Configuring pages#

To create a new page in the form, drag and drop the "Page Break" from the questions menu into the desired location.

img

Deleting pages#

To delete a page, click the page settings button on the top right

img

When deleting a page, you can choose to either delete all the questions on that page, or delete the page but move all the questions to the preview page.

Basic question settings#

The form builder allows you to create an online form to collect information from users. It acts as one of the trigger points for a workflow, with a workflow starting when a form is submitted.

Placeholder (previously "Key")#

The placeholder is how the answer to the question will be represented as a variable.

All questions are auto-assigned a placeholder value when they are first inserted into the form (e.g."ShortText84008041"), but you can change this to whatever term you want. You can only use letters and numbers in your placeholders.

img

Question text#

The text entered here is displayed as the question text for that question.

Description#

The description appears below the question text. You can use this to provide further details about the question.

Advanced Settings#

Each question has advanced setting which allow you to control how the user interacts with the question and how it behaves in response to certain events. In these settings, you can control the visibility of the question, whether it must be answered or not, whether the question is read-only, predetermine the answer to the question based on other questions or inputs, and add a comment field to the question.

img

Visibility#

This field allows you to control whether and when a question is visible or hidden to the user.

On#

By default, all questions have their visibility set to on.

Off#

This renders the question hidden.

warning

If a question is hidden and is also required, this will prevent the user from progressing further in a form.

Conditional#

This allows you to set up a conditional logic statement to make the question visible or hidden. For example, you can set a question to be visible based on the answer to another question.

Required#

This field toggles whether the question must be answered by the user.

Off (default)#

By default, all questions are created with the required field switched off. This means the user does not have to answer the question before continuing or submitting the form.

On#

When switched on, the user will be prevented from continuing onto the next page or submitting the form until an answer is entered.

Conditional#

This allows you to set up a conditional logic statement to determine whether the question must be answered or does not need to be answered. You can reference the answers to other questions and evaluate them to turn the required status on or off e.g. If the answer to Question 1is β€œYes” then Question 2 must be answered, otherwise it does not need to be answered.

Predetermine the answer#

This feature allows you to per-determine the answer to a question.

Off (default)#

This is the default state for this feature. It means there is no predetermined answer to the question, whatever the user selects or types is the answer.

On#

When turned on, a small textbox will appear. You can type in the predetermined answer you want to set for this question. When the user views the question, they will see this answer already typed in or selected.

img

note

To configure a predetermined answer for a select-type question (such as a single choice, dropdown or checkbox) where you have set an answer choice and an answer value, you will need to type in the answer value for a question option (and NOT the answer choice).

If the answer to a select-type question has a answer choice β€œOption A” and a answer value of β€œA”, to have this be the predetermined answer, you will type "A" amd NOT β€œOption A” into the text field.

Click here for more details

Note that the user can edit and change this predetermined answer. If you do not want them to be able to change the predetermined answer, set read-only state of the question to ON.

Conditional#

This setting allows you to create a conditional logic statement to determine the answer to the question. You can use the answers to previous questions to set up this conditional logic state e.g. If the answer to Question 1 is β€œA” then the answer to this question will be β€œB”

Comments#

You can allow users to add a comment to any question field by turning on the comments field. This will add an β€œAdd Comment” button at the bottom of the question.

Off (default)#

By default, the comment feature is turned off.

On#

When the comment feature is turned on, a textbox will appear beneath a question where the user can type in comments. Anything typed inside of the textbox for a question will be exported as {label.comment}.

img

The comment feature is useful when you need to collect additional contextual information about the user’s answer to a question.

This is what the comment box looks like on the form the user will see

img

Read Only#

This setting allows you to make a question read-only, preventing the user from interacting with the question. This feature is typically combined with the predetermine the answer feature.

Off (default)#

The default state for this feature is off, meaning that the user can interact with the question, type in or select an answer.

On#

When turned on, the user will not be able to type or select an answer to the question. Note that you should exercise caution in turning on the read only state with the required state also on - this may result in the answer being prevented from progressing or submitting a form and being unable to answer the question that is blocking them.

Conditional#

This allows you to construct a conditional logic statement to control whether the read only state is on or off.

Answer choices and answer values#

Select type questions (single choice, dropdown, checkbox) allow you to configure an answer choice and a separate answer value.

The answer choice is what is displayed to the user in the form.

img

The answer value is an optional field that allows you to set a separate value to be outputted when the user selects an answer choice.

img

For example, the answer choice displayed to the user might be "Yes" and "No", but the value that you would like to be outputted into the workflow is 1 and 0.

img

The answer value is an optional field, so you can leave it blank. If it is left blank, the output of the question will be the answer choice.

note

In any conditional logic statements or in the predetermine the answer feature, it is the answer value (and NOT the answer choice) that needs to be used.

⭐ New feature#

Get answer values from database#

For Select Type questions, you can set the answer options via the column of a database. For example, say you have a database with two columns like this:

img

You want to create a question where the answer options are taken directly from the Name column in the database like this:

img

You can do this by choosing the set answer options "from a database":

img

Then select the database, the column that will contain the answer options and the column that will contain the answer values. This enables you to display one column as the answer options, but have the value of returned (i.e. the value of the placeholder) actually be from another column.

img

Get answer option and answer value from same column#

If we want the answer options to be the names and the value returned to also be the name, we select the name column for both. In this case, when the user selects Bob Smith, it will return Bob Smith.

img

img

Get answer option and answer value from different columns#

However, you can also have the answer return the value from the email column while keeping the answer options that the user sees and selects as the name. In this case, when the user selects Bob Smith, the value of the placeholder for this question will be "bob123@email.com"

img

img

You can use this feature to, for example, expose a certain column for the user to select but return the Record ID for that column (which can then be passed to the Update Database Record component)

Note that as new records are added to the database, they will also appear as additional options for this question as well:

img

img

Previewing a form#

To preview a form you are building, press the "Preview" button in the toolbar above your form.

img

Before the form preview is opened, the current form will be saved, and the form preview will then open in a new tab.

img

The form preview has all the functionality of a normal form, with the exception that it cannot be saved or submitted. You can use the form preview to see the layout of the form you have built and test any advanced functionality you have configured such as visibility and predetermined answers.

Saving a form#

Clicking the save button in the top right hand corner will save the current state of the form.

img

When you click save, a small dialog will appear to confirm that the form has been saved.

img

⭐ New feature#

Linking forms and pages#

When a form is submitted, you can set it to automatically redirect to another form in the same web session. This means once the user submits the form, they will be automatically redirected to the next form without having to manually retrieve a link to the second form from their email or My Tasks page.

Take the following workflow as an example:

img

Once the user has submitted "Linked forms on-boarding part 1", we want to automatically redirect them to the "Linked forms on-boarding part 2". We can achieve this by linking these two components together.

Setting up a link#

Click the bar at the bottom of the form, or click Form Settings button to bring up the form settings:

img

For the option which sets what happens after the form is submitted, select "redirect to another page":

img

Then select the component that you want to redirect to after the form is submitted.

img

Once this has been set, the form will now redirect when it is submitted:

img

Once the first form has been submitted, a loading screen will be displayed and the user will then be redirected to the next form once that linked form has been generated:

img

img

img

Combining linked forms with conditional workflow#

In the example below, we want to set the "Linked forms on-boarding part 2" to redirect to one of two possible options: "Linked forms on-boarding part 3A" or "Linked forms on-boarding part 3B". Which form it will be redirected to will depend on which path gets executed based on the Conditional Workflow.

img

To set this, we simply select both "Linked forms on-boarding part 3A" and "Linked forms on-boarding part 3B" in the form settings:

img

The form will then redirect to whichever of the two selected forms gets generated when the form runs.

Form Questions#

Short Text#

The short text question captures short and single text answers.

img

Long Text#

The long textfield works like the long textfield, but provides a larger textfield to accommodate longer text. Use this to provide the user more space to enter in longer text answers which may contain paragraphs

img

Number Input#

The number input question captures numerical data only. Use this when you need the user to only enter numbers and nothing else.

img

Content Block#

The content block component allows you to insert rich text content with images, hyperlinks and other formatting via the ric text editor.

img

Radio Button#

The radio button question allows users to select one option from the list of answers.

img

important

When setting up a this question, take note of the difference between the answer choice and the answer choice. The answer choice is what is displayed to the user, and the answer value is what is exported to the workflow. Click here for more details.

Dropdown#

The dropdown question allows users to select a single option from a dropdown list. The dropdown list is also searchable, meaning it works well for questions where the list of answers can be very long.

img

important

When setting up a this question, take note of the difference between the answer choice and the answer choice. The answer choice is what is displayed to the user, and the answer value is what is exported to the workflow. Click here for more details.

Checkbox#

The checkbox component allows users to select multiple options from the list of answers. The output of the checkbox question is a list of all the options selected e.g. [Option A, Option B]

img

important

When setting up a this question, take note of the difference between the answer choice and the answer choice. The answer choice is what is displayed to the user, and the answer value is what is exported to the workflow. Click here for more details.

List#

The list question type allows users to type in multiple values which are then exported as a list. In the example below, the output would be [John, James, Jane, Adam]

img

You can set the number of entries to the list, including setting a maximum number of entries, a minimum number of entries or both.

img

Calendar#

The calendar question type allows users to input a date from a calendar.

You can set the number of entries to the list, including setting a maximum number of entries, a minimum number of entries or both.

img

The output of the calendar question can be either date only or date and time. If you select a date format without a time, then the calendar question will only allow users to select a date. If you select a date format with a time, the user will be able to select a date and then select a time as well.

img

You can set the date format as well as the timezone of the date to be exported. If no timezone is selected, it will default to UTC+08:00

img

Upload Media#

The upload media question allows users to upload a file.

img

The uploaded file will be stored in the ➑ file library, which is accessible via the canvas

Map#

The map question type allows users to select a location on an interactive map. The output of this question is the latitude and longitude values of the location selected

img

Component Settings#

The component settings can be accessed by clicking the settings icon in the top right corner of the screen:

img

Changing format of the formSubmittedDate timestamp#

You can change the format of the formSubmittedDate timestamp via the component settings.

img

Styling#

You can customise the styling of the form by setting a logo and a cover image.

Setting a cover image#

To set a cover image that appears at the top of the form, click Styling, and then upload an image. You will need to crop the image displayed to the required aspect ratio.

img

Click save to set the image as the cover image.

img

Setting a logo#

The logo for a form is displayed in the top left of the top header bar.

img

To set the logo, click Styling and then upload your logo.

img

Form Settings#

Access the form settings via the "Settings" button on top of the form builder.

img

This will bring you to the form settings dialog

img

Submission message#

You can specify the message that is displayed to the user once they have submitted a form here.

img

This message appears here, below the session ID

img

Edit their response after submitting#

Turn this on to allow users to view, edit and resubmit their response after they have submitted the form. If this is turned off, users will be prevented from viewing or editing the form they have already submitted.

note

Re-submitting an existing form session will trigger a new workflow session.

Start a new submission after submitting#

Turn this on to allow users to start a new submission after they have submitted the form. This will return them to the start page of the form.

Read-only after submission#

When this is turned on, the form will enter a read-only state after being submitted. The form and the answers inside of it can still be viewed via the form session URL, but it cannot be edited or resubmitted.

img