Resumo de IA
Você gostaria de ter mais controle sobre o layout dos seus formulários WordPress? O campo de Layout para WPForms oferece uma solução poderosa para criar layouts de formulário avançados que se ajustam automaticamente ao tamanho da tela dos usuários.
Este tutorial demonstrará como usar o campo de Layout no WPForms.
Antes de começar, certifique-se de instalar e ativar o WPForms e verificar sua licença. Em seguida, crie um novo formulário ou edite um existente para acessar o construtor de formulários.
Adicionando um Campo de Layout ao Seu Formulário
No construtor de formulários, você encontrará o campo de Layout localizado na seção Campos Especiais. Clique no campo Layout ou arraste e solte-o na área de visualização para adicioná-lo ao seu formulário.
Escolhendo um Layout de Coluna
Depois de adicionar um campo de Layout ao seu formulário, é hora de escolher seu layout preferido.
O campo de Layout apresenta várias opções para organizar seus campos de formulário em diferentes colunas. Para abrir o painel Opções de Campo e ver os layouts de coluna disponíveis, clique no campo Layout na área de visualização do formulário.
Agora você verá vários layouts disponíveis com 1 a 4 colunas. Por padrão, o campo de Layout selecionará o layout de 2 colunas, que possui 2 colunas de largura igual.
Usaremos o layout padrão neste tutorial, mas a funcionalidade permanece a mesma para todos os layouts.
Observação: Seus campos de formulário não serão exibidos corretamente se você usou anteriormente a opção de classes CSS para habilitar o layout de várias colunas. Consulte nossa seção de FAQ para mais detalhes.
Definindo a Ordem de Exibição do Campo
O menu suspenso Exibição determina como os campos são ordenados em seu formulário. Os campos nos novos campos de Layout são definidos para serem exibidos em linhas por padrão, permitindo que os usuários naveguem pelo formulário horizontalmente da esquerda para a direita.
Para alterar essa ordem, clique no menu suspenso Exibição e selecione a opção preferida.
Observação: Se o seu formulário incluir um campo de Layout com vários campos empilhados, é recomendável usar a opção Linhas – os campos são ordenados da esquerda para a direita no menu suspenso Exibição. Isso garante que os campos sejam exibidos na visualização móvel, notificações de formulário e entradas exatamente como você os organizou, preservando a estrutura pretendida do formulário e a experiência do usuário.
Trocando Layouts
Se desejar alterar layouts, mesmo após adicionar campos a colunas individuais, basta selecionar qualquer um dos layouts disponíveis no painel Opções de Campo.
As colunas e seus conteúdos ajustarão automaticamente seu tamanho e posição de acordo com o tamanho da tela do usuário.
Observação: Se houver menos colunas no layout recém-selecionado do que no anterior, quaisquer campos na última coluna serão removidos do campo Layout e colocados no corpo principal do seu formulário.
Usando Múltiplos Layouts
Se desejar, você pode adicionar múltiplos campos de Layout ao seu formulário e escolher diferentes configurações de colunas para cada um.
Por exemplo, um campo de Layout pode ter 1 coluna e outro campo de Layout pode ter 2 colunas, dando a você mais flexibilidade na aparência do seu formulário.
Para ajudar a diferenciar cada campo de Layout, sinta-se à vontade para adicionar um rótulo ao campo Rótulo no painel Opções de Campo.
Como os campos de Layout atuam como contêineres, eles são a solução perfeita para agrupar itens no formulário.
Adicionando Campos a Colunas Individuais
Para adicionar um campo a qualquer coluna, clique e arraste o campo da barra lateral para a coluna de destino.
Observação: Os campos Layout, Quebra de Página, Repetidor e Visualização de Entrada não podem ser adicionados dentro de um campo Layout.
A maioria dos campos adicionados ao campo Layout terá o tamanho de campo grande como padrão, o que significa que eles ocuparão toda a largura da coluna. No entanto, o tamanho dos campos de Texto Rico e Texto de Parágrafo é determinado pela altura, com o padrão de um tamanho de campo médio dentro do campo Layout.
Para uma altura ajustável para o campo Texto de Parágrafo, consulte nossa documentação do desenvolvedor.
Habilitando Lógica Condicional
O campo Layout também suporta a ativação de lógica condicional para mostrar ou ocultar um campo Layout inteiro com base na seleção do usuário.
Observação: Você precisará da versão 1.9.0 ou superior do WPForms para acessar o recurso de lógica condicional para o campo Layout.
Para ativar a lógica condicional, clique no campo Layout para abrir seu painel Opções de Campo. Em seguida, navegue até a guia Lógica Inteligente.
Uma vez lá, alterne a opção Ativar Lógica Condicional para a posição LIGADO.
Após ativá-la, opções adicionais aparecerão para configurar a regra de lógica condicional. Para nosso exemplo, adicionamos um campo de Múltipla Escolha que pergunta aos usuários se eles gostariam de deixar uma avaliação. Em seguida, definimos a regra para Mostrar este campo se Você gostaria de deixar uma avaliação? for Sim.
Esta regra ocultará todos os campos dentro do campo Layout quando você publicar seu formulário. Os campos só aparecerão quando o usuário selecionar Sim nas opções do campo de Múltipla Escolha.
Após ativar a lógica condicional para um campo Layout, a opção de usar lógica condicional será desativada em campos individuais dentro do campo Layout.
Observação: Para mais detalhes sobre como a lógica condicional funciona, certifique-se de conferir nosso guia completo sobre como usar a lógica condicional no WPForms.
Removendo um Campo de Layout do Seu Formulário
Se desejar remover um campo de Layout do seu formulário, passe o mouse sobre o campo e clique no ícone de lixeira.
Como a exclusão de um campo de Layout também excluirá todos os campos dentro dele, você verá uma sobreposição solicitando a confirmação da exclusão. Prossiga e clique em OK se concordar em excluir o campo de Layout e todos os campos que você adicionou dentro dele.
Observação: Você não poderá recuperar nenhum dos campos que adicionou dentro do campo de Layout depois que eles forem excluídos.
Visualizando seu formulário
Depois de adicionar campos às colunas dentro de seus campos de Layout, prossiga e salve suas alterações clicando em Salvar.
Em seguida, clique no botão Visualizar para abrir a visualização do formulário em uma nova aba.
Na página de visualização, você verá uma versão funcional do seu formulário. Aqui você pode interagir com seu formulário e testar seu layout visual. Você também poderá testar o quão bem seu formulário funciona em diferentes tamanhos de tela.
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 campo de Layout não está sendo exibido corretamente quando visualizo meu formulário?
Se você usou anteriormente a opção de classes CSS para criar múltiplas colunas em seu formulário, isso impedirá que o campo de Layout funcione corretamente. Você precisará remover as classes CSS de seus campos de formulário antes de usar o campo de Layout.
Para isso, abra o construtor de formulários e clique no campo que deseja editar para abrir o painel Opções do Campo. Em seguida, navegue até a aba Avançado e remova a(s) classe(s) CSS de múltiplas colunas do campo Classes CSS.
Após remover as classes CSS, certifique-se de salvar suas alterações e visualizar seu formulário para garantir que ele tenha a aparência e funcione como esperado.
Posso exibir ou ocultar um campo de Layout com base na seleção do usuário?
Sim, você pode mostrar ou ocultar um Campo de Layout em seus formulários dependendo das respostas fornecidas por seus usuários. Isso requer a ativação da lógica condicional no campo de Layout específico que você deseja ocultar. Consulte nossa seção de lógica condicional para obter detalhes adicionais.
Posso alinhar o botão de envio na mesma linha do campo de Layout?
Sim. Se você deseja usar o campo de Layout para criar um formulário de linha única, precisará adicionar uma classe CSS personalizada na página de configurações do formulário.
Para isso, vá para Configurações » Geral em seu construtor de formulários e adicione a classe CSS inline-fields ao campo Classe CSS do Formulário.
Observação: O uso da classe inline-fields no WPForms pode, às vezes, entrar em conflito com os estilos do seu tema WordPress. Para saber mais, confira nosso tutorial sobre exibição de formulários em uma única linha.
Pronto! Agora você sabe como usar o campo de Layout no WPForms.
Em seguida, você gostaria de saber como exibir opções diferentes em seu formulário com base nas interações do usuário? Confira nosso guia sobre uso de lógica condicional no WPForms.