Personalize o estilo do seu questionário

Um estilo define as fontes, cores e o layout do seu questionário. Adicione CSS para detalhes que o editor de estilo não cobre. O seu CSS aparece na pré-visualização, no link público do questionário e em questionários incorporados no seu site.

Onde adicionar o seu CSS

Abra o questionário, vá a Criar → Pré-visualizar e abra Avançado no painel de estilo. Marque Eu sei o que estou a fazer para mostrar o editor de CSS. A pré-visualização mostra as alterações enquanto você digita. Editar o estilo cria uma cópia para este questionário chamada Meu estilo personalizado. Salve o questionário para publicar as alterações.

Para usar o estilo em outros questionários, escolha Salvar como estilo do espaço de trabalho.

Exemplos

Cada exemplo funciona por si só. Combine os que precisar.

Para cores, use variáveis de paleta como var(--primary), var(--foreground) ou var(--muted-foreground). Elas são atualizadas quando você altera a paleta, incluindo as suas variantes claras e escuras.

Texto da pergunta na cor da sua marca

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

Texto da pergunta maior

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

Botões maiores nas escalas de avaliação

Para NPS e outras escalas de avaliação numéricas que usam botões:

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

Barra de progresso mais grossa

.survey-progress {
    height: 6px;
}

Ocultar a contagem de passos

Remove “Passo 2 de 5” de entre os botões:

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

Botões de navegação redondos

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

Colunas de perguntas e navegação mais estreitas

Defina ambas as larguras para que a navegação fique alinhada com as perguntas:

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

Sombra acima da navegação fixada

Use as configurações de desktop e celular separadamente. Cada uma pode fixar a navegação na parte inferior da tela:

@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;
    }
}

Títulos do questionário

Isto colore todos os h1 e h2 na página do questionário, incluindo blocos de texto e o título da página de conclusão:

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

Estrutura da página

Use os nomes de classes abaixo no seu CSS. Nós os mantemos estáveis entre as versões. Outros nomes de classes na página são internos e podem mudar sem aviso prévio.

As páginas do questionário compartilham esta estrutura. O progresso, as perguntas e a navegação aparecem apenas nas telas que precisam deles:

• .survey-shell - a página inteira
  • .survey-header - a barra na parte superior, com a caixa interna .survey-header-content
    • .survey-progress - a trilha de progresso
      • .survey-progress-bar - a sua parte preenchida
  • .survey-main - o espaço entre as duas barras
    • .survey-content - a coluna de conteúdo principal
      • .survey-questions - as perguntas nesta página
  • .survey-footer - a barra na parte inferior, com a caixa interna .survey-footer-content
    • .survey-navigation - a linha de navegação
      • .survey-navigation-back - Voltar
      • .survey-navigation-step - “Passo 2 de 5”
      • .survey-navigation-next - Seguinte
      • .survey-navigation-submit - Enviar questionário

Um questionário de página única não tem barra de progresso, e a sua tela de perguntas tem apenas um botão Enviar questionário. O botão Voltar aparece a partir da segunda página.

Perguntas

Cada pergunta é uma .question, contendo:

• .question-title - o texto da pergunta
• .question-required - o * de uma pergunta obrigatória, dentro do título
• .question-description - o texto de ajuda abaixo da pergunta
• .question-answer - a entrada da resposta
• .question-error - a mensagem mostrada quando uma resposta está ausente ou é inválida

Para estilizar um tipo de pergunta, adicione a sua classe de tipo, por exemplo .question-type-select-one .question-title:

• .question-type-string - texto aberto
• .question-type-number - número
• .question-type-date - data
• .question-type-boolean - sim ou não
• .question-type-select-one - selecione uma
• .question-type-select-many - selecione várias
• .question-type-ranking - ranking
• .question-type-interval-scale - escala de intervalo, como NPS
• .question-type-ordinal-scale - escala ordinal
• .question-type-matrix - matriz
• .question-type-open-list - lista aberta
• .question-type-payment - pagamento

Configurações de layout

.survey-shell carrega as escolhas da seção Layout como atributos, para que o seu CSS possa segui-las:

• data-navigation - flow quando os botões seguem a última pergunta, sticky quando estão fixados na parte inferior da tela
• data-align - top ou center, a posição do conteúdo

Em telas mais estreitas que 640px, as configurações de celular são aplicadas. Segmente-as com data-phone-navigation e data-phone-align, como no exemplo de sombra acima.

O que não é permitido

Para proteger os respondentes, um questionário não pode ser salvo com CSS que:

• use @import, image-set() ou src(), ou use url() sem um URL data:
• adicione fontes com @font-face. Em vez disso, escolha uma fonte na seção Fontes
• selecione em [value], [checked] ou [selected], o que poderia revelar respostas
• contenha CSS inválido ou a sequência </
• tenha mais de 50.000 caracteres