Advanced Form Building - Logic and Conditionals

Why add logic and branching to your form?

The standard form building functionality is more than adequate for most use cases. Most forms can be created with a singular, linear question flow comprised of optional and mandatory questions of various types, such as radio, multi-select and single answer. However, if you want to personalize the form experience and qualify leads through your forms as efficiently as possible, then form logic and branching is the way to do this.

Here’s a structured overview of all logic and branching capabilities available in our form builder, beginning with the conditional functions

1. Conditional Logic

Conditional logic also sometimes referred to as display logic, is a feature that allows you to dynamically show or hide certain form fields or sections based on predefined conditions. Instead of displaying all questions or options at once, display logic enables the form content to adapt in real-time according to the user's input and show only relevant information. This makes the form more user-friendly and ensures that users can complete it more efficiently.

Every element you add to your Productised form is automatically assigned an ID. This ID is not visible to respondents and is used in various form configurations, including display logic setup. By using element IDs, you can configure display/conditional logic on any form page, section, input field, or choice option.

You can change the question ID in the General settings of a question by entering a new value in the Question name property.

Similar properties are used to set an ID for a page or panel (a container element that allows you to group and manage several questions together): Page name and Panel name.

Choice options in single- and multi-select questions (Radio Button Group, Dropdown, Ranking, etc.) use the Value property to specify option IDs. To update the default choice option ID, select the question, and under Choice Options, enter a new ID in the left column. The right column values serve as display values that are visible to respondents.

Certain multiple entry questions, such as Multiple Textboxes, use items instead of choice options. In order to manage the visibility of individual items or use them as trigger elements, item IDs are used. To change a default item ID, select the question, locate the Items table, and enter a new item ID in the Name column on the left.

If you want to manually enter conditional rules and expressions that define display logic, make sure to use curly brackets for referencing the question ID whose value you want to access and use as a trigger element, e.g., {nationality} = 'United States', where nationality is a trigger question ID. Similarly, by appending a path to the value, you can access and use as a trigger a specific question item: {contact-details.email} notempty, where contact-details is a question ID to which an item belongs and email is the ID of the item itself. Otherwise, use the graphical user interface (GUI) described below to set up your display logic without manual entry.

Conditional visibility determines whether an input field, choice option, section, or the entire page of your form is displayed to the user based on specified conditions. For instance, in an online shopping checkout form, additional shipping address fields might only become visible if the user selects a different shipping address from their billing address.

Conditional read-only mode logic controls whether a form element is editable or in read-only state based on certain conditions. For example, in a survey form asking about age, the field for "Parent Name" might only be editable if the respondent indicates they are under a certain age.

Page display logic is used to dynamically control the visibility and read-only state of form pages based on predefined conditions that include user input. To set up a display logic on a page, follow these steps:

1. Select the page for which you want to create a conditional rule.
2. Under the Conditions category, locate the Make the page visible if (if you want to conditionally hide the page) or Disable the read-only mode if property (if you want to conditionally restrict page editing).
3. Click the Magic wand icon on the right of the property you want to configure. This action opens a popup with a GUI for setting up display logic.
4. In the popup, select the trigger element ID.
5. Select a condition from the drop-down menu: Empty, Not Empty, Equals, Does not equal, Any of, Greater than, Less than, Greater than or equals to, or Less than or equals to.
6. Type in or select the triggering answer.
7. Click Apply.

In the Productised Form Builder, a section of a form is referred to as a panel. It functions as a container that can be populated with various input fields and other panels to easily manage all nested elements at once. To set up a display logic on a panel, follow these steps:

1. Select the panel for which you want to create a conditional rule.
2. Under the Conditions category, locate the Make the panel visible if (if you want to conditionally hide the panel) or Disable the read-only mode if property (if you want to conditionally restrict panel editing).
3. Click the Magic wand icon on the right of the property you want to configure. This action opens a popup with a GUI for setting up display logic.
4. In the popup, select a trigger element ID.
5. Select a condition from the drop-down menu: Empty, Not Empty, Equals, Does not equal, Any of, Greater than, Less than, Greater than or equals to, or Less than or equals to.
6. Type in or select the triggering answer.
7. Click Apply.

