### [Criar Layouts de Formulário com Várias Colunas Usando Classes CSS](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/) **Publicado:** 1 de junho de 2018 **Autor:** Umair Majeed **Resumo:** Aprenda a usar as configurações de layout de várias colunas para organizar os campos do seu formulário. **Conteúdo:** Gostaria de condensar os seus formulários exibindo os campos em várias colunas? O WPForms facilita a divisão de formulários em metades, terços ou até layouts mais complexos. Este tutorial mostrar-lhe-á como usar as nossas configurações de layout de várias colunas para ajudar os seus formulários a terem o melhor aspeto. - [Criar Formulários com Várias Colunas Usando Layouts Visuais](#visual) - [Adicionar Classes CSS de Várias Colunas Manualmente](#manual) - [Notas Adicionais para Usar Layouts de Várias Colunas](#notes) - [Perguntas Frequentes](#faq) **Nota:** Recomendamos o uso do [campo de Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) para uma abordagem mais simples de arrastar e soltar na criação de layouts de formulário avançados. No entanto, as classes CSS de layout abordadas neste tutorial ainda são suportadas. --- Antes de começar, primeiro precisará de garantir que o WPForms está [instalado e ativado](https://wpforms.com/docs/install-wpforms-plugin/) no seu site WordPress e que [verificou a sua licença](https://wpforms.com/docs/verify-wpforms-license/). Em seguida, pode [criar um novo formulário](https://wpforms.com/docs/creating-first-form/) ou editar um existente para aceder ao construtor de formulários. ## Criar Formulários com Várias Colunas Usando Layouts Visuais O WPForms inclui uma ferramenta de layout visual que lhe permite criar várias colunas sem código. Para aceder a esta ferramenta, clique em qualquer campo no construtor para abrir o seu painel de Opções de Campo. Em seguida, clique no separador **Avançado**. Abra a ferramenta de layouts visuais clicando em **Mostrar Layouts** ao lado da opção Classes CSS. Isto revelará várias opções de layout pré-feitas que pode usar no seu formulário. **Nota:** A opção **Mostrar Layouts** está disponível apenas para utilizadores do WPForms Lite. Se estiver a usar o plugin WPForms Pro, será obrigado a usar o [campo de Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) para criar campos de formulário com várias colunas. Para o nosso exemplo, queremos que os nossos campos Nome e Email apareçam um ao lado do outro, e que cada um ocupe metade da largura do formulário. Para criar este layout, selecionaremos a opção que mostra duas caixas de tamanho igual. Depois de selecionarmos este layout, precisamos de escolher em qual coluna queremos que este campo em particular apareça. Como o nosso campo Nome é o primeiro no nosso formulário, queremos que ele apareça na coluna da esquerda. Quando clica numa coluna na ferramenta de layouts visuais, as classes correspondentes são automaticamente adicionadas à configuração de Classes CSS do campo. A classe `wpforms-one-half` diz ao campo para ocupar metade da largura disponível, enquanto a classe `wpforms-first` diz ao campo que ele precisa de iniciar uma nova linha. Em seguida, precisamos de realizar o mesmo processo para o nosso campo Email. No entanto, colocá-lo-emos na coluna da direita. Quando terminar de adicionar os seus campos ao seu layout, certifique-se de guardar as suas alterações no construtor de formulários. Veja como o nosso exemplo de layout de várias colunas fica no frontend do nosso site: Veja o nosso [Modelo de Formulário de Pedido de Orçamento com Várias Colunas](https://wpforms.com/templates/multi-column-request-a-quote-form-template/) que usa classes CSS para criar um layout compacto e com várias colunas. ## Adicionar Classes CSS de Várias Colunas Manualmente Se preferir não usar a ferramenta de layouts visuais, pode digitar manualmente classes CSS no campo relevante no separador Avançado do painel Opções de Campo. Aqui estão todas as classes CSS disponíveis para layouts de várias colunas: - wpforms-one-half - wpforms-one-third - wpforms-one-fourth - wpforms-one-fifth - wpforms-one-sixth - wpforms-two-thirds - wpforms-two-fourths - wpforms-two-fifths - wpforms-two-sixths - wpforms-three-fourths - wpforms-three-fifths - wpforms-three-sixths - wpforms-four-fifths - wpforms-four-sixths - wpforms-five-sixths A imagem abaixo mostra 3 layouts comuns de formulário com várias colunas. Os rótulos indicam quais classes CSS foram usadas da lista acima. **Nota:** O primeiro campo em cada linha na imagem acima também usa a classe `wpforms-first`. **Nota:** O primeiro campo em cada linha na imagem acima também usa a classe `wpforms-first`. ## Notas Adicionais para Usar Layouts de Várias Colunas Ao usar classes de coluna, há algumas coisas importantes a notar: - As colunas não se aplicam no construtor de formulários. Elas só são visíveis ao ver o formulário no frontend do seu site. Sempre [teste os seus formulários](https://wpforms.com/docs/how-to-properly-test-your-wordpress-forms-before-launching-checklist/) antes de os publicar para garantir que está satisfeito com os seus layouts. - O primeiro campo em cada linha deve ter a classe `wpforms-first` além da sua classe de coluna. Isto diz ao plugin que é o primeiro item e reinicia quaisquer colunas anteriores no formulário. - Na maioria dos casos, ao usar classes de coluna, deve definir o **Tamanho do Campo** (também no separador Avançado do painel Opções de Campo) como **Grande**. Isto permite que o campo preencha todo o espaço disponível na sua coluna e mantém o espaçamento direito e esquerdo uniforme em relação aos campos vizinhos. - Se usar um layout de várias colunas [com campos condicionais](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/), quaisquer campos que sejam mostrados condicionalmente serão alinhados à esquerda. Para manter estes campos alinhados de acordo com o seu layout preferido, pode usar este trecho de CSS: **Nota:** Se não estiver familiarizado com o uso de CSS no WPForms, consulte o [nosso guia de CSS para iniciantes](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/) e o nosso documento sobre [uso de classes personalizadas com WPForms](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/). ## Perguntas Frequentes Estas são respostas a algumas das principais perguntas sobre a criação de layouts de formulário com várias colunas. #### Por que é que o layout de várias colunas não está a funcionar quando pré-visualizo o meu formulário? Se o Marcador Moderno estiver ativado nas suas configurações do WPForms, as classes CSS de várias colunas não funcionarão quando vir o seu formulário no frontend. Para corrigir este problema, terá de desativar o Marcador Moderno. **Nota:** Desativar o Marcador Moderno impede-o de estilizar formulários no editor de blocos. Recomendamos o uso do [campo de Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) para criar campos de formulário com várias colunas se ainda quiser estilizar o seu formulário no editor de blocos. Para isso, vá a **WPForms » Configurações** e selecione o separador **Geral**. Depois disso, role para baixo e desmarque a opção **Usar Marcador Moderno**. Certifique-se de guardar as suas alterações quando terminar. Nota: Se não conseguir encontrar as configurações de Marcador Moderno, terá de adicionar um filtro para forçar o WPForms a mostrar esta opção. Consulte o nosso guia de [estilização de formulários](https://wpforms.com/docs/styling-your-forms/#show-hide-modern-markup) para mais detalhes. É isso! Agora pode otimizar os seus formulários com layouts de várias colunas. Em seguida, gostaria também de fazer com que os seus formulários fiquem bem em dispositivos móveis? Pode configurar o seu formulário para ter um layout de várias colunas que muda para [exibir campos numa única coluna em dispositivos móveis](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/), para que seja fácil de usar em qualquer dispositivo. **Categorias:** Estilização, Estilização e Personalização ---