NSMKTAparência do formulário
Aplique um tema rápido ou escolha cores, fonte, logo e imagem de fundo, com CSS personalizado para ajustes finos.
Na aba Aparência do editor você deixa o formulário com a cara da sua marca. Cada mudança aparece na hora na pré-visualização ao lado. Lembre-se de Salvar no final.
Temas rápidos
Os temas rápidos trocam de uma vez a cor principal, o fundo e o texto. São eles: NSMKT, Noite, Areia, Mata, Uva, Coral e Grafite. O tema em uso aparece destacado.
Depois de aplicar um tema, você pode ajustar qualquer cor por conta própria.
Cores e fonte
| Opção | Onde aparece |
|---|---|
| Cor principal | Botões, opções de escolha, respostas digitadas e barra de progresso |
| Fundo | Fundo da página |
| Texto | Perguntas e descrições |
Escolha a cor pelo seletor ou digite o código hexadecimal, como #1AA7D8. O texto dos botões fica branco ou escuro automaticamente, conforme o que dá mais contraste com a cor principal.
Em Fonte, escolha entre Manrope, Inter, Poppins, Montserrat, Sora, Lora e Playfair Display.
Prefira um fundo claro com texto escuro, ou o contrário. Combinações com pouco contraste cansam a leitura, principalmente no celular, ao ar livre.
Imagens
Logo
O logo aparece no canto superior do formulário. PNG com fundo transparente fica melhor.
Imagem de fundo
A imagem de fundo fica atrás das perguntas, coberta por um véu na cor de fundo para manter a leitura.
Como colocar uma imagem
- Clique em Enviar e escolha o arquivo do seu computador. Ou cole no campo um endereço que comece com
https://. - Confira a miniatura e a pré-visualização.
- Para tirar a imagem, clique no X ao lado.
As imagens enviadas precisam ser PNG, JPG, GIF ou WebP, com até 3 MB.
Quando alguém compartilha o link do formulário no WhatsApp ou nas redes sociais, a prévia usa a imagem de fundo (ou o logo, se não houver imagem de fundo) e o texto da tela de boas-vindas.
O nome da sua empresa aparece no topo do formulário, ao lado do logo. Ele vem do cadastro da sua conta.
CSS personalizado
O campo CSS personalizado é opcional e serve para ajustes finos que as opções acima não cobrem, como deixar os botões arredondados ou os títulos mais grossos. Use só se você ou alguém da sua equipe conhece CSS.
As classes principais são:
| Classe | Elemento |
|---|---|
.nsf-titulo | Título da pergunta |
.nsf-desc | Descrição da pergunta |
.nsf-input | Campo de resposta |
.nsf-opcao | Opção de escolha |
.nsf-btn | Botões |
.nsf-progresso | Barra de progresso |
Exemplo: .nsf-btn { border-radius: 999px; } deixa os botões em formato de pílula.
O CSS personalizado pode ter até 20 mil caracteres.
Um CSS errado pode esconder perguntas ou botões. Depois de mudar, teste o formulário na pré-visualização, no celular e no computador, antes de divulgar.
Veja também Criar e editar um formulário e Como o visitante vê o formulário.