Criação de Layouts de Formulário com Múltiplas Colunas Usando Classes CSS

Gostaria de condensar os seus formulários exibindo campos em múltiplas 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 definições de layout de múltiplas colunas para ajudar os seus formulários a terem o melhor aspeto.

---

Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado no seu site WordPress e que você tenha verificado sua licença. Em seguida, você pode criar um novo formulário ou editar um existente para aceder ao construtor de formulários.

Criação de Formulários com Múltiplas Colunas Usando Layouts Visuais

O WPForms inclui uma ferramenta de layout visual que lhe permite criar múltiplas 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çadas.

Abra a ferramenta de layouts visuais clicando em Mostrar Layouts ao lado da opção CSS Classes.

Isto revelará várias opções de layout pré-feitas que pode usar no seu formulário.

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 que 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 à definição de Classes CSS do campo. A classe wpforms-one-half indica ao campo para ocupar metade da largura disponível, enquanto a classe wpforms-first indica 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 múltiplas colunas aparece no frontend do nosso site:

Adicionar Classes CSS de Múltiplas Colunas Manualmente

Se preferir não usar a ferramenta de layouts visuais, pode digitar manualmente classes CSS no campo relevante no separador Avançadas do painel Opções de Campo.

Aqui estão todas as classes CSS disponíveis para layouts de múltiplas colunas:

• wpforms-metade
• wpforms-um-terço
• wpforms-um-quarto
• wpforms-um-quinto
• wpforms-um-sexto
• wpforms-dois-terços
• wpforms-dois-quartos
• wpforms-dois-quintos
• wpforms-dois-sextos
• wpforms-tr ilde{s
• wpforms-tr ilde{s-fifths
• wpforms-tr ilde{s-sixths
• wpforms-quatro-quintos
• wpforms-quatro-sextos
• wpforms-cinco-sextos

A imagem abaixo mostra 3 layouts comuns de v ilde{rias colunas. Os r ilde{tulos indicam quais classes CSS foram usadas da lista acima.

Notas Adicionais para Usar Layouts de Múltiplas Colunas

Ao usar classes de colunas, h ilde{a algumas coisas importantes a notar:

• As colunas n ildeo se aplicam no construtor de formul ilde{tios. Elas s ilde{o vis ilde ildeveis apenas ao visualizar o formul ilde{tio no frontend do seu site. Teste sempre os seus formul ilde{tios antes de os publicar para ter a certeza de que est ilde ildeo satisfeitos com os seus layouts.
• O primeiro campo em cada linha deve ter a classe wpforms-first para al ilde{m da sua classe de coluna. Isto indica ao plugin que ilde{e o primeiro item e reinicia quaisquer colunas anteriores no formul ilde{tio.
• Na maioria dos casos, ao usar classes de colunas, deve definir o Tamanho do Campo (tamb ilde{m no separador Avan ilde{t}ados das Op ilde{t}es do Campo) como Grande. Isto permite que o campo preencha todo o espa ilde{o dispon ilde ildevel na sua coluna e mant ilde{m o espa ilde{o}amento direito e esquerdo uniforme em rela ilde{o}o aos campos vizinhos.

• Se usar um layout de v ilde{rias colunas com campos condicionais, quaisquer campos que sejam mostrados condicionalmente ser ilde{o alinhados ilde{t} esquerda. Para manter estes campos alinhados de acordo com o seu layout preferido, pode usar este trecho de CSS:

Perguntas Frequentes

Estas são respostas a algumas das principais perguntas sobre a criação de layouts de formulários com várias colunas.

Por que o layout de v ilde{rias colunas n ildeo est ilde ildeo a funcionar quando pr ilde{e-visualizo o meu formul ilde{tio?

Se o Marcador Moderno estiver ativado nas suas defini ilde{t}es do WPForms, as classes CSS de v ilde{rias colunas n ildeo funcionar ilde{to quando visualizar o seu formul ilde{tio no frontend. Para corrigir este problema, ter ilde ildeo de desativar o Marcador Moderno.

Para isso, v ildeo a WPForms » Defini ilde{t}es e selecionem o separador Geral.

Depois disso, rolem para baixo e desmarquem a op ilde{o}o Usar Marcador Moderno.

Certifiquem-se de guardar as vossas altera ilde{t}es quando terminarem.

Pronto! J ilde ildeo podem otimizar os vossos formul ilde{tios com layouts de v ilde{rias colunas.

Em seguida, gostariam tamb ilde{m de fazer com que os vossos formul ilde{tios fiquem bem em dispositivos m ilde{o}veis? Podem configurar o vosso formul ilde{tio para ter um layout de v ilde{rias colunas que muda para exibir os campos numa ilde{u}nica coluna em dispositivos m ilde{o}veis, para que seja f ilde{t}il de usar em qualquer dispositivo.