> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a survey element or form

> Configure survey and form elements in the Widget Studio, build a newsletter form, and choose where responses are collected.

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.

![Add element panel with the Survey section open, showing Button, Short Answer, Long Answer, Multiple Choice, NPS, Scale, and Hidden input](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-survey-add-element-step-1-zoom2.png)

* **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

![Button element Settings tab with button text, Advanced Settings, Style options, and the button previewed on the canvas](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-csat-nps-and-survey/add-a-survery-element-to-your-widget/button.png)

#### 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.

> [!NOTE]
>
> If you turn off the button and previously activated **Make required** on any survey, the button automatically turns on once visitors respond to all required elements on the same screen.

* **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

![Short Answer element Settings tab with Label, Placeholder, Pre-filled value, and Advanced Settings, with the field previewed on the canvas](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.24.42-1536x914.png)

#### 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](https://docs.kameleoon.com/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields.md).
* **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

![Multiple Choice element Settings tab with the Checkboxes answer format, a Question field, Answer 1 and Answer 2, and an Add an answer link](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/multiple-choice.png)

#### 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

![Scale element Settings tab with Scale type set to Stars, Scale item count set to 5, and a five-star preview on the canvas](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.30-1-1536x916.png)

#### 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

![NPS element Settings tab with question fields, a follow-up question set to All users, and a 0 to 10 score preview on the canvas](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.01-1-1536x915.png)

#### 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**.

![Dropdown element settings on the General tab, showing Initial state, Required, Placeholder, and the option Latest products](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-legacy-dropdown-settings-step-1-zoom2.png)

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.

![Dropdown element settings on the States tab, with Choose state set to default and the Font, Background Color, Border, Shadow, and Accessibility sections](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/forms-legacy-dropdown-states-step-1-zoom2.png)

## 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](https://docs.kameleoon.com/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/survey-data-export.md). To send responses to a spreadsheet, see [Send survey responses to Google Sheets](https://docs.kameleoon.com/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/send-survey-responses-to-google-sheets.md).

## 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**.

![Dropdown element panel, General tab, with Required off, a Placeholder, and the option Latest products](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/design-your-form-step-2-2x.png)

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](https://docs.kameleoon.com/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/add-conditional-logic.md).

![Widget Studio Content tab with the Dropdown element menu open, showing Edit, Rename, Duplicate in, Hide, and Delete](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/design-your-form-step-3-2x.png)

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](https://docs.kameleoon.com/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields.md).