Add a survey element or form

Survey and form elements collect answers from visitors. Survey elements, such as Short answer and NPS, collect feedback for surveys. Form elements, such as Dropdown and Checkbox, collect input for forms, including dates, times, and toggles. A single form can combine elements from both groups, and a Button element submits the answers. The answers matter because you act on them. A newsletter sign-up needs an address that works, and a survey needs answers you can compare. The Widget Studio lets you check each answer against a rule, and it can show or hide other elements based on the answer.

​

Survey elements

Survey elements appear under the Survey section in the Add element panel.

• Button: Submits the survey when a visitor clicks it. Choose A button is clicked under When is the survey submitted? to use it as the trigger.
• Short answer: Collects short textual input from visitors.
• Long answer: Collects longer, open-ended feedback.
• Multiple choice: Includes support for checkboxes, single or multiple selection, optional “Other” field, and answer randomization.
• NPS: Gathers Net Promoter Score data with optional follow-up questions.
• Scale: Renders a scale using emojis, stars, hearts, or numbers.
• Hidden input: An invisible form field used to store metadata submitted with the form but not displayed to the user.

Each element is configurable using dedicated settings and styling options in the Widget Studio.

​

Form elements

The Form section contains these elements:

• Input: A fully customizable text input that can collect string data from visitors.
• Date: A field that requests a date from visitors. Visitors click it to open a date picker panel.
• Time: A field that requests a time from visitors. Visitors click it to open a time selection panel.
• Toggle: A toggle with two possible states, for example ON and OFF.
• Checkbox: A checkbox to which you can add a Text element.
• Radio button: A radio button to which you can add a Text element.
• Dropdown: A fully customizable dropdown where you can add selectable options.
• Text area: A fully customizable text box with a placeholder.
• Range input: A fully editable slider that lets visitors select a value within a range.
• Error message: A text field that displays a specific message when the form has an error.
• Multi step form

Use Form elements when your form needs a date, a time, or a toggle. The Survey section has no element for those fields.

​

Configure survey elements

Select a survey element on the canvas to open its settings.

​

Button

​

General settings

• Button text:
  • Enter your button’s text in the text field.
  • Use the buttons in front of the text field to:
    • Edit your text with AI.
    • Access styling options.
    • Edit your text’s font.
    • Change your text’s alignment.
    • Edit your text’s color.
    • Add an emoji.
  • Click the three-dots menu to:
    • Remove formatting.
    • Expand the text editor.
• Style: Change the button’s background type and color.
• Animation: Select an entrance or exit animation for your button.

​

Advanced settings

In Advanced Settings, you can define:

• Default state: Whether the button appears by default.

• Redirection URL: The URL where the button redirects visitors.
• Open in new tab: Toggle whether the redirection URL opens in a new tab.

​

Design

Two tabs appear in the Design menu: General and Style.

General

In the General tab, you can define:

• Alignment: Change the button’s alignment.
• Reposition and resize: You can position your button on the X and Y axes or define its width and height in pixels or percentage.
  • Click Activate translate settings to access translation options. You can translate your button from its current X or Y axis position by a defined amount in pixels or percentage.
• Devices synchronization: Select a device and choose how the button synchronizes with other devices.
  • Fully synchronized: The button synchronizes all its properties with the leader device.
  • Partially synchronized: The button synchronizes all its properties with the leader device, unless you change a property on another device.
  • No synchronization: The button doesn’t synchronize any properties with the leader device. Define the button’s properties on this device separately.
  • Hide: The button doesn’t appear on the device.
• Padding: Add padding between the button’s borders and its text.
• CSS and classes: Add CSS and classes to style your button.

Style

In the Style tab, you can define:

• State: Options are enabled, hover, or off.
• Text: Determine the text’s line height and apply any desired transformations.
• Background: Change the button’s background type or color.
• Border: Add a border around all sides of the button or a custom border.
• Shadow: Add a shadow and edit its color or position.

​

Short answer and long answer

​

General settings

