Personalizar Exibição

O recurso Personalizar exibição permite que você personalize a apresentação visual dos seus formulários. É possível ajustar o tema, tamanhos de fonte, cores e fundo para combinar com a identidade da sua marca ou criar uma experiência única para o usuário.

Principais Recursos

• Visualização em tempo real: Veja as alterações instantaneamente em uma prévia não funcional do formulário
• Modo Básico: Opções rápidas de personalização para formulários no desktop
• Modo Avançado: Controle detalhado da apresentação no desktop e no mobile
• Integração de imagens: Use imagens do Unsplash ou faça upload das suas próprias
• Suporte a múltiplos dispositivos: Personalização separada para desktop e dispositivos móveis

Primeiros Passos

Ativando a Personalização

1. Acesse o editor do seu formulário
2. Selecione a aba Configurações e clique em
3. Clique no botão . na tela de introdução

Visão Geral da Interface

• Painel Esquerdo: Prévia ao vivo do formulário (não funcional)
• Painel Direito: Controles de personalização
• Cabeçalho: Botões Salvar/Cancelar e interruptor de personalização
• Seletor de Modo: Alternar entre os modos Básico e Avançado

Modo Básico

O modo básico oferece acesso rápido às opções de personalização mais comuns para formulários no desktop.

Fundo do Formulário

Escolha como o fundo do formulário será exibido:

• Branco: Fundo branco sólido
• Transparente: Totalmente transparente (mostra o fundo da tela)
• Transparente Claro: Semi-transparente com sobreposição clara
• Transparente Escuro: Semi-transparente com sobreposição escura

Como alterar:

1. Selecione a seção "Painel de Respostas"
2. Clique no menu suspenso "Fundo do Formulário"
3. Escolha a opção desejada

Alinhamento do Formulário

Posicione o formulário na tela:

• Início: Alinha o formulário à esquerda
• Centro: Centraliza o formulário na tela
• Fim: Alinha o formulário à direita

Como alterar:

1. Selecione a seção "Painel de Respostas"
2. Clique no menu suspenso "Alinhamento do Formulário"
3. Escolha o alinhamento desejado

Largura do Formulário

Ajuste a largura do formulário (apenas desktop):

• Use o campo numérico com botões +/-
• A largura padrão se adapta ao conteúdo
• Valores personalizados permitem controle preciso

Como alterar:

1. Selecione a seção "Painel de Respostas"
2. Ajuste o campo "Largura do Formulário"
3. Use os botões +/- ou digite um valor diretamente

Margens

Adicione espaçamento ao redor do formulário:

• Margem Esquerda: Disponível quando o alinhamento for "Início"
• Margem Direita: Disponível quando o alinhamento for "Fim"
• Medida em pixels

Como alterar:

1. Defina o alinhamento como "Início" ou "Fim"
2. Ajuste o campo de margem
3. As alterações são aplicadas imediatamente

Cor dos Controles

Defina a cor primária dos controles do formulário (botões, campos, etc.):

Como alterar:

1. Selecione a seção "Painel de Tema"
2. Clique no seletor de cores
3. Escolha a cor da sua marca
4. Todos os elementos interativos adotarão essa cor

Imagem de Fundo

Adicione uma imagem de fundo a toda a tela do formulário ou a seções específicas.

Como adicionar ou alterar uma imagem:

1. Selecione a seção desejada ("Painel de Tema" no Modo Básico ou o painel correspondente no Modo Avançado)
2. Clique na área de upload (ícone de nuvem ou retângulo pontilhado)
3. Serão exibidas duas opções:

• Buscar na galeria: Abre a sua biblioteca pessoal de imagens já enviadas anteriormente no sistema. Ideal para reutilizar logos, fotos da empresa ou imagens que você usa com frequência.
• Pesquisar no Unsplash: Integração direta com o Unsplash (biblioteca de milhões de fotos profissionais gratuitas). Basta digitar palavras-chave e escolher a imagem desejada — ela será baixada e aplicada automaticamente.

4. Selecione a imagem que preferir e clique em “Usar imagem” (ou equivalente)

Como trocar a imagem:

• Clique diretamente sobre a imagem já aplicada para abrir novamente as duas opções (galeria ou Unsplash).

Como remover a imagem:

