Skip to main content
Conditional logic shows an element or screen only when a visitor’s answer makes it relevant. A form that asks every visitor every question makes most visitors answer questions that don’t apply to them, and it makes the form longer than it needs to be. For example, a visitor who wants the latest products has no reason to pick a blog topic. A second dropdown that appears after the first choice collects the one detail you need, and only from the visitors who need to give it.

How conditional logic works

Every conditional rule is a Survey event in the Events section of the Widget Studio. The Survey event type handles survey values and form values alike, so a Dropdown from the Form section and a Short answer from the Survey section both work as conditions. Each event has two parts:
  • Condition: The answer that triggers the event, such as a specific dropdown option.
  • Action: What Kameleoon does when the condition is met, such as showing a hidden element.
The action shows an element, so that element starts hidden. Otherwise the event has nothing to change.

Show a second dropdown after a visitor’s choice

Use conditional logic when a follow-up question applies to only some answers. Suppose your newsletter form asks visitors to choose Latest products or Blog updates. Only visitors who choose Latest products need to pick a product category, so the second dropdown appears only in that case.
Dropdown settings panel with Initial state Enabled, Required on, and the options Latest Products and Blog Updates
The second dropdown offers All products, Clothes, and Shoes.
Dropdown settings panel with Initial state Enabled, Required on, and the options All Products, Clothes, and Shoes
To show the second dropdown only when a visitor selects Latest products, follow these steps:
  1. Hover over the second dropdown in the Elements list, click its three-dots menu, and click Hide. The dropdown stays hidden until the event runs.
  2. Click Events in the left sidebar, then click Add event.
  3. Select Survey, and click Next.
  4. Under If the value for, select the first dropdown.
  5. Under is, select Latest products.
New survey event with the condition If the value for Dropdown, and the value list showing Latest products
  1. Under Actions, select Show an element, and choose the second dropdown.
  2. Click Save event.
When a visitor selects Latest products, the second dropdown appears. Visitors who select Blog updates don’t trigger the event, so the second dropdown stays hidden for them.
Animated Stay up to date! pop-in with an email field, a dropdown reading Please choose an option, and a disabled Subscribe button

Show a screen based on an NPS score

Use conditional logic on a survey to change what visitors see after they answer. Suppose you’ve built a multi-step NPS survey and want to customize the experience based on the visitor’s score. If a visitor gives a score from 0 to 6 (a Detractor), you might want to display a follow-up question asking for more feedback. If the score is 7 to 10 (a Passive or Promoter), you can skip straight to a thank-you message. In the following example, the survey consists of two screens:
  • Screen 1: The NPS score question (0-10). For Detractors (scores 0 to 6), a follow-up open text field asks for the main reason behind the score.
  • Screen 2: A confirmation screen (“Thank you for your feedback!”).

Set up the survey screens

In the Widget Studio, create both screens:
  • Screen 1 with the NPS element
  • Screen 2 with a confirmation message
Screen 1 with the NPS score question
Screen 2 shows the confirmation message that visitors see after they answer.
Screen 2 with the Thank you for your feedback! message
Ensure Screen 1 is the default screen.

Ask a follow-up question to Detractors

  1. Select the NPS element.
  2. In the Settings tab, under Follow-up question, select Detractors.
NPS element settings with the follow-up question set to Detractors (0-6 score) and a survey pop-up preview showing the follow-up text field

Add a conditional logic event for Passives and Promoters

  1. Click Events in the left sidebar, then click Add event.
  2. In the Create new event panel, select Survey as the event type.
Create new event dialog with Click, URL, Display, Survey, Language, and Timer options and the Survey option selected
  1. Under If the value for, select NPS.
  2. Under matches, select Passives and Promoters.
New survey event Conditions box with the condition NPS matches Passives and Promoters
  1. Then, define the action. Click Add action > Show a screen.
  2. Select Thank you, the screen that shows the confirmation message.
Actions section of an event with Show a screen selected and Thank you chosen as the screen
  1. Define a second action: Hide an element, and select Screen 1.
This setup shows the confirmation screen to visitors who score 7 to 10.

Check the final logic

The configured logic works as follows:
  1. The widget always shows Screen 1 first.
  2. If the score is between 0 and 6, the widget shows the follow-up question.
  3. If the score is between 7 and 10, the event hides Screen 1 and shows Screen 2.
Only Detractors see the follow-up question. Other visitors skip it.

Other conditions

Survey events also work with Short answer fields. Choose matches validation rule or doesn’t match validation rule as the condition to show a message when an entry fails a rule. To set up that message, see Validate Short answer input.