• Label/Question: The main prompt/question.
• Placeholder (optional): Text displayed before visitor input; disappears when the visitor starts typing.
• Pre-filled value (optional): Inserts a predefined response into the field.
• Default state: Determines whether the field is on or off when it loads.

​

Advanced settings

• Label position: Position the label in front of or behind the input field.
• Character limit: Maximum number of characters allowed.
• Make required: Requires visitors to answer the question before they submit. A * is automatically appended to the label. Enabling Make required reveals the Validation rule section, allowing you to define additional input constraints.
• Validation rule: Checks the answer against a rule, such as Not empty or Length. For every option and how it works, see Validate Short answer input.
• Error message: Custom message shown when validation fails. Configure the style of the error message in Design > Answers by selecting the Invalid state.

​

Multiple choice

​

General settings

• Question: The question text shown in front of the answers.
• Answers: Add, remove, or reorder the answer choices. Click Add an answer to create more options.

​

Advanced settings

• Multiple selection: Allow visitors to select more than one answer. If off, visitors can select only one answer.
• Add “Other”: Adds an open-ended text input labeled “Other” so visitors can write a custom answer.
• Randomize answers: Randomly shuffles the order of the listed answers for each visitor to reduce selection bias.
• Make required: If enabled, visitors must select at least one response to submit the survey. A * is automatically appended after the question label (same style as Question in the Design tab).

​

Scale

​

General settings

• Scale type: Emojis, Stars, Hearts, or Numbers.
• Scale item count: Number of values on the scale (for example, 1-5).
• Question: The main prompt.

​

Scale labels

• Label position: Show labels in front of the scale items, behind them, or hide labels.
• You can customize labels for each scale item.

​

Advanced settings

• Make required: Require visitors to respond before submission.

​

NPS

​

Question structure

• The NPS question wording is partially fixed for standardization. You can edit only portions of the question. To change the language, go to the Translation tab and set a default language.

​

Fields

• How likely are you to recommend (X) to (Y)?
  • You can edit the product/service and target fields.
• Follow-up question (optional):
  • Show to All users or only to:
    • Promoters (score 9-10)
    • Passives (score 7-8)
    • Detractors (score 0-6)
  • Allows conditional follow-up content.
• Make required: Mark only the initial NPS score as required. The follow-up question is always optional.

​

Configure form elements

Select a form element on the canvas to open its settings. Form elements have two tabs: General and States. The General tab holds the settings for the element. For a Dropdown, it includes Initial state, Required, and Placeholder. The States tab sets the styles for each state of the element, such as the default state. For a Dropdown, it includes font, background color, border, shadow, and accessibility styles.

​

Collect survey data

You can collect survey data in Kameleoon, where you can export it in .csv format, or send it to an external service through an HTTP request. Configure collection in the Survey Settings tab.

1. Open the Survey Settings tab in the Content panel.
2. Turn on Collect survey data.
3. Under When is the survey submitted?, select when responses are sent. Select A button is clicked and choose the button element, or select The widget is closed or An answer is clicked.
4. Under How are responses collected?, select Kameleoon to store responses in Kameleoon, or select Externally (HTTP Request) to send them to a URL.
5. If you selected Externally (HTTP Request), enter a Request name, select a Method (GET or POST), enter the Action URL, and optionally click Add header request to add a header.
6. Click Save.

To export responses from Kameleoon, see Survey data export. To send responses to a spreadsheet, see Send survey responses to Google Sheets.

​

Build a newsletter form

The Widget Studio includes Newsletter templates that you can start from. To build a newsletter form from scratch, add its elements in this order.

1. Click Add element and select Short answer in the Survey section. Use it for the email address.
2. Click Add element and select Dropdown in the Form section.
3. In the Dropdown settings, click +Add option and enter Latest products.

4. Click Add element and select a second Dropdown. In the left sidebar, hide the second dropdown until a visitor selects Latest products. To configure the event that shows it, see Add conditional logic.

5. Click Add element and select Checkbox in the Form section. Use it for the terms and conditions.
6. Click Add element and select Button in the Survey section to submit the form.

Then, set the rules that check the answers. See Validate Short answer input.