A maioria das pessoas hoje preenche formulários no celular, mas seu público também acessa pelo notebook ou pelo tablet. Para garantir que o seu formulário fique impecável em qualquer dispositivo, o Yay! Forms permite que você visualize e personalize o layout especificamente para Desktop, Tablet e Celular — sem precisar manter três formulários diferentes.
Como funciona o seletor de dispositivos
Acima do canvas de edição, você verá uma barra com três opções: Desktop, Tablet e Celular.
- Desktop — é a base padrão. Tudo que você configura aqui serve de referência para os outros dispositivos.
- Tablet — herda automaticamente as configurações do Desktop. Personalize quando quiser algo diferente.
- Celular — herda do Desktop por padrão, mas com adaptações automáticas para garantir uma boa experiência (botões maiores, imagens reposicionadas, etc.).
Layouts disponíveis em cada dispositivo
No Desktop e no Tablet, você tem 7 opções de layout para a mídia:
- Plano de fundo (Full)
- Lateral esquerda (Float-left)
- Lateral direita (Float-right)
- Dividido à esquerda (Split-left)
- Dividido à direita (Split-right)
- Banner no topo
- Banner no meio
No Celular, alguns layouts são automaticamente adaptados, porque metade-metade lado-a-lado em uma tela de 6 polegadas não funciona bem:
- Dividido (esquerda/direita) → vira automaticamente “imagem em cima, conteúdo embaixo”.
- Lateral (Float) → vira “imagem inline acima do conteúdo”.
Os layouts que você pode escolher diretamente no modo Celular são 4: Plano de fundo, Split topo (vertical), Banner topo e Banner meio. O Split topo é exclusivo do Celular: ele divide imagem em cima e conteúdo embaixo, em altura fixa, com aparência consistente e otimizada para mobile.
Como criar um ajuste específico para Mobile ou Tablet
- Clique na aba Celular (ou Tablet) acima do canvas.
- Faça o ajuste desejado na barra lateral direita. Cada propriedade pode ter um valor diferente por dispositivo: layout, altura, largura, Ajuste da imagem, Ponto focal e até texto alternativo. O caso mais comum é manter a mesma imagem em todos os dispositivos e variar só essas configurações para que ela se encaixe bem em cada tela; mas você também pode trocar a mídia em si, se preferir.
- Ao mudar algo no modo Celular ou Tablet, aparece uma bolinha azul ao lado da propriedade alterada, indicando que aquela propriedade tem um ajuste específico para esse dispositivo.
Como remover um ajuste específico (voltar a herdar do Desktop)
Se quiser desfazer o ajuste e fazer com que o Celular ou Tablet volte a herdar do Desktop:
- Clique na bolinha azul ao lado da propriedade.
- O ajuste é removido e aquela propriedade volta a usar o que está configurado no Desktop.
A bolinha continua presente na aba do dispositivo enquanto pelo menos uma propriedade do campo tem override. Quando todos os ajustes são removidos, ela some.
Boas práticas
- Comece pelo Celular. Como o tráfego primário de respostas em formulários tende a vir do mobile, configure e visualize o Celular primeiro — esse é o cenário em que seu formulário precisa estar perfeito.
- Em seguida, troque para Tablet e Desktop para conferir como ficou e ajustar o que precisar de diferente nessas telas.
- Personalize por dispositivo apenas quando realmente necessário. Cada override aumenta a manutenção do seu formulário ao longo do tempo.
Recursos relacionados
- Como definir o ponto focal e o ajuste da imagem
- Como alterar o posicionamento da sua imagem
- Como adicionar vídeo, GIF, imagem ou logo em seu formulário
Suporte
Se você tiver alguma dúvida ou sugestão, envie um e-mail para help@yayforms.com
Conclusão
Com a barra de dispositivos no canvas e o sistema de overrides por bolinha azul, você consegue garantir que seu formulário fique impecável em qualquer tela — sem manter formulários paralelos. Comece pelo Celular (que costuma ser onde está a maior parte do seu tráfego), ajuste o que precisar para Tablet e Desktop, e use a bolinha azul tanto como indicador quanto como atalho para reverter um override.