SurveyMonkey
Utilizar CSS para estilizar seu questionário
RECURSO ENTERPRISE: caso tenha interesse, entre em contato com o departamento de vendas. Se você já tiver uma conta Enterprise, entre em contato com seu gerente de sucesso do cliente.
É possível criar um tema personalizado para fazer alterações globais de estilo. Use a barra de ferramentas de formatação de texto para fazer alterações de estilo exclusivas para uma pergunta específica de um questionário.
Os Administradores principais do Enterprise podem adicionar CSS para criar um tema de questionário personalizado para incluir a sua marca no visual do questionário.
Criação de um tema CSS personalizado
Os Administradores principais podem adicionar CSS para um tema de questionário personalizado que corresponda aos seus recursos visuais, fontes, cores e preferências de estilo.
Para adicionar um novo Tema personalizado à biblioteca:
- Selecione Minha equipe na barra de navegação principal e selecione Biblioteca.
- Selecione + Novo item (adicionar item).
- Escolha o tema CSS.
- Selecione Copiar código e cole na ferramenta de edição CSS de sua preferência.
- Faça personalizações no código e veja uma visualização adicionando-o à caixa em Personalizar tema e selecionando Gerar visualização.
- Selecione Salvar.
DICA! Visualize seu tema CSS personalizado antes de enviar seu questionário.
- Usar a Visualização de questionários para ver seu Tema CSS personalizado
Edição de um tema CSS personalizado
Depois que um Tema CSS personalizado for salvo, somente o Administrador principal poderá editar ou alterar os elementos da página.
Para editar um Tema personalizado:
- Selecione Minha equipe na barra de navegação principal e selecione Biblioteca.
- Selecione... e clique em Atualizar.
- Escolha o tema CSS.
- Selecione Copiar código e cole na ferramenta de edição CSS de sua preferência.
- Faça personalizações no código e veja uma visualização adicionando-o à caixa em Personalizar tema e selecionando Gerar visualização.
- Selecione Salvar.
Os membros da equipe não poderão alterar ou editar elementos individuais de um questionário que tenha um Tema CSS personalizado aplicado.
Personalização de elementos da página
Propriedades gerais
| Propriedade do CSS | Valor da sequência |
| Família da fonte | Sua organização pode ter uma Família da fonte preferida. Você também pode verificar CSS Web Safe Fonts para mais ideias. |
| Tamanho da fonte | Um número, por exemplo. 32px |
| Cor | Use um seletor de cores para gerar o valor RGBA da sua cor. |
| Cor do plano de fundo | Será um código HEX ou um valor RGBA. |
Título da página
Adicione Títulos de páginas a cada página do questionário para mantê-lo bem organizado.
#pageTitle {
cor: rgba(0,0,96,1);
cor de fundo: #A1F3FB;
família da fonte: National2;
tamanho da fonte: 24;
estilo da fonte: NORMAL;
peso da fonte: REGULAR;
decoração do texto: NENHUMA;
}
DICA! Use um seletor de cores para gerar o valor RGBA ou código hexadecimal da sua cor.
- Alteração do estilo da fonte
- Alteração do peso da fonte
- Alteração da decoração do texto
Título do questionário
O título do questionário será exibido na parte superior de cada página do questionário, à medida que seus respondentes respondem ao questionário, a menos que você opte por ocultar o título.
#surveyTitle {
cor: rgba(0,0,96,1);
família da fonte: National2;
tamanho da fonte: 26;
estilo da fonte: NORMAL;
peso da fonte: NEGRITO;
decoração do texto: NENHUMA;
}
- Alteração do estilo da fonte
- Alteração do peso da fonte
- Alteração da decoração do texto
Página do questionário
A cor de plano de fundo das perguntas do questionário. A cor do plano de fundo do questionário aparecerá apenas se você não tiver adicionado uma imagem de plano de fundo.
#surveyPage {
cor de fundo: rgba(137.230.243,1);
}
#surveyPageSecondaryColor {
cor de fundo: rgba(84,213,231,1);
}
DICA! Use um seletor de cores para gerar o valor RGBA da sua cor.
Título da pergunta
Você pode personalizar a aparência do texto da pergunta em vários tipos de perguntas.
#questionTitle {
cor: rgba(0,0,96,1);
família da fonte: National2;
tamanho da fonte: 22;
estilo da fonte: NORMAL;
peso da fonte: LEVE;
decoração do texto: NENHUMA;
}
- Alteração do estilo da fonte
- Alteração do peso da fonte
- Alteração da decoração do texto
Corpo da pergunta
Você pode personalizar a aparência das opções de resposta para os respondentes, bem como os tipos de perguntas que usam uma cor de destaque quando selecionados. Por exemplo, uma questão de múltipla escolha.
#questionBody {
cor: rgba(0,0,96,1);
família da fonte: National2;
tamanho da fonte: 18;
estilo da fonte: NORMAL;
peso da fonte: LEVE;
decoração do texto: NENHUMA;
cor de destaque: rgba (31.216.234,1);
}
- Alteração do estilo da fonte
- Alteração do peso da fonte
- Alteração da decoração do texto
Botão
O respondente pode usar esses botões para navegar pelo questionário. Quando um respondente clica no botão Próximo ou Concluído em cada página da pesquisa, as respostas são salvas e enviadas.
#button {
família da fonte: National2;
tamanho da fonte: 15;
peso da fonte: REGULAR;
}
- Alteração do peso da fonte
Erro
Mensagens de erro serão mostradas aos respondentes se eles deixarem uma pergunta obrigatória em branco ou se a resposta não atender ao intervalo ou limite exigido.
#error {
tamanho da fonte: 16;
estilo da fonte: NORMAL;
peso da fonte: LEVE;
decoração do texto: NENHUMA;
}
- Alteração do estilo da fonte
- Alteração do peso da fonte
- Alteração da decoração do texto
Link “Sair”
Os links de saída são mostrados no canto superior direito de cada página, permitindo que os respondentes saiam da pesquisa sem salvar as respostas inseridas na página atual.
#exitLink {
cor de fundo: rgba(0,0,0,0);
tamanho da fonte: 12;
peso da fonte: LEVE;
- Alteração do peso da fonte
Layout da página
Use layouts para escolher como e onde a cor ou imagem de plano de fundo é exibida.
#pageLayout {
layout: banner;
opacidade: 0,0;
}
DICA! Defina a opacidade para 100 para ter uma cor de fundo sólida.