# Design e layout

> O título, o logo e as cinco cores do seu formulário, os dois layouts, o link da política de privacidade, a prévia ao vivo e o que é igual em todos.

Seu formulário leva seu nome, seu logo e suas cores da primeira tela à última. Você define tudo no editor, e a prévia ao lado mostra o resultado.

## Título e descrição

Em **Detalhes do formulário**:

- **Título do formulário** é o título principal do formulário, com até 100 caracteres. Até um rascunho precisa de um. Na última tela, ele também é o nome da conversa que a pessoa está prestes a abrir.
- **Descrição** é opcional: até 240 caracteres abaixo do título, para dizer para que serve o formulário.

## Logo

Em **Logo**, selecione **Enviar imagem** e escolha um arquivo PNG, JPEG, WEBP, GIF ou SVG de até 20 MB. Você recorta a imagem em um quadrado, e ela é salva com 512 × 512 pixels, mantendo a transparência. O envio acontece quando você salva o formulário.

O logo aparece acima do título e na última tela. Sem logo, o formulário mostra as iniciais das duas primeiras palavras do título (Dental Sol vira DS) sobre a cor do seu botão.

## Cinco cores

O cartão **Design** tem cinco cores, e cada uma aceita qualquer valor hexadecimal.

| Cor                    | O que ela pinta                                  | Padrão    |
| ---------------------- | ------------------------------------------------ | --------- |
| **Título**             | O título do formulário e as perguntas            | `#1a1a1a` |
| **Texto**              | A descrição, o texto de ajuda e os outros textos | `#6b6560` |
| **Fundo**              | A página atrás do formulário                     | `#ffffff` |
| **Barra de progresso** | A barra no topo e o contador de perguntas        | `#075e54` |
| **Botão**              | Os botões, a resposta selecionada e as iniciais  | `#075e54` |

Todo o resto vem dessas cinco. Bordas, fundos dos campos e textos mais claros são misturas das suas cores com o seu fundo, então um fundo escuro funciona tão bem quanto um claro. O texto dos seus botões é escolhido para você: branco quando fica legível sobre a cor do botão, escuro quando não fica. Não há uma sexta cor para escolher.

## Dois layouts

Escolha um em **Layout** e troque quando quiser.

|                                   | **Passo a passo**                                      | **Tudo de uma vez**                                |
| --------------------------------- | ------------------------------------------------------ | -------------------------------------------------- |
| O que quem responde vê            | Uma tela de boas-vindas e depois uma pergunta por tela | O título e depois todas as perguntas em uma página |
| Como a pessoa avança              | **Start**, **Continue** ou **Skip**, **Finish**        | Rola a página e toca em **Finish**                 |
| Alcance por pergunta nas análises | Sim                                                    | Não                                                |

Passo a passo é o padrão. A tela de boas-vindas mostra seu logo, o título e a descrição, o número de perguntas e uma estimativa de tempo, como `5 questions · about 50s`.

Os dois layouts terminam na mesma tela: a mensagem que a pessoa está prestes a enviar, com **Open WhatsApp** e **Edit my answers**. As respostas em andamento ficam no navegador de quem responde durante a sessão, então recarregar a página ou passar rapidamente para outro app não faz perder nada.

## Link da política de privacidade

Em **Configurações**, ative **URL da política de privacidade** e cole o endereço da sua política. Ele precisa começar com `https://` ou `http://`. O formulário passa a mostrar um link **Privacy policy** no fim de todas as telas.

Funciona com ou sem respostas salvas. Se você salva as respostas, ter um link para a política é uma boa prática, e pode ser obrigatório onde você atua.

## Prévia ao vivo

A **Prévia do formulário** ao lado do editor (abaixo dele no celular) é o formulário real, desenhado pela mesma página que quem responde recebe. Ela é atualizada quando você conclui cada edição: ao sair de um campo de texto ou ao escolher uma opção.

Você pode responder como alguém de fora. **Finish** mostra a mensagem exata, e **Open WhatsApp** abre a conta que suas regras escolhem. A prévia não salva nada e nunca entra nas análises.

## O que é igual em todos

Estas partes são iguais em todos os formulários e não podem ser alteradas:

- Os textos do próprio formulário ficam em inglês: **Start**, **Continue**, **Skip**, **Finish**, **Open WhatsApp**, **Edit my answers**, a etiqueta **Optional** e as mensagens de erro.
- A frase “You'll finish the conversation on WhatsApp.” abaixo de **Start** ou **Finish**, e “We'll only use your details to reply on WhatsApp.” na última tela.
- O botão **Open WhatsApp** no verde do WhatsApp e o vermelho usado nos erros.
- A contagem de perguntas e a estimativa de tempo.
- O link **Powered by Walink** no fim da página.

Não há fontes personalizadas, CSS personalizado nem imagem de capa. Depois da última pergunta não há página de agradecimento nem redirecionamento: o formulário termina no WhatsApp.