Question display logic allows you to dynamically manage the visibility and read-only state of form questions based on predefined conditions. To configure a display logic for a question, follow the steps below:

1. Select the question or input field for which you want to create a conditional rule.
2. Under the Conditions category, locate the Make the question visible if (if you want to conditionally hide the question) or Disable the read-only mode if property (if you want to conditionally restrict question editing).
3. Click the Magic wand icon on the right of the property you want to configure. This action opens a popup with a GUI for setting up display logic.
4. In the popup, select a trigger element ID.
5. Select a condition from the drop-down menu: Empty, Not Empty, Equals, Does not equal, Any of, Greater than, Less than, Greater than or equals to, or Less than or equals to.
6. Type in or select the triggering answer.
7. Click Apply.

Choice option display logic is used to determine the visibility and read-only state of specific options within a multiple-choice question based on a predefined condition. To set up a display logic on a choice option, do the following:

1. Select a question to which a dependent choice option belongs to.
2. Under the Choice Options category, locate the dependent choice option and click the Pen icon to expand its individual settings.
3. Locate the Make the option visible if (if you want to conditionally hide the option) or Make the option selectable if property (if you want to conditionally disable the option).
4. Click the Magic wand icon on the right of the property you want to configure. This action opens a popup with a GUI for setting up display logic.
5. In the popup, select a trigger element ID.
6. Select a condition from the drop-down menu: Empty, Not Empty, Equals, Does not equal, Any of, Greater than, Less than, Greater than or equals to, or Less than or equals to.
7. Type in or select the triggering answer and click Apply.

In the example below, the trigger element ID is contact-information.phone-number, where contact-information is the ID of the Multiple Textboxes question and phone-number is the ID of its item. The condition specifies that the item should not be empty, which means a user must provide an answer to this item.

The Productised Form Builder features a Conditions section in the Property Grid for all form elements and a dedicated Logic tab. This flexibility allows users with varying technical expertise to easily set up display logic on any form element through a GUI. The Logic tab consolidates all conditional rules created in individual Conditions sections of the Property Grid. Through the Logic tab, you can quickly access and edit existing rules in one centralized location without the need to navigate to specific form elements.

To remove a conditional rule, follow these steps:

1. Navigate to the Logic tab.
2. Locate the conditional rule you want to remove and click the Bin icon that appears as you hover over the rule.

Please Note: The default settings of the form builder do not offer a confirmation message upon deletion. The deleted conditional rule cannot be restored.

To edit a conditional rule, do the following:

1. Navigate to the Logic tab.
2. Locate the conditional rule you want to edit and click the Expand icon that appears as you hover over the rule.
3. Make necessary adjustments.
4. Click Done to save changes.

If you're managing complex conditional rules, you can input them manually. To activate manual entry mode, expand a logic rule and click Manual Entry in the top right corner of the Logic tab.

To check whether the display logic you set up works as intended, navigate to the Preview tab and interact with the form as a user would. Enter or select different responses and observe whether the dependent form elements behave accordingly.

2. Form Branching

Branching logic, also known as branch logic or form branching, refers to the practice of designing forms that allows you to direct respondents along different conditional paths based on their responses to preceding questions. With branching logic in place, your form can automatically skip irrelevant questions, reveal or hide certain sections, or even prompt a respondent to the form completion page. This dynamic approach enables forms to adapt to individual inputs and ensures that respondents are presented with only the most relevant content, thereby increasing completion rates and data accuracy.

For example, consider a customer satisfaction survey for a software product. If a respondent indicates that they are satisfied with the product's performance, branching logic might direct them to a follow-up question asking for additional feedback. However, if the respondent expresses dissatisfaction, the logic might skip the follow-up question and instead prompt them to indicate specific areas of improvement.

Branching Logic vs. Conditional Logic

Branching Logic controls the flow of the form. It decides where the user goes next based on their answers. For example, if someone selects “Not Eligible,” the form can automatically skip them to the end, or show a different page tailored to their situation. Branching is about navigation and survey pathing.

