Inserindo imagens de fundo no formulário
Uma das opções que o Respondi oferece é customizar seu formulário inserindo uma imagem de fundo. Para fazer isso é bem fácil:
- No formulário desejado, clique na aba superior de "Opções";
- Na categoria "Personalizar estilo", clique no botão "Selecione um arquivo" que aparece dentro da opção "Imagem de fundo";
- Escolha em seus arquivos a imagem que deseja inserir como plano de fundo, clicando duas vezes em cima dela;
- Caso queira pré-visualizar como ficará a configuração do formulário, basta clicar no botão "Ver";
- Assim que finalizar, clique em "Publicar" para salvar a alteração;
Algumas informações importantes sobre essa funcionalidade
As imagens de fundo do formulário podem ser cortadas nas laterais dependendo do dispositivo. Isso acontece porque, no celular, a tela é mais estreita e a imagem precisa se adaptar ao formato vertical. Nessa adaptação, a lateral direita da imagem é cortada, enquanto a esquerda continua visível.
Por isso, é importante escolher um formato de imagem que funcione bem em ambos os dispositivos. Também sugerimos que você teste as visualizações nos dois dispositivos após fazer o upload da imagem. 😉
Se você usar uma imagem com largura de 1339 px e altura de 700 px, terá uma proporção bem equilibrada para visualização em computadores. No entanto, vale observar que:
- Em celulares, a lateral direita da imagem é cortada;
- O lado esquerdo permanece visível, então, se houver um elemento importante ali, ele continuará em destaque;
Sempre que possível, posicione os elementos essenciais à esquerda da imagem para garantir que a composição funcione bem em diferentes dispositivos;
Outra opção é usar um fundo neutro e adicionar imagens ou vídeos diretamente nos campos do formulário: Como adicionar imagens/vídeos no formulário
Idealmente, a imagem de fundo precisa ter uma resolução abaixo de 500Kb para que o formulário carregue de forma adequada. Se precisar reduzir o tamanho da sua imagem, você pode utilizar uma ferramenta como esta: Img2Go.
Abaixo você pode conferir dois exemplos de imagens de fundo e customização do formulário. O primeiro exemplo é sobre o que NÃO fazer levando em consideração a experiência do respondente. Já o segundo exemplo contém boas dicas de como escolher a melhor imagem de fundo para o seu formulário:
Como NÃO fazer
Note que a imagem de fundo escolhida não destaca a cor da pergunta, tornando difícil a leitura das perguntas. Além disso, a imagem escolhida não foi centralizada na tela quando o formulário é acessado pelo celular, de modo que as figuras ocuparam grande parte da tela.
Visualização pela tela do computador/notebook // Visualização do formulário pelo celular:
Como escolher uma boa imagem
Note que no segundo exemplo, a imagem escolhida contrasta bem com a cor das perguntas do formulário, tornando a leitura fácil. Do mesmo modo, a imagem de fundo também se adapta adequadamente na tela do celular, de forma que a parte mais neutra fique centralizada na tela.
Dê sempre preferência a imagens neutras e não se esqueça de customizar a cor das perguntas e respostas para que o contraste fique adequado :)
Visualização pela tela do computador/notebook || Visualização do formulário pelo celular:
