Visão Geral
O NueForm oferece amplos recursos de temas que permitem alinhar seus formulários à sua marca. Todo aspecto visual de um formulário pode ser personalizado, de cores e fontes a logotipos e CSS personalizado.
Propriedades de Tema
As propriedades de tema são definidas no nível do formulário e se aplicam a todas as perguntas do formulário. Elas são convertidas em propriedades personalizadas de CSS (variáveis) no momento da renderização, de modo que todos os componentes se adaptam automaticamente.
Propriedades de Cor
| Propriedade | Variável CSS | Descrição | Padrão |
|---|---|---|---|
| Background Color | --fc-bg | A cor de fundo do formulário inteiro. | #0a0a0a |
| Text Color | --fc-text | A cor de texto primária para perguntas e conteúdo. | #e8e8e8 |
| Theme Color (Accent) | --fc-accent | A cor de destaque usada em realces, estados ativos e números das perguntas. | #6366f1 |
| Answer Text Color | --fc-answer-text | A cor do texto digitado pelo respondente nos campos de entrada. | #e8e8e8 |
| Placeholder Color | --fc-placeholder | A cor do texto de placeholder nos campos de entrada. | rgba(255,255,255,0.25) |
| Button Color | --fc-btn-bg | A cor de fundo dos botões primários (OK, Start, Submit). Usa a cor do tema como fallback se não for definida. | #6366f1 |
| Button Text Color | --fc-btn-text | A cor do texto dos botões primários. | #ffffff |
| Title Color | --fc-title-color | A cor dos títulos de perguntas/atividades. Usa a cor do texto como fallback. | Herda a cor do texto |
| Description Color | --fc-description-color | A cor das descrições de perguntas/atividades. | Cor do texto com 55% de opacidade |
| Option Text Color | --fc-option-color | A cor dos rótulos das opções de escolha e do conteúdo de atividades. | Herda a cor do texto |
| Indicator Background Color | --fc-indicator-bg | Cor de fundo dos indicadores de atividade nas atividades Fuse. | Cor de destaque com 15% de opacidade |
| Indicator Text Color | --fc-indicator-text | Cor do texto dos indicadores de atividade. | Cor de destaque |
Variáveis de Cor Derivadas
O sistema de temas gera automaticamente variáveis CSS adicionais a partir das suas cores base, para uso em vários estados dos componentes:
| Variável CSS | Descrição |
|---|---|
--fc-accent-hover | Cor de destaque clareada para estados de hover. |
--fc-accent-8 a --fc-accent-60 | Cor de destaque em vários níveis de opacidade (8%, 10%, 15%, 20%, 30%, 40%, 60%). |
--fc-text-2 a --fc-text-85 | Cor do texto em vários níveis de opacidade (2%, 4%, 5%, 6%, 8%, 10%, 12%, 15%, 20%, 40%, 55%, 75%, 80%, 85%). |
--fc-input-bg | Fundo dos campos de entrada (cor do texto com 5% de opacidade). |
--fc-card-bg | Fundo de cartões (cor do texto com 4% de opacidade). |
--fc-border | Cor das bordas (cor do texto com 12% de opacidade). |
--fc-muted | Texto atenuado/secundário (cor do texto com 45% de opacidade). |
--fc-primary | Cor primária (alias da cor de destaque). |
--fc-btn-bg-hover | Fundo de botão clareado para estados de hover. |
Propriedades de Fonte
O NueForm carrega fontes do Google Fonts automaticamente. Qualquer família de fontes do Google Fonts pode ser usada.
| Propriedade | Variável CSS | Descrição | Padrão |
|---|---|---|---|
| Question Font | --fc-font-question | Família de fontes para os títulos das perguntas. | Inter |
| Answer Font | --fc-font-answer | Família de fontes para o texto digitado pelo respondente. | Inter |
| Button Font | --fc-font-button | Família de fontes para os rótulos dos botões. | Inter |
| Description Font | --fc-font-description | Família de fontes para as descrições de perguntas/atividades. | Herda a fonte das perguntas |
| Option Font | --fc-font-option | Família de fontes para os rótulos das opções de escolha e o conteúdo de atividades. | Herda a fonte das respostas |
| Indicator Font | --fc-font-indicator | Família de fontes para o texto dos indicadores de atividade. | Herda a fonte das perguntas |
| Question Font Size | --fc-font-size-question | O tamanho da fonte dos títulos das perguntas. Aceita qualquer valor de tamanho CSS (rem, px etc.). | 1.875rem (30px) |
As fontes são carregadas do Google Fonts sob demanda. O sistema gera automaticamente a URL de importação de CSS correta do Google Fonts, solicitando os pesos de 300 a 700 para cada família de fontes. A fonte padrão Inter é pré-carregada e não requer uma requisição ao Google Fonts.
Identidade Visual
Logotipo
Você pode adicionar um logotipo aos seus formulários em duas posições:
Logotipo Superior:
| Configuração | Descrição | Padrão |
|---|---|---|
| Top Logo URL | URL da imagem do logotipo exibido no topo do formulário. | Nenhum |
| Top Logo Size | Tamanho do logotipo superior: small, medium ou large. | medium |
| Top Logo Alignment | Alinhamento horizontal: left, center ou right. | center |
| Top Logo CSS | CSS personalizado aplicado ao contêiner do logotipo superior (.fc-top-logo). | Nenhum |
Logotipo de Identidade Visual:
| Configuração | Descrição | Padrão |
|---|---|---|
| Branding Logo URL | URL do logotipo de identidade visual, normalmente exibido no rodapé ou na área da marca d'água. | Nenhum |
Texto do Rodapé
| Configuração | Descrição | Padrão |
|---|---|---|
| Branding Footer Text | Texto personalizado exibido na área do rodapé do formulário. | Nenhum |
CSS da Marca D'água
| Configuração | Descrição | Padrão |
|---|---|---|
| Watermark CSS | CSS personalizado aplicado ao elemento da marca d'água/logotipo no canto inferior esquerdo (.fc-watermark). | Nenhum |
Ocultar a Marca NueForm (Pro+)
| Configuração | Descrição | Padrão |
|---|---|---|
| Hide Branding | Remove a marca do NueForm do formulário. Requer um plano Pro+. | Desativado |
Ocultar a marca do NueForm é um recurso Pro+. Nos planos gratuitos e de níveis inferiores, a marca d'água do NueForm é sempre exibida.
Padrões de Identidade Visual
Os padrões de identidade visual no nível da conta permitem definir valores de tema padrão que se aplicam a todos os novos formulários que você criar. Eles podem ser substituídos no nível do formulário.
Padrões de identidade visual disponíveis:
- URL do logotipo
- Texto do rodapé
- Cor do tema
- Cor de fundo
- Cor do texto
- Cor do texto de resposta
- Cor do placeholder
- Cor do botão
- Cor do texto do botão
- Família de fontes (Pergunta)
- Família de fontes (Resposta)
- Família de fontes (Botão)
- Tamanho da fonte das perguntas
- URL, tamanho, alinhamento e CSS do logotipo superior
- CSS da marca d'água
Transições no Nível da Pergunta
Cada pergunta pode ter sua própria animação de transição, ou você pode aplicar a mesma transição a todas as perguntas. Transições disponíveis:
| Transição | Descrição |
|---|---|
| Vertical Slide + Fade | As perguntas deslizam para cima/baixo com um efeito de fade. Este é o padrão. |
| Horizontal Slide | As perguntas deslizam para a esquerda/direita. |
| Diagonal Slide | As perguntas deslizam na diagonal. |
| Elastic Bounce | As perguntas entram quicando com um exagero elástico. |
| Zoom Through | As perguntas dão zoom para dentro/fora através da viewport. |
| Rotate In | As perguntas giram levemente ao entrar. |
Você pode definir a transição de perguntas individuais no editor de perguntas ou usar a opção "Apply to all questions" para definir uma transição uniforme.
CSS Personalizado
Para controle completo sobre a aparência do seu formulário, você pode escrever CSS personalizado. Veja o guia de CSS Personalizado para a lista completa de seletores e variáveis CSS disponíveis.
Estilos por Pergunta
Perguntas individuais suportam estas opções de estilo:
| Propriedade | Descrição |
|---|---|
| Custom Class Name | Adiciona uma classe CSS ao contêiner da pergunta. Use em combinação com CSS personalizado para estilizar perguntas específicas de forma diferente. |
| Hide Question Number | Remove o prefixo de número da pergunta desta pergunta específica. |
| Media Custom Class Name | Adiciona uma classe CSS ao elemento de mídia anexado a esta pergunta. |
Tema para Fundos Claros vs. Escuros
O tema padrão do NueForm usa um fundo escuro (#0a0a0a) com texto claro (#e8e8e8). As variáveis CSS derivadas (bordas, campos de entrada, cartões) são todas calculadas em relação à cor do texto, então mudar para um tema claro é simples:
- Defina Background Color com uma cor clara (por exemplo,
#ffffff). - Defina Text Color com uma cor escura (por exemplo,
#1a1a1a). - As variáveis derivadas (
--fc-border,--fc-input-bg,--fc-card-bg,--fc-muted) se adaptarão automaticamente, pois são baseadas nas variações de opacidade da cor do texto.
Ao alternar entre temas claros e escuros, lembre-se de ajustar também Placeholder Color, Answer Text Color e Button Color para manter a legibilidade e o contraste.