> ## 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. # Añadir un elemento de encuesta o formulario > Configure los elementos de encuesta y de formulario en el Widget Studio, cree un formulario de suscripción al boletín y elija dónde se recopilan las respuestas. Los elementos de encuesta y de formulario recopilan respuestas de los visitantes. Los elementos de encuesta, como **Short answer** y **NPS**, recopilan opiniones para encuestas. Los elementos de formulario, como **Dropdown** y **Checkbox**, recogen datos para formularios, incluidas fechas, horas e interruptores. Un único formulario puede combinar elementos de ambos grupos, y un elemento **Button** envía las respuestas. Las respuestas importan porque usted actúa en función de ellas. Una suscripción al boletín necesita una dirección que funcione, y una encuesta necesita respuestas que pueda comparar. El Widget Studio le permite comprobar cada respuesta con una regla, y puede mostrar u ocultar otros elementos en función de la respuesta. ## Elementos de encuesta Los elementos de encuesta aparecen en la sección **Survey** del panel **Add element**. ![Panel Add element con la sección Survey abierta, que muestra Button, Short Answer, Long Answer, Multiple Choice, NPS, Scale y 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:** Envía la encuesta cuando un visitante hace clic en él. Seleccione **A button is clicked** en **When is the survey submitted?** para usarlo como activador. * **Short answer:** Recoge respuestas breves escritas por los visitantes. * **Long answer:** Recoge opiniones más extensas y abiertas. * **Multiple choice:** Admite casillas de verificación, selección única o múltiple, un campo opcional «Other» y la aleatorización de las respuestas. * **NPS:** Recopila datos del Net Promoter Score con preguntas de seguimiento opcionales. * **Scale:** Muestra una escala con emojis, estrellas, corazones o números. * **Hidden input:** Un campo de formulario invisible que almacena metadatos enviados con el formulario, pero que no se muestra al visitante. Cada elemento se configura con ajustes y opciones de estilo específicos en el Widget Studio. ## Elementos de formulario La sección **Form** contiene estos elementos: * **Input:** Un campo de texto totalmente personalizable que puede recoger datos de tipo string de los visitantes. * **Date:** Un campo que solicita una fecha a los visitantes. Al hacer clic en él, se abre un panel de selección de fechas. * **Time:** Un campo que solicita una hora a los visitantes. Al hacer clic en él, se abre un panel de selección de hora. * **Toggle:** Un interruptor con dos estados posibles, por ejemplo **ON** y **OFF**. * **Checkbox:** Una casilla de verificación a la que puede añadir un elemento **Text**. * **Radio button:** Un botón de opción al que puede añadir un elemento **Text**. * **Dropdown:** Un desplegable totalmente personalizable al que puede añadir opciones seleccionables. * **Text area:** Un cuadro de texto totalmente personalizable con un texto de marcador de posición. * **Range input:** Un control deslizante totalmente editable que permite a los visitantes seleccionar un valor dentro de un rango. * **Error message:** Un campo de texto que muestra un mensaje específico cuando el formulario tiene un error. * **Multi step form** Use elementos de formulario cuando su formulario necesite una fecha, una hora o un interruptor. La sección **Survey** no tiene ningún elemento para esos campos. ## Configurar elementos de encuesta Seleccione un elemento de encuesta en el lienzo para abrir su configuración. ### Button ![Pestaña Settings del elemento Button con el texto del botón, Advanced Settings, opciones de Style y el botón en vista previa en el lienzo](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:** * Introduzca el texto del botón en el campo de texto. * Use los botones situados delante del campo de texto para: * Editar el texto con IA. * Acceder a las opciones de estilo. * Editar la fuente del texto. * Cambiar la alineación del texto. * Editar el color del texto. * Añadir un emoji. * Haga clic en el **three-dots menu** para: * Eliminar el formato. * Expandir el editor de texto. * **Style:** Cambie el tipo y el color del fondo del botón. * **Animation:** Seleccione una animación de entrada o de salida para el botón. #### Advanced settings En **Advanced Settings**, puede definir: * **Default state:** Si el botón aparece de forma predeterminada. > [!NOTE] > > Si desactiva el botón y ha activado previamente **Make required** en alguna encuesta, el botón se activa automáticamente cuando los visitantes responden a todos los elementos obligatorios de la misma pantalla. * **Redirection URL:** La URL a la que el botón redirige a los visitantes. * **Open in new tab:** Active o desactive la opción para que la URL de redirección se abra en una pestaña nueva. #### Design Dos pestañas aparecen en el menú **Design**: **General** y **Style**. ##### General En la pestaña **General**, puede definir: * **Alignment:** Cambie la alineación del botón. * **Reposition and resize:** Puede posicionar el botón en los ejes **X** e **Y**, o definir su ancho y alto en píxeles o en porcentaje. * Haga clic en **Activate translate settings** para acceder a las opciones de traslación. Puede trasladar el botón desde su posición actual en el eje X o Y una cantidad definida en píxeles o en porcentaje. * **Devices synchronization:** Seleccione un dispositivo y elija cómo se sincroniza el botón con otros dispositivos. * **Fully synchronized:** El botón sincroniza todas sus propiedades con el dispositivo maestro. * **Partially synchronized:** El botón sincroniza todas sus propiedades con el dispositivo maestro, salvo que cambie una propiedad en otro dispositivo. * **No synchronization:** El botón no sincroniza ninguna propiedad con el dispositivo maestro. Defina las propiedades del botón en este dispositivo por separado. * **Hide:** El botón no aparece en el dispositivo. * **Padding:** Añada relleno entre los bordes del botón y su texto. * **CSS and classes:** Añada CSS y clases para dar estilo al botón. ##### Style En la pestaña **Style**, puede definir: * **State:** Las opciones son **enabled**, **hover** u **off**. * **Text:** Defina la altura de línea del texto y aplique las transformaciones deseadas. * **Background:** Cambie el tipo o el color del fondo del botón. * **Border:** Añada un borde en todos los lados del botón o un borde personalizado. * **Shadow:** Añada una sombra y edite su color o su posición. ### Short answer and long answer ![Pestaña Settings del elemento Short Answer con Label, Placeholder, Pre-filled value y Advanced Settings, con el campo en vista previa en el lienzo](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:** La pregunta o indicación principal. * **Placeholder (optional):** Texto que se muestra antes de que el visitante escriba; desaparece cuando empieza a escribir. * **Pre-filled value (optional):** Inserta una respuesta predefinida en el campo. * **Default state:** Determina si el campo está activado o desactivado al cargarse. #### Advanced settings * **Label position:** Coloque la etiqueta delante o detrás del campo de entrada. * **Character limit:** Número máximo de caracteres permitidos. * **Make required:** Exige a los visitantes responder a la pregunta antes de enviarla. Se añade automáticamente un `*` a la etiqueta. Al activar **Make required**, aparece la sección **Validation rule**, que le permite definir restricciones adicionales para la entrada. * **Validation rule:** Comprueba la entrada según una regla, por ejemplo **Not empty** o **Length**. Para ver todas las opciones y cómo funcionan, consulte [Validar la entrada de Short answer](https://docs.kameleoon.com/es/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields.md). * **Error message:** Mensaje personalizado que se muestra cuando falla la validación. Configure el estilo del mensaje de error en **Design** > **Answers** seleccionando **Invalid state**. ### Multiple choice ![Pestaña Settings del elemento Multiple Choice con el formato de respuesta Checkboxes, un campo Question, Answer 1 y Answer 2, y un enlace Add an answer](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:** El texto de la pregunta que se muestra antes de las respuestas. * **Answers:** Añada, elimine o reordene las opciones de respuesta. Haga clic en **Add an answer** para crear más opciones. #### Advanced settings * **Multiple selection:** Permite a los visitantes seleccionar más de una respuesta. Si está desactivada, los visitantes solo pueden seleccionar una respuesta. * **Add "Other":** Añade un campo de texto abierto con la etiqueta «Other» para que los visitantes escriban una respuesta personalizada. * **Randomize answers:** Ordena aleatoriamente las respuestas de la lista para cada visitante y reduce el sesgo de selección. * **Make required:** Si está activada, los visitantes deben seleccionar al menos una respuesta para enviar la encuesta. Se añade automáticamente un `*` después de la etiqueta de la pregunta (con el mismo estilo que **Question** en la pestaña **Design**). ### Scale ![Pestaña Settings del elemento Scale con Scale type en Stars, Scale item count en 5 y una vista previa de cinco estrellas en el lienzo](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 o Numbers. * **Scale item count:** Número de valores de la escala (por ejemplo, 1-5). * **Question:** La pregunta principal. #### Scale labels * **Label position:** Muestre las etiquetas delante de los elementos de la escala, detrás de ellos u oculte las etiquetas. * Puede personalizar las etiquetas de cada elemento de la escala. #### Advanced settings * **Make required:** Exige a los visitantes responder antes de enviar. ### NPS ![Pestaña Settings del elemento NPS con los campos de pregunta, una pregunta de seguimiento configurada en All users y una vista previa de puntuación de 0 a 10 en el lienzo](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 * La redacción de la pregunta NPS está parcialmente fija para mantener la estandarización. Solo puede editar partes de la pregunta. Para cambiar el idioma, vaya a la pestaña **Translation** y defina un idioma predeterminado. #### Fields * **How likely are you to recommend (X) to (Y)?** * Puede editar los campos de producto o servicio y de destino. * **Follow-up question (optional):** * Mostrar a **All users** o solo a: * Promotores (puntuación de 9 a 10) * Pasivos (puntuación de 7 a 8) * Detractores (puntuación de 0 a 6) * Permite mostrar contenido de seguimiento condicional. * **Make required:** Marque como obligatoria solo la **initial NPS score**. La pregunta de seguimiento siempre es opcional. ## Configurar elementos de formulario Seleccione un elemento de formulario en el lienzo para abrir su configuración. Los elementos de formulario tienen dos pestañas: **General** y **States**. La pestaña **General** contiene los ajustes del elemento. En el caso de un **Dropdown**, incluye **Initial state**, **Required** y **Placeholder**. ![Ajustes del elemento Dropdown en la pestaña General, con Initial state, Required, Placeholder y la opción 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) La pestaña **States** define los estilos de cada estado del elemento, como el estado predeterminado. En el caso de un **Dropdown**, incluye los estilos de fuente, color de fondo, borde, sombra y accesibilidad. ![Ajustes del elemento Dropdown en la pestaña States, con Choose state en default y las secciones Font, Background Color, Border, Shadow y Accessibility](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) ## Recopilar datos de la encuesta Puede recopilar los datos de la encuesta en Kameleoon, donde puede exportarlos en formato .csv, o enviarlos a un servicio externo mediante una solicitud HTTP. Configure esta opción en la pestaña **Survey Settings**. 1. Abra la pestaña **Survey Settings** en el panel Content. 2. Active **Collect survey data**. 3. En **When is the survey submitted?**, seleccione cuándo se envían las respuestas. Seleccione **A button is clicked** y elija el elemento Button, o seleccione **The widget is closed** o **An answer is clicked**. 4. En **How are responses collected?**, seleccione **Kameleoon** para almacenar las respuestas en Kameleoon, o seleccione **Externally (HTTP Request)** para enviarlas a una URL. 5. Si ha seleccionado **Externally (HTTP Request)**, introduzca un **Request name**, seleccione un **Method** (GET o POST), introduzca la **Action URL** y, opcionalmente, haga clic en **Add header request** para añadir un encabezado. 6. Haga clic en **Save**. Para exportar respuestas desde Kameleoon, consulte [Exportación de datos de encuestas](https://docs.kameleoon.com/es/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/survey-data-export.md). Para enviar respuestas a una hoja de cálculo, consulte [Enviar respuestas de encuesta a Google Sheets](https://docs.kameleoon.com/es/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/send-survey-responses-to-google-sheets.md). ## Crear un formulario de boletín informativo El Widget Studio incluye plantillas **Newsletter** desde las que puede empezar. Para crear un formulario de boletín desde cero, añada sus elementos en este orden. 1. Haga clic en **Add element** y seleccione **Short answer** en la sección **Survey**. Úselo para la dirección de correo electrónico. 2. Haga clic en **Add element** y seleccione **Dropdown** en la sección **Form**. 3. En los ajustes de **Dropdown**, haga clic en **+Add option** e introduzca **Latest products**. ![Panel del elemento Dropdown, pestaña General, con Required desactivado, un Placeholder y la opción Latest products](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/design-your-form-step-2-2x.png) 4. Haga clic en **Add element** y seleccione un segundo **Dropdown**. En la barra lateral izquierda, oculte el segundo desplegable hasta que un visitante seleccione **Latest products**. Para configurar el evento que lo muestra, consulte [Añadir lógica condicional](https://docs.kameleoon.com/es/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/add-conditional-logic.md). ![Pestaña Content del Widget Studio con el menú del elemento Dropdown abierto, que muestra Edit, Rename, Duplicate in, Hide y Delete](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/design-your-form-step-3-2x.png) 5. Haga clic en **Add element** y seleccione **Checkbox** en la sección **Form**. Úselo para los términos y condiciones. 6. Haga clic en **Add element** y seleccione **Button** en la sección **Survey** para enviar el formulario. A continuación, defina las reglas que comprueban las respuestas. Consulte [Validar la entrada de Short answer](https://docs.kameleoon.com/es/user-manual/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields.md).