Cada formulário pode ser personalizado pra bater com a identidade visual da sua marca. São 9 cores ajustáveis (não 1 só), fonte de uma lista de 9 opções populares, slider de border radius (cantos arredondados), logo opcional, e imagem de fundo opcional. Esse artigo explica cada uma.
Pré-requisitos
- Formulário criado. Veja Criar formulário.
- Permissão admin ou manager.
Acessar personalização
/formularios/{form}/editar.- Sidebar → abas Cores, Branding, Layout.
- Side direita mostra preview ao vivo (iframe) — cores mudam em tempo real.
As 9 cores ajustáveis
Diferente de outros sistemas que têm 1 cor "primária" só, o Syncro permite ajustar cada elemento separadamente. Isso evita problemas de contraste (ex: botão azul-escuro com texto preto = ilegível).
Cada cor tem linha própria com:
- ~7 presets contextuais em círculos 30×30.
- Botão
+com<input type="color">embutido pra custom. - Hex atual mostrado à direita do label.
1. Cor primária (brand_color)
Cor de destaque do form — usada em focus de inputs (borda azul ao clicar), badges, links.
Presets: #0085f3 (azul Syncro default), #10b981 (verde), #8b5cf6 (roxo), #f43f5e (rosa), #f59e0b (laranja), #475569 (cinza), #1a1d23 (preto).
💡 Dica: use a mesma cor primária do seu site/marca. Garante visual coeso.
2. Cor de fundo (background_color)
Fundo fora do card (ou da viewport inteira em conversational/clássico fullscreen).
Presets: #ffffff (branco), #f8fafc (cinza-claro), #f0fdf4 (verde-pastel), #faf5ff (lavanda), #fff1f2 (rosa-pastel), #fffbeb (creme), #0f172a (azul-noite, dark mode).
⚠️ Atenção: se ativar imagem de fundo (
background_image_url), essa cor fica embaixo da imagem (visível só nas bordas).
3. Cor do card (card_color)
Fundo do card branco que envolve o form.
Presets: #ffffff (branco), #f8fafc (cinza-claro), #f1f5f9 (cinza-médio), #1e293b (azul-escuro), #0f172a (preto-azulado).
💡 Dica: pra dark mode, combine
background_color=#0f172a(fundo) +card_color=#1e293b(card mais claro) +input_text_color=#ffffff+label_color=#e2e8f0.
4. Cor do botão (button_color)
Cor de fundo do botão Submit ("Enviar").
Presets: iguais à cor primária.
💡 Dica: deixe igual à cor primária ou use cor mais saturada/contrastante pro botão chamar atenção (ex:
brand_color=azul,button_color=verde).
5. Texto do botão (button_text_color)
Cor do texto dentro do botão Submit.
Presets: #ffffff (branco), #f1f5f9 (cinza-clarinho), #1a1d23 (preto), #000000 (preto puro).
⚠️ Atenção: se botão é claro (ex: amarelo), use texto escuro (preto). Se botão é escuro (azul, preto), use texto claro (branco). Contraste é fundamental.
6. Labels (label_color)
Cor dos labels dos campos ("Nome completo", "E-mail", etc).
Presets: #1a1d23 (preto), #374151 (cinza-escuro), #6b7280 (cinza-médio), #ffffff (branco — pra dark mode), #e2e8f0 (cinza-clarinho — dark mode).
💡 Dica: labels muito escuros em fundo branco ofuscam — use cinza-escuro (
#374151) pra UX mais leve.
7. Borda dos campos (input_border_color)
Cor da borda dos inputs (state default — sem foco).
Presets: #e5e7eb (cinza-clarinho), #d1d5db (cinza-médio), #bfdbfe (azul-pastel), #a7f3d0 (verde-pastel), #334155 (azul-escuro — dark mode).
Borda de foco usa cor primária automaticamente.
8. Fundo dos campos (input_bg_color)
Cor de fundo do input (state default).
Presets: #ffffff (branco), #f8fafc (cinza-clarinho), #f9fafb (cinza), #0f172a (dark), #1e293b (dark-light).
9. Texto dos campos (input_text_color)
Cor do valor digitado dentro do input.
Presets: #1a1d23 (preto), #374151 (cinza-escuro), #ffffff (branco — dark), #f1f5f9 (cinza-clarinho — dark).
⚠️ Atenção: contraste input_text_color × input_bg_color é crítico. Cinza-clarinho em branco = ilegível. Sempre teste preview.
Color presets prontos
Em vez de configurar cada cor, você pode escolher um preset completo. Disponíveis:
- Default — azul Syncro (
#0085f3). - Emerald — verde esmeralda.
- Purple — roxo.
- Rose — rosa.
- Amber — âmbar/laranja.
- Slate — cinza profissional.
- Dark — modo escuro completo.
- Custom — usa as cores que você definiu manualmente.
💡 Dica: comece com preset, depois ajuste 1-2 cores específicas. Mais rápido do que zero-config.
Fonte (font_family)
9 opções populares:
| Fonte | Estilo |
|---|---|
| Inter (default) | Moderna, neutra, ótima legibilidade |
| Plus Jakarta Sans | Geométrica, atual |
| Poppins | Arredondada, simpática |
| Roboto | Material Design, clean |
| Open Sans | Clássica, neutra |
| Lato | Humanista, amigável |
| Montserrat | Geométrica, urbano |
| Georgia | Serif, editorial |
| Courier New | Monospace, técnica |
Carregada via Google Fonts no <head> da página pública.
💡 Dica: use a mesma fonte do seu site pra consistência visual quando o form está embedado inline.
Border radius
Slider de 0-20px.
| Valor | Estilo |
|---|---|
| 0px | Cantos retos (corporativo, técnico) |
| 4-6px | Levemente arredondado (default web atual) |
| 8px (default Syncro) | Arredondamento médio |
| 12-16px | Arredondado (estilo "App Store") |
| 20px | Muito arredondado (estilo "social, jovem") |
Aplica em:
- Inputs.
- Botões.
- Card do form (com
+4pxextra automático).
Logo
Como ativar
- Aba Branding.
- Toggle Habilitar logo (default ON).
- Dropzone aparece — arraste arquivo PNG/JPG/WebP (max 2MB).
- Logo é uploaded e fica salvo em
logo_url.
Posicionamento
logo_alignment:
- Esquerda: logo no canto esquerdo do card.
- Centro (default): logo centralizado acima.
- Direita: logo no canto direito.
Quando usar / não usar
- ✅ Use em forms standalone (link hospedado).
- ✅ Use em popups grandes (centro).
- ❌ Não use em embed inline (já está dentro do site, redundante).
- ❌ Não use em popup pequeno bottom-right (poupa espaço).
⚠️ Atenção: SVG não é aceito (validação SafeImage rejeita). Use PNG/JPG/WebP.
Imagem de fundo
Como ativar
- Aba Branding.
- Toggle Habilitar imagem de fundo (default OFF).
- Dropzone — arraste PNG/JPG/WebP (max 5MB).
- Imagem cobre toda página atrás do card.
Quando usar
- Forms hospedados (link público).
- Pra criar landing page completa com identidade visual forte.
- Ex: página de evento com foto do palestrante atrás.
Quando NÃO usar
- Embed inline (não tem viewport completa, fica estranho).
- Popup (sobrescreve o site, polui).
💡 Dica: use imagem escura ou desfocada se o card é claro. Senão, contraste fica ruim.
Layout (alinhamento na página)
3 opções (só clássico/multistep — conversacional é fullscreen sempre):
- Esquerda: form alinhado à esquerda da viewport (header tipo wave/landing modern).
- Centro (default): form centralizado.
- Direita: form à direita.
Em mobile, todos viram fullscreen (sem padding lateral excessivo).
Preview ao vivo
Lateral direita da edição mostra iframe que renderiza /f/{slug}?preview=1. Sempre que você muda uma cor/fonte:
- Edição envia
postMessagepro iframe com novos valores. - Iframe atualiza CSS sem reload — preview instantâneo.
Útil pra testar combinações sem salvar.
Testes recomendados
1. Contraste em devices
- Desktop: cor X cor (foco em background vs card).
- Mobile: zoom out, vê se botão lê bem.
- Tablet: portrait + landscape.
2. Modo claro vs escuro do device
Se site do user está em dark mode (sistema operacional), formulário fica destoante se for branco. Considere ter 2 forms (claro e escuro) ou 1 com cor neutra.
3. Validação de leitura
Use ferramenta tipo WebAIM Contrast Checker — cole as cores texto/fundo, garanta ratio AA mínimo (4.5:1 pra texto normal, 3:1 pra texto grande).
Mobile responsiveness
Form é responsivo nativo. Em mobile:
- Card ocupa 100% da largura (com padding 16-24px nas bordas).
- Inputs ficam fullwidth.
- Logo fica menor automático (max-height 60px).
- Background image faz cover (corta lateral se preciso).
Sem configuração extra — funciona automático.
Erros comuns
"Cor mudei mas preview não atualiza"
- Verifique se você clicou fora do color picker (alguns browsers só atualizam ao perder foco).
- F5 a página de edição.
- Verifique console por erros JS.
"Logo aparece distorcido"
- PNG/JPG com proporção quebrada ao redimensionar. Salve com tamanho original menor (ex: max 200×60px).
- Use PNG transparente pra logo sem fundo branco.
"Background image fica pixelada"
- Imagem menor que viewport. Suba imagem maior (recomendado 1920×1080).
"Texto botão ilegível"
Contraste ruim entre button_color × button_text_color. Ajuste pra cores opostas (claro × escuro).
Próximos passos
- Pra publicar no site, veja Embedar no site via SDK.
- Pra ver envios, veja Ver envios.