• Clique no ícone de lixeira que aparece sobre a imagem aplicada.

Dica:

• A galeria mantém todas as imagens que você já fez upload no sistema, facilitando o reuso.
• O Unsplash é perfeito para encontrar fotos de alta qualidade rapidamente, sem precisar sair da ferramenta.

Modo Avançado

O modo avançado oferece controle detalhado da apresentação do formulário tanto no desktop quanto no mobile.

Personalização para Desktop

A aba desktop contém todas as opções de personalização para visualização em navegadores:

Configurações do Formulário

Configure a aparência geral do formulário:

1. Fundo do Formulário: Mesmas opções do modo básico
2. Largura do Formulário: Ajuste da largura do container
3. Cor dos Controles: Definição da cor principal do tema
4. Raio da Borda: Arredondamento dos cantos do container
5. Exibir Barra de Progresso: Ativar/desativar o indicador de progresso
6. Exibir Título: Ativar/desativar o título do formulário

Cabeçalho e Rodapé

Adicione seções personalizadas de cabeçalho/rodapé ao formulário:

Como ativar:

1. Expanda o painel "Formulário"
2. Marque as caixas "Cabeçalho" ou "Rodapé"
3. Configure as opções específicas da seção (veja abaixo)

Personalização para Mobile

Crie uma aparência separada para dispositivos móveis:

Como ativar a personalização mobile:

1. Clique na aba "Mobile" (ícone de celular)
2. Ative o interruptor "Ativar Ambiente"
3. Configure as opções específicas para mobile

Configurações do Formulário

Disponíveis tanto no desktop quanto no mobile:

Configuração	Descrição	Desktop	Mobile
Fundo do Formulário	Estilo do fundo	✓	✓
Largura do Formulário	Largura do container	✓	✗
Cor dos Controles	Cor principal do tema	✓	✓
Raio da Borda	Arredondamento dos cantos	✓	✓
Exibir Barra de Progresso	Exibir progresso	✓	✓
Exibir Título	Exibir título do formulário	✓	✓

Seções da Tela

Personalize regiões específicas da tela ao redor do formulário:

Seções Disponíveis

• Tudo: Aplica configurações a todo o fundo da tela
• Cabeçalho: Parte superior da tela
• Rodapé: Parte inferior da tela
• Topo: Área superior (largura total)
• Topo Esquerda: Canto superior esquerdo
• Topo Centro: Área central superior
• Topo Direita: Canto superior direito
• Base: Área inferior (largura total)
• Base Esquerda: Canto inferior esquerdo
• Base Centro: Área central inferior
• Base Direita: Canto inferior direito
• Esquerda: Lateral esquerda (altura total)
• Direita: Lateral direita (altura total)

Como selecionar seções:

1. Expanda o painel "Tela"
2. Marque as seções que deseja personalizar
3. Cada seção selecionada aparecerá como um acordeão expansível abaixo

Personalização Específica por Seção

Após selecionar as seções da tela, você pode personalizá-las individualmente:

Opções de Texto

• Texto: Texto personalizado para a seção
• Cor da Fonte: Seletor de cor do texto

Opções de Fundo

• Cor de Fundo: Cor de fundo da seção
  • Use o seletor de cores para cores personalizadas
  • Clique no botão "Transparente" para fundo transparente

Opções de Imagem

• Imagem: Upload ou seleção de imagem de fundo
  • Clique na área de upload para adicionar
  • Clique na imagem atual para trocar
  • Clique na lixeira para remover
• Repetir Imagem: Ativar para mosaico da imagem

Opções de Layout

• Margem Superior: Espaçamento superior
• Margem Esquerda: Espaçamento à esquerda
• Margem Direita: Espaçamento à direita
• Margem Inferior: Espaçamento inferior
• Altura: Altura da seção em pixels
• Largura: Largura da seção em pixels
• Alinhamento: Alinhamento do conteúdo (início, centro, fim)
• Raio da Borda: Arredondamento dos cantos
• Largura Total da Tela: Expandir a seção para largura total

Observação: As opções disponíveis variam conforme o tipo de seção. Nem todas as opções se aplicam a todas as seções.

Posição do Formulário (Somente Desktop)

Ajuste fino da posição do formulário na tela:

