Añadir un elemento de encuesta o formulario

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.

• 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

​

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.

• 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

​

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

​

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

​

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

​

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

​

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. Para enviar respuestas a una hoja de cálculo, consulte Enviar respuestas de encuesta a Google Sheets.

​

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.

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.

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.