Inserindo Colunas no seu Formulário

26 de novembro de 2021

Nós sabemos que muitas vezes construir um formulário pode ser trabalhoso. A tarefa de distribuir os campos do formulário em um layout coerente não é nada fácil, principalmente para aqueles que não dominam as linguagens HTML e CSS.

É para esses usuários que desenvolvemos um recurso fácil de usar para que possam organizar seus formulários em colunas sem precisar adentrar os pormenores de seu código.

Youtube Embed Poster: f4dyCN2iy5o

1. Comprimir um campo de formulário

Para começar a organizar o seu formulário em colunas, primeiro você precisa aprender a encurtar os campos de formulário. Por configuração padrão, cada campo de formulário ocupa completamente uma linha inteira da página. Alterando o comprimento dos campos, você conseguirá acomodar dois campos de formulário no espaço de uma única linha. Veja no exemplo a seguir como reorganizamos os campos para exibi-los lado a lado:

Campos de formulário segundo a configuração padrão:

Inserindo Colunas no seu Formulário Image-4
Inserindo Colunas no seu Formulário Image-5
Inserindo Colunas no seu Formulário Image-1

Campos de formulário comprimidos e reposicionados:

Inserindo Colunas no seu Formulário Image-6

Para habilitar a opção “Comprimir” de cada campo de formulário, selecione o campo que você quer editar e clique no ícone de Propriedades. Vá para a aba AVANÇADO e deixe habilitada a opção “Comprimir”. Fazendo isso em todos os campos, automaticamente eles se reorganizarão em colunas. 

Nesta mesma aba, também há a opção “Mover para uma nova linha”. Habilitando esta opção, o campo de formulário continua comprimido, mas volta a ocupar uma linha inteira no formulário.

Guia relacionado: Como Posicionar os Campos do Formulário

Inserindo Colunas no seu Formulário Image-7
Inserindo Colunas no seu Formulário Image-8
Inserindo Colunas no seu Formulário Image-2

2. Configurações avançadas do layout do formulário

Se você deseja editar detalhes como a largura dos campos de formulário, da página do formulário ou os espaçamentos entre os campos, clique no ícone “Designer de Formulário” (representado por um rolo de pintura azul no canto superior direito da tela), role a página e clique no botão DESIGNER AVANÇADO.

Inserindo Colunas no seu Formulário Image-9
Inserindo Colunas no seu Formulário Image-10
Inserindo Colunas no seu Formulário Image-3

Clicando em DESIGNER AVANÇADO, uma nova janela se abrirá. Selecione a aba DESIGN, clique para expandir a seção LAYOUT DO FORMULÁRIO e configure as definições do formulário como desejar.

Inserindo Colunas no seu Formulário Image-11

Pronto! É tudo que você precisa fazer para organizar seu formulário em colunas!

Algumas coisas para ter em mente ao habilitar colunas no seu formulário:

? A largura da página do seu formulário

Garanta que a largura da página é suficiente para acomodar as colunas que você deseja criar.

? A largura de cada campo de formulário

Se você deseja criar um formulário em colunas e um dos campos do seu formulário parece não estar cabendo, você pode tentar reduzir sua largura. Altere a largura de cada campo de formulário de forma a assegurar que todos eles tenham a mesma largura.

? A posição do título do campo de formulário

Quando o título do campo está alinhado à esquerda do campo, ele toma mais espaço da linha do que quando o título está acima do campo. Quando você habilita a opção “Comprimir” para criar colunas, o título automaticamente é posicionado acima do campo.

TÍTULO ALINHADO À ESQUERDA (ocupa mais espaço horizontalmente):

Inserindo Colunas no seu Formulário Image-12

TÍTULO EM CIMA DO CAMPO (ocupa menos espaço horizontalmente):

Inserindo Colunas no seu Formulário Image-13

Veja um exemplo de um formulário organizado em duas colunas: https://www.jotform.com/70776407233962

Comentários e sugestões são bem-vindos abaixo. Se você tem uma pergunta, escreva para que o Fórum de Suporte possa ajudar você.

Contatar o Suporte:

Nossa equipe de suporte ao cliente está disponível 24 hrs e nosso tempo de resposta está entre uma e duas horas.
Nossa equipe pode ser contatada através dos links:

Fórum de Suporte: https://www.jotform.com/answers/

Contate o Suporte da Jotform: https://www.jotform.com/contact/

Enviar Comentário:

Jotform Avatar
Este site é protegido por reCAPTCHA, sendo aplicáveis a Política de Privacidade e os Termos de Serviço do Google.

Podo Comment Seja o primeiro a comentar.