SurveyMonkey
Usa CSS para dar estilo a tu encuesta
FUNCIÓN PARA ENTERPRISE: Si te interesa, ponte en contacto con Ventas. Si ya tienes una cuenta Enterprise, ponte en contacto con tu gerente del éxito del cliente.
Puedes crear un tema personalizado para realizar cambios de estilo globales. Usa la barra de herramientas de formato de texto para realizar cambios de estilo únicos a una pregunta específica de la encuesta.
Los administradores principales de Enterprise pueden agregar CSS para crear un tema de encuesta personalizado con el fin de personalizar el aspecto de tu encuesta.
Cómo crear un tema CSS personalizado
Los administradores principales pueden agregar CSS para un tema de encuesta personalizado que coincida con tus recursos visuales, fuentes, colores y preferencias de estilo.
Para agregar un nuevo tema personalizado a la biblioteca:
- Selecciona Mi equipo desde la barra superior de navegación y selecciona Biblioteca.
- Selecciona + Nuevo elemento (Agregar elemento).
- Elige el tema CSS.
- Selecciona Copiar código y pégalo en tu herramienta de edición CSS preferida.
- Personaliza el código y luego obtén una vista previa; para ello, agrégalo al cuadro en Personalizar temas y selecciona Generar vista previa.
- Selecciona Guardar.
SUGERENCIA: Obtén una vista previa de tu tema CSS personalizado antes de enviar tu encuesta.
- Cómo usar la vista previa de la encuesta para ver tu tema CSS personalizado
Cómo actualizar un tema CSS personalizado
Una vez que se haya guardado un tema CSS personalizado, solo el administrador principal puede editar o cambiar los elementos de la página.
Para editar un tema personalizado:
- Selecciona Mi equipo desde la barra superior de navegación y selecciona Biblioteca.
- Selecciona ... y haz clic en Actualizar.
- Elige el tema CSS.
- Selecciona Copiar código y pégalo en tu herramienta de edición CSS preferida.
- Personaliza el código y luego obtén una vista previa; para ello, agrégalo al cuadro en Personalizar temas y selecciona Generar vista previa.
- Selecciona Guardar.
Los miembros del equipo no pueden cambiar o editar elementos individuales de una encuesta con un tema CSS personalizado aplicado.
Cómo personalizar elementos de la página
Propiedades generales
| Propiedad CSS | Valor de secuencia |
| Familia de fuentes | Es probable que tu organización tenga una familia de fuentes preferida. Actualmente, solo puedes usar las fuentes enumeradas en CSS Web Safe Fonts. |
| Tamaño de fuente | Un número, p. ej., 32 px |
| Color | Usa un selector de color para generar el valor RGBA de tu color. |
| Color de fondo | Será un código HEX o un valor RGBA. |
Título de la página
Puedes agregar títulos de páginas a diferentes páginas en tu encuesta para mantenerla bonita y ordenada.
#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: NORMAL;
font-weight: REGULAR;
text-decoration: NONE;
}
SUGERENCIA: Usa un selector de color para generar el valor RGBA o código hex de tu color.
- Cambiar el estilo de la fuente
- Cambiar el grosor de la fuente
- Cambiar la decoración del texto
Título de la encuesta
El título de la encuesta aparecerá en la parte superior de cada una de las páginas de la encuesta cuando los encuestados la respondan, excepto que elijas ocultarlo.
#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
- Cambiar el estilo de la fuente
- Cambiar el grosor de la fuente
- Cambiar la decoración del texto
Página de la encuesta
El color del fondo que se mostrará detrás de las preguntas en tu encuesta. El color del fondo de la encuesta se mostrará únicamente si no has agregado una imagen de fondo.
#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}
SUGERENCIA: Usa un selector de color para generar el valor RGBA de tu color.
Título de la pregunta
Puedes personalizar el aspecto del texto de la pregunta en diversos tipos de preguntas.
#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- Cambiar el estilo de la fuente
- Cambiar el grosor de la fuente
- Cambiar la decoración del texto
Cuerpo de la pregunta
Puedes personalizar la apariencia de las opciones de respuesta para los encuestados, así como los tipos de preguntas que usan un color de resaltado cuando se seleccionan. Por ejemplo, una pregunta de opción múltiple.
#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
highlight-color: rgba(31,216,234,1);
}
- Cambiar el estilo de la fuente
- Cambiar el grosor de la fuente
- Cambiar la decoración del texto
Botón
Las personas que responden tu encuesta usan estos botones para desplazarse por ella. Cuando un encuestado hace clic en el botón Siguiente o Listo de cada página de la encuesta, las respuestas se guardan y se envían.
#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
- Cambiar el grosor de la fuente
Error
Los mensajes de error se muestran a los encuestados si dejan una pregunta obligatoria en blanco o si su respuesta no cumple el rango o límite requerido.
#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- Cambiar el estilo de la fuente
- Cambiar el grosor de la fuente
- Cambiar la decoración del texto
Enlace para salir
Los enlaces de salida se muestran en la esquina superior derecha de cada página, lo que permite a los encuestados salir de la encuesta sin guardar las respuestas ingresadas en la página actual.
#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
- Cambiar el grosor de la fuente
Diseño de página
Puedes modificar la disposición de la página para elegir cómo y dónde se mostrarán el color o las imágenes de fondo.
#pageLayout {
layout: banner;
opacity: 0.0;
}
SUGERENCIA: Establece la opacidad en 100 para tener un color de fondo estable.