Resumo de IA
Gostaria de condensar seus formulários exibindo 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á como usar nossas configurações de layout de várias colunas para ajudar seus formulários a terem a melhor aparência.
Observação: Recomendamos o uso do campo Layout 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, você precisará garantir que o WPForms esteja instalado e ativado em 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 acessar o construtor de formulários.
Criando Formulários com Múltiplas Colunas com Layouts Visuais
O WPForms inclui uma ferramenta de layout visual que permite criar várias colunas sem código.
Para acessar esta ferramenta, clique em qualquer campo no construtor para abrir seu painel de Opções de Campo. Em seguida, clique na guia Avançado.
Abra a ferramenta de layouts visuais clicando em Mostrar Layouts ao lado da opção de Classes CSS.
Isso revelará várias opções de layout pré-fabricadas que você pode usar em seu formulário.
Observação: A opção Mostrar Layouts está disponível apenas para usuários do WPForms Lite. Se você estiver usando o plugin WPForms Pro, será necessário usar o campo Layout para criar campos de formulário com várias colunas.
Para nosso exemplo, queremos que nossos campos Nome e E-mail 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 tamanhos iguais.
Depois de selecionar este layout, precisamos escolher em qual coluna queremos que este campo específico apareça. Como nosso campo Nome é o primeiro em nosso formulário, queremos que ele apareça na coluna da esquerda.
Quando você clica em uma coluna na ferramenta de layouts visuais, as classes correspondentes são adicionadas automaticamente à configuração de Classes CSS do campo. A classe wpforms-one-half informa ao campo para ocupar metade da largura disponível, enquanto a classe wpforms-first informa ao campo que ele precisa iniciar uma nova linha.
Em seguida, precisamos realizar o mesmo processo para nosso campo de E-mail. No entanto, o colocaremos na coluna da direita.
Quando terminar de adicionar seus campos ao seu layout, certifique-se de salvar suas alterações no construtor de formulários.
Veja como nosso exemplo de layout de várias colunas fica no frontend do nosso site:
Adicionando Classes CSS de Múltiplas Colunas Manualmente
Se você preferir não usar a ferramenta de layouts visuais, pode digitar manualmente as classes CSS no campo relevante na guia 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-dois-sextos
- wpforms-tres-quartos
- wpforms-tres-quintos
- wpforms-tres-sextos
- wpforms-quatro-quintos
- wpforms-quatro-sextos
- wpforms-cinco-sextos
A imagem abaixo mostra 3 layouts comuns de várias colunas. Os rótulos indicam quais classes CSS foram usadas na lista acima.
Observação: O primeiro campo em cada linha na imagem acima também usa a classe wpforms-first.
Observação: O primeiro campo em cada linha na imagem acima também usa a classe wpforms-first.
Notas Adicionais para Usar Layouts de Múltiplas Colunas
Ao usar classes de coluna, há algumas coisas importantes a serem observadas:
- As colunas não se aplicam no construtor de formulários. Elas só são visíveis ao visualizar o formulário no frontend do seu site. Sempre teste seus formulários antes de publicá-los para garantir que você esteja satisfeito com seus layouts.
- O primeiro campo em cada linha deve ter a classe
wpforms-firstalém de sua classe de coluna. Isso informa ao plugin que é o primeiro item e redefine quaisquer colunas anteriores no formulário. - Na maioria dos casos, ao usar classes de coluna, você deve definir o Tamanho do Campo (também na aba Avançado do painel Opções do Campo) como Grande. Isso permite que o campo preencha todo o espaço disponível em sua coluna e mantém o espaçamento direito e esquerdo uniforme em relação aos campos vizinhos.
- Se você usar um layout de várias colunas com campos condicionais, quaisquer campos que sejam exibidos condicionalmente serão alinhados à esquerda. Para manter esses campos alinhados de acordo com o seu layout preferido, você pode usar este trecho de CSS:
Observação: Se você não está familiarizado com o uso de CSS no WPForms, por favor, confira nosso guia de CSS para iniciantes e nosso documento sobre o uso de classes personalizadas com WPForms.
Perguntas Frequentes
Estas são as respostas para algumas perguntas frequentes sobre a criação de layouts de formulários com várias colunas.
Por que o layout de várias colunas não está funcionando quando visualizo meu formulário?
Se o Marcador Moderno estiver ativado nas configurações do WPForms, as classes CSS de várias colunas não funcionarão ao visualizar seu formulário no frontend. Para corrigir esse problema, você precisará desativar o Marcador Moderno.
Observação: Desativar o Marcador Moderno impede que você estilize formulários no editor de blocos. Recomendamos usar o campo Layout para criar campos de formulário de várias colunas se você ainda quiser estilizar seu formulário no editor de blocos.
Para isso, vá para WPForms » Configurações e selecione a aba Geral.
Depois disso, role para baixo e desmarque a opção Usar Marcador Moderno.
Certifique-se de salvar suas alterações quando terminar.
Observação: Se você não conseguir encontrar as configurações do Marcador Moderno, precisará adicionar um filtro para forçar o WPForms a mostrar essa opção. Por favor, veja nosso guia de estilização de formulários para mais detalhes.
Pronto! Agora você pode otimizar seus formulários com layouts de várias colunas.
Em seguida, você também gostaria de fazer seus formulários ficarem ótimos em dispositivos móveis? Você pode configurar seu formulário para ter um layout de várias colunas que muda para exibir os campos em uma única coluna no celular, para que seja fácil de usar em qualquer dispositivo.