Conditional Logic controls the visibility and behavior of elements within the form. It determines what the user sees or can interact with on the current page. For example, a follow-up question might only appear if the user answered “Yes” earlier, or a field may switch to read-only when a certain condition is met. Conditional logic is about dynamic content and responsiveness.

How They Work Together

When paired, branching and conditional logic create highly personalized and efficient user journeys:

• Use conditional logic to tailor what’s shown on each page (questions, panels, or options).

• Use branching logic to control which page or path the user moves to next.

Together, they ensure users only see relevant content and follow the most efficient path, reducing friction and improving completion rates.

Skip logic is a form of branching that allows respondents to skip certain questions or sections based on their responses to previous questions. For instance, if a respondent indicates they do not own a car, skip logic might bypass questions related to car ownership and proceed to the next relevant section.

Show/hide logic, also known as display logic, involves revealing or concealing specific questions or sections based on predefined conditions. For example, if a respondent selects "Yes" to a question about owning a pet, show/hide logic might display additional questions related to pet ownership while hiding them if the respondent selects "No".

In more complex scenarios, branching logic can direct respondents to the "Thank You" page based on how they responded to a trigger question. For example, if a respondent answers "Yes" to a question about experiencing a particular issue, they might be directed to a follow-up section with more detailed questions about that issue. On the other hand, if they answer "No", they might be directed to the form completion page because all further questions are not relevant to them due to the absence of any encountered issue.

To guide a respondent to a specific question further down the line based on their response to a current question, you can implement an expression-based event called "trigger". When the expression evaluates to true, the trigger initiates an action. One such trigger type is "Skip to question". It takes a respondent to a target question.

To set up branching logic that redirects a respondent to a specific form question, follow these steps:

1. In the top right corner of the Property Grid, select Survey to switch to the configuration settings.
2. Under Conditions, locate a subsection called Triggers and click the Plus icon to add a new trigger.
3. In the trigger drop-down menu, select Skip to question.

4. Click the Pen icon to expand the trigger settings.

5. Use one of the following ways to specify an expression that, when evaluates to true, will take a respondent to the target question (the destination you want to direct a respondent to).

• Enter the expression in the Expression field.
• Click the Magic wand icon to open a popup and build the expression using a GUI. Click Apply when you finish.

6. Select a target question using the drop-down menu of the Question to skip to property.

The simplest way to incorporate branching logic in a form is by displaying certain questions to some of your respondents while hiding them from others based on their answers. This approach is particularly convenient when you need to target specific form elements. With Productised, you can set up display logic on individual questions, sections (in Productised referred to as "panels"), or the entire page.

To create a conditional rule that determines the visibility of a question, panel, or page, do the following:

1. Select the dependent element you want to dynamically hide.
2. Expand its Conditions category in the Property Grid and locate the Make the question/panel/page visible if property.
3. Click the Magic wand icon on the right of the property. This action opens a popup with a GUI for setting up display logic.
4. In the popup, select the trigger element ID (its Question name property value).
5. Select a condition from the drop-down menu: Empty, Not Empty, Equals, Does not equal, Any of, Greater than, Less than, Greater than or equals to, or Less than or equals to.
6. Type in or select the triggering answer.
7. Click Apply.

To automatically complete a form based on a user response, perform the following steps:

1. In the top right corner of the Property Grid, select Survey to switch to the logic configuration settings.
2. Under Conditions, locate a subsection called Triggers and click the Plus icon to add a new trigger.
3. In the trigger drop-down menu, select Complete survey.

4. Click the Pen icon to expand the trigger settings.

5. Use one of the following ways to specify an expression that, when evaluates to true, will activate form completion.

Enter the expression in the Expression field.

Click the Magic wand icon to open a popup and build the expression using a GUI. Click Apply when you finish.

The Productised Form Builder offers a user-friendly Logic tab and Conditions sections within the Property Grid for all form elements. These features allow users with diverse technical expertise to effortlessly configure conditional logic via a graphical user interface (GUI). The Logic tab consolidates all conditional rules created in the individual Conditions sections of the Property Grid. Within the Logic tab, users can implement all available types of form branching, including "Skip to question", "Complete survey", and "Show/Hide question".