1. Alinhamento do Formulário: Esquerda, centro ou direita
2. Margem Superior: Espaço a partir do topo
3. Margem Esquerda: Espaço à esquerda (quando alinhado ao início)
4. Margem Direita: Espaço à direita (quando alinhado ao fim)
5. Margem Inferior: Espaço a partir da base

Gerenciando Personalizações

Salvando Alterações

1. Faça as alterações desejadas
2. As mudanças são exibidas em tempo real
3. Clique no botão "Salvar" no cabeçalho
4. As personalizações serão aplicadas ao formulário ativo

Observação: O botão Salvar só aparece quando há alterações não salvas.

Cancelando Alterações

• Clique no botão "Cancelar" para descartar alterações não salvas
• O formulário voltará ao último estado salvo

Desativando a Personalização

Para desativar temporariamente sem perder as configurações:

1. Desative o interruptor "Personalização Ativada" no cabeçalho
2. O formulário voltará à aparência padrão
3. Reative para voltar às suas personalizações

Removendo a Personalização

Para remover permanentemente todas as personalizações:

1. Clique no botão "Remover Personalização"
2. Confirme a ação
3. Todas as configurações serão excluídas
4. O formulário voltará à aparência padrão

Melhores Práticas

Imagens

• Resolução: Use imagens de alta qualidade (mínimo 1920x1080 para fundos)
• Tamanho do Arquivo: Otimize as imagens para reduzir o tempo de carregamento (< 500KB recomendado)
• Formato: JPEG para fotos, PNG para gráficos com transparência
• Conteúdo: Certifique-se de que as imagens não distraiam do conteúdo do formulário

Cores

• Contraste: Garanta contraste suficiente entre texto e fundo
• Consistência: Use as cores da sua marca de forma consistente
• Acessibilidade: Teste as cores para acessibilidade a daltônicos
• Cor dos Controles: Escolha uma cor que se destaque contra os fundos

Layout

• Alinhamento: Alinhamento central funciona melhor na maioria dos formulários
• Largura: Mantenha a largura entre 600-800px para melhor legibilidade
• Margens: Use espaçamento consistente em todo o formulário
• Mobile: Sempre teste a personalização mobile em dispositivos reais

Performance

• Seções: Ative apenas as seções realmente necessárias
• Imagens: Comprima as imagens antes do upload
• Testes: Visualize o formulário em diferentes dispositivos e navegadores

Perguntas frequentes

P: Posso ter aparências diferentes para desktop e mobile?

R: Sim! Use o Modo Avançado e personalize cada ambiente separadamente. Ative a personalização mobile na aba Mobile.

P: As personalizações afetam a funcionalidade do formulário?

R: Não, as personalizações são apenas visuais e não afetam lógica, validação ou coleta de dados.

P: Posso desfazer alterações após salvar?

R: Sim, você pode modificar ou remover as personalizações a qualquer momento. Não há histórico de desfazer integrado, portanto documente suas configurações se necessário.

P: O que acontece se eu desativar a personalização mobile?

R: O tema desktop será usado em dispositivos móveis.

P: Posso copiar personalizações de um formulário para outro?

R: Esse recurso ainda não está disponível. Será necessário recriar manualmente as personalizações em cada formulário.

P: Como sei qual tamanho de imagem usar?

R: Para fundos em tela cheia, use pelo menos 1920x1080. Para seções, o tamanho depende das dimensões definidas.

P: Por que não vejo algumas opções de personalização?

R: Algumas opções só estão disponíveis no Modo Avançado ou para tipos específicos de seção. Alterne para o Modo Avançado para controle total.

P: Posso usar CSS personalizado?

R: A personalização direta via CSS não está disponível nesta interface. Use os controles fornecidos para ajustes visuais.

P: Qual a diferença entre "Transparente" e cor de fundo transparente?

R: A opção "Transparente" como fundo do formulário oferece diferentes níveis de transparência. O botão transparente na personalização de seções define o fundo como totalmente transparente (#00000000).

P: Como criar uma experiência com a marca da empresa?

R:

1. Use as cores da sua marca na Cor dos Controles
2. Adicione seu logo/imagem da marca na seção Cabeçalho
3. Use imagens de fundo adequadas à marca
4. Mantenha espaçamento e alinhamento consistentes
5. Teste em todos os dispositivos