Pular para o conteúdo

Design e tema

O tema do formulário no trulyform: cores, contraste mínimo, fonte, cantos, espaçamento, imagens e logo, com paletas que já passam na verificação.

Ver em Markdown (inglês)

Todas as páginas da documentação
Nesta página

O que você precisa saber

  • O tema define as cores, a fonte, o arredondamento dos cantos e o espaçamento do formulário inteiro.
  • O texto precisa ter contraste de pelo menos 4,5:1 com o fundo, e o texto do botão, com a cor do botão. Sem isso, não dá para publicar o formulário.
  • Imagens e logos são enviados no editor do trulyform, não via MCP. Mantenha todos os IDs de arquivo que get_form retorna e use null nas perguntas novas.
  • Logo próprio exige o plano Business.

Campos do tema

A referência técnica a seguir é gerada a partir do código e está em inglês, como os assistentes de IA a leem.

Campo Observações
preset Name of the starting theme, up to 40 characters, such as paper, midnight or warm from the editor. Any name is accepted, and it does not change the colors below.
background Page background, as #RRGGBB.
foreground Text color, as #RRGGBB. Needs a 4.5:1 contrast ratio with background.
primary Button and accent color, as #RRGGBB.
buttonText Text on buttons, as #RRGGBB. Needs a 4.5:1 contrast ratio with primary.
font One of: Inter, Georgia, system-ui.
radius Corner radius in pixels, a whole number from 0 to 24.
density One of: comfortable, compact.
logoAssetId An uploaded logo, or null. Keep the value get_form returns; assets cannot be uploaded over MCP.
backgroundAssetId An uploaded background image, or null. Keep the value get_form returns.

Cores legíveis

Antes de publicar, o trulyform confere dois pares: foreground sobre background e buttonText sobre primary. Cada par precisa de uma razão de contraste de pelo menos 4,5:1, o nível AA da WCAG para texto normal. Texto escuro em fundo claro passa, e texto branco num botão de cor saturada e mais para o escuro também.

Estas paletas vêm dos exemplos completos, e todas passam na verificação:

  • Workshop registration: background #fffaf3, foreground #1f2933, primary #c2410c, buttonText #ffffff, font Inter, radius 12, density comfortable.
  • Customer feedback: background #f5f7ff, foreground #111827, primary #4338ca, buttonText #ffffff, font Inter, radius 16, density comfortable.
  • Job application: background #ffffff, foreground #0f172a, primary #047857, buttonText #ffffff, font Georgia, radius 4, density compact.
  • Contact request: background #ffffff, foreground #111827, primary #2563eb, buttonText #ffffff, font Inter, radius 12, density comfortable.

Imagens

mediaDefaults guarda a imagem padrão do formulário, e o media de cada pergunta diz se ela usa essa imagem ou uma própria:

  • mediaDefaults: {assetId, layout, altText}. layout pode ser above, side ou background.
  • O media da pergunta: {inherit, assetId, layout}. Com "inherit": true, a pergunta usa a imagem padrão do formulário. Com false, usa o próprio assetId, e a configuração imageAlt dela descreve a imagem.

Via MCP:

  • Mantenha mediaDefaults e os valores de media que já existem exatamente como get_form retorna.
  • Use {"inherit": true, "assetId": null, "layout": "above"} nas perguntas novas.
  • Nunca invente um assetId. Um ID de arquivo que não pertence ao formulário faz o salvamento falhar.

theme.logoAssetId mostra um logo no formulário. Para adicionar ou trocar o logo, é preciso o plano Business, e formulários novos de uma organização Business podem já vir com o logo da organização. Mantenha o valor que get_form retorna.

Pronto para criar?
Conecte seu assistente.

Escolha o assistente que você usa, entre no trulyform e peça o formulário de que precisa.

Escolher assistente