Personaliza el estilo de tu encuesta

Un estilo define las fuentes, los colores y el diseño de tu encuesta. Añade CSS para los detalles que el editor de estilos no cubre. Tu CSS aparece en la vista previa, en el enlace público de la encuesta y en las encuestas incrustadas en tu sitio web.

Dónde añadir tu CSS

Abre la encuesta, ve a Diseñar → Vista previa y abre Avanzado en el panel de estilo. Marca Sé lo que hago para mostrar el editor CSS. La vista previa muestra tus cambios a medida que escribes. Al editar el estilo se crea una copia para esta encuesta llamada Mi estilo personalizado. Guarda la encuesta para publicar tus cambios.

Para usar el estilo en otras encuestas, elige Guardar como estilo del espacio de trabajo.

Ejemplos

Cada ejemplo funciona por sí solo. Combina los que necesites.

Para los colores, usa variables de la paleta como var(--primary), var(--foreground) o var(--muted-foreground). Se actualizan cuando cambias la paleta, incluyendo sus variantes clara y oscura.

Texto de la pregunta en el color de tu marca

.question-title {
    color: var(--primary);
}

Texto de la pregunta más grande

.question-title {
    font-size: 1.5rem;
}

Botones más grandes en las escalas de calificación

Para NPS y otras escalas de calificación numérica que usan botones:

.question-type-interval-scale button {
    height: 3.5rem;
    font-size: 1.5rem;
}

Barra de progreso más gruesa

.survey-progress {
    height: 6px;
}

Ocultar el contador de pasos

Elimina “Paso 2 de 5” de entre los botones:

.survey-navigation-step {
    display: none;
}

Botones de navegación redondos

.survey-navigation-next,
.survey-navigation-submit {
    border-radius: 9999px;
}

Columnas de preguntas y navegación más estrechas

Establece ambos anchos para que la navegación se mantenga alineada con las preguntas:

.survey-content,
.survey-footer-content {
    max-width: 36rem;
}

Sombra sobre la navegación fijada

Usa la configuración de escritorio y teléfono por separado. Cada una puede fijar la navegación en la parte inferior de la pantalla:

@media (min-width: 640px) {
    .survey-shell[data-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

@media (max-width: 639px) {
    .survey-shell[data-phone-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

Encabezados de la encuesta

Esto colorea cada h1 y h2 en la página de la encuesta, incluyendo los bloques de texto y el título de la página de finalización:

h1,
h2 {
    color: var(--primary);
}

Estructura de la página

Usa los nombres de clase a continuación en tu CSS. Los mantenemos estables entre versiones. Otros nombres de clase en la página son internos y pueden cambiar sin previo aviso.

Las páginas de la encuesta comparten esta estructura. El progreso, las preguntas y la navegación aparecen solo en las pantallas que los necesitan:

• .survey-shell - toda la página
  • .survey-header - la barra en la parte superior, con la caja interior .survey-header-content
    • .survey-progress - la pista de progreso
      • .survey-progress-bar - su parte llena
  • .survey-main - el espacio entre las dos barras
    • .survey-content - la columna de contenido principal
      • .survey-questions - las preguntas en esta página
  • .survey-footer - la barra en la parte inferior, con la caja interior .survey-footer-content
    • .survey-navigation - la fila de navegación
      • .survey-navigation-back - Atrás
      • .survey-navigation-step - “Paso 2 de 5”
      • .survey-navigation-next - Siguiente
      • .survey-navigation-submit - Enviar encuesta

Una encuesta de una sola página no tiene barra de progreso, y su pantalla de preguntas solo tiene un botón de Enviar encuesta. El botón Atrás aparece a partir de la segunda página.

Preguntas

Cada pregunta es una .question, que contiene:

• .question-title - el texto de la pregunta
• .question-required - el * de una pregunta obligatoria, dentro del título
• .question-description - el texto de ayuda debajo de la pregunta
• .question-answer - la entrada de la respuesta
• .question-error - el mensaje que se muestra cuando falta una respuesta o no es válida

Para dar estilo a un tipo de pregunta, añade su clase de tipo, por ejemplo .question-type-select-one .question-title:

• .question-type-string - texto (respuesta abierta)
• .question-type-number - número
• .question-type-date - fecha
• .question-type-boolean - sí o no
• .question-type-select-one - selección única
• .question-type-select-many - selección múltiple
• .question-type-ranking - ordenación
• .question-type-interval-scale - escala de intervalo (calificación numérica, como NPS)
• .question-type-ordinal-scale - escala ordinal
• .question-type-matrix - matriz
• .question-type-open-list - lista abierta
• .question-type-payment - pago

Configuración de diseño

.survey-shell lleva las opciones de la sección Diseño como atributos, por lo que tu CSS puede seguirlas:

• data-navigation - flow cuando los botones siguen a la última pregunta, sticky cuando están fijados en la parte inferior de la pantalla
• data-align - top o center, la posición del contenido

En pantallas de menos de 640 px de ancho, se aplica la configuración del teléfono. Dirígete a ellas con data-phone-navigation y data-phone-align, como en el ejemplo de la sombra de arriba.

Qué no está permitido

Para proteger a los encuestados, una encuesta no se puede guardar con CSS que:

• use @import, image-set() o src(), o use url() sin una URL data:
• añada fuentes con @font-face. En su lugar, elige una fuente en la sección Fuentes
• seleccione por [value], [checked] o [selected], lo que podría revelar respuestas
• contenga CSS no válido o la secuencia </
• tenga más de 50.000 caracteres