Resumo de IA
Gostaria de ter mais controlo 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 do ecrã dos utilizadores.
Este tutorial demonstrará como usar o campo de Layout no WPForms.
Antes de começar, certifique-se de que instala e ativa o WPForms e verifica a sua licença. Em seguida, crie um novo formulário ou edite um existente para aceder ao construtor de formulários.
Adicionar um Campo de Layout ao Seu Formulário
No construtor de formulários, encontrará o campo de Layout localizado na secção Campos Elaborados. Clique no campo Layout ou arraste e solte-o para a área de pré-visualização para o adicionar ao seu formulário.
Escolher um Layout de Coluna
Depois de adicionar um campo de Layout ao seu formulário, é hora de escolher o seu layout preferido.
O campo de Layout apresenta várias opções para organizar os 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 pré-visualização do formulário.
Agora verá vários layouts disponíveis com 1 a 4 colunas. Por defeito, o campo de Layout selecionará o layout de 2 colunas, que tem 2 colunas de largura igual.
Usaremos o layout padrão neste tutorial, mas a funcionalidade permanece a mesma para todos os layouts.
Nota: Os seus campos de formulário não serão exibidos corretamente se tiver usado anteriormente a opção de classes CSS para ativar o layout de várias colunas. Consulte a nossa secção de FAQ para mais detalhes.
Definir a Ordem de Exibição dos Campos
O menu suspenso Exibição determina como os campos são ordenados no seu formulário. Os campos nos novos campos de Layout estão definidos para serem exibidos em linhas por defeito, permitindo aos utilizadores navegar pelo formulário horizontalmente da esquerda para a direita.
Para alterar esta ordem, clique no menu suspenso Exibição e selecione a opção preferida.
Nota: Se o seu formulário incluir um campo de Layout com vários campos empilhados, recomenda-se o uso da opção Linhas – os campos são ordenados da esquerda para a direita no menu suspenso Exibição. Isto garante que os campos são exibidos na visualização móvel, notificações de formulário e entradas exatamente como os organizou, preservando a estrutura pretendida do formulário e a experiência do utilizador.
Mudar de Layouts
Se pretender alterar os layouts, mesmo depois de adicionar campos a colunas individuais, basta selecionar qualquer um dos layouts disponíveis no painel Opções de Campo.
As colunas e o seu conteúdo ajustarão automaticamente o seu tamanho e posição de acordo com o tamanho do ecrã do utilizador.
Nota: 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.
Utilizar Múltiplos Layouts
Se desejar, 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, o que lhe confere maior flexibilidade na aparência do seu formulário.
Para o 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 contentores, são a solução perfeita para agrupar itens no formulário.
Adicionar Campos a Colunas Individuais
Para adicionar um campo a qualquer coluna, clique e arraste o campo da barra lateral para a coluna de destino.
Nota: Os campos Layout, Quebra de Página, Repetidor e Pré-visualização de Entrada não podem ser adicionados dentro de um campo Layout.
A maioria dos campos adicionados ao campo Layout terá por defeito um tamanho de campo grande, o que significa que ocuparão toda a largura da coluna. No entanto, o tamanho do campo Texto Rico e Texto de Parágrafo é determinado pela altura, com um tamanho de campo médio por defeito dentro do campo Layout.
Para uma altura ajustável para o campo Texto de Parágrafo, consulte a nossa documentação para programadores.
Ativar 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 utilizador.
Nota: Necessitará da versão 1.9.0 ou superior do WPForms para aceder à funcionalidade de lógica condicional para o campo Layout.
Para ativar a lógica condicional, clique no campo Layout para abrir o seu painel Opções de Campo. Em seguida, navegue para o separador Lógica Inteligente.
Uma vez lá, mude a opção Ativar Lógica Condicional para a posição LIGADO.
Após ativá-la, aparecerão opções adicionais para configurar a regra de lógica condicional. Para o nosso exemplo, adicionámos um campo de Múltipla Escolha que pergunta aos utilizadores se gostariam de deixar uma avaliação. Em seguida, definimos a regra para Mostrar este campo se Gostaria de deixar uma avaliação? for Sim.
Esta regra ocultará todos os campos dentro do campo Layout quando publicar o seu formulário. Os campos só aparecerão quando o utilizador 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.
Nota: Para mais detalhes sobre como funciona a lógica condicional, certifique-se de consultar o nosso guia completo sobre como usar a lógica condicional no WPForms.
Remover um Campo de Layout do Seu Formulário
Se pretender remover um campo de Layout do seu formulário, passe o rato sobre o campo e clique no ícone de lixo.
Como a eliminação de um campo de Layout também eliminará todos os campos dentro dele, verá uma sobreposição a pedir para confirmar a eliminação. Prossiga e clique em OK se concordar em eliminar o campo de Layout e todos os campos que adicionou dentro dele.
Nota: Não poderá recuperar nenhum dos campos que adicionou dentro do campo de Layout depois de serem eliminados.
Pré-visualizar o Seu Formulário
Depois de adicionar campos às colunas dentro dos seus campos de Layout, prossiga e guarde as suas alterações clicando em Guardar.
Em seguida, clique no botão Pré-visualizar para abrir a pré-visualização do formulário numa nova aba.
Na página de pré-visualização, verá uma versão funcional do seu formulário. Aqui pode interagir com o seu formulário e testar o seu layout visual. Também poderá testar o quão bem o seu formulário funciona em diferentes tamanhos de ecrã.
Perguntas Frequentes
Estas são respostas a algumas das principais perguntas sobre a criação de layouts de formulários com várias colunas.
Porque é que o campo de Layout não está a ser exibido corretamente quando pré-visualizo o meu formulário?
Se anteriormente utilizou a opção de classes CSS para criar múltiplas colunas no seu formulário, isso impedirá o campo de Layout de funcionar corretamente. Terá de remover as classes CSS dos 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 pretende editar para abrir o painel Opções do Campo. Em seguida, navegue para o separador Avançadas e remova a(s) classe(s) CSS de múltiplas colunas do campo Classes CSS.
Após remover as classes CSS, certifique-se de que guarda as suas alterações e pré-visualiza o seu formulário para garantir que tem o aspeto e funciona como esperado.
Posso exibir ou ocultar um campo de Layout com base na seleção do utilizador?
Sim, pode mostrar ou ocultar um Campo de Layout nos seus formulários dependendo das respostas fornecidas pelos seus utilizadores. Isto requer a ativação da lógica condicional no campo de Layout específico que pretende ocultar. Consulte a nossa secção de lógica condicional para obter detalhes adicionais.
Posso alinhar o botão de submissão na mesma linha que o campo de Layout?
Sim. Se pretender usar o campo de Layout para criar um formulário de linha única, terá de adicionar uma classe CSS personalizada na página de definições do formulário.
Para isso, vá a Definições » Geral no seu construtor de formulários e adicione a classe CSS inline-fields ao campo Classe CSS do Formulário.
Nota: Usar a classe inline-fields no WPForms pode, por vezes, entrar em conflito com os estilos do seu tema WordPress. Para saber mais, certifique-se de que consulta o nosso tutorial sobre exibir formulários numa única linha.
É tudo! Agora sabe como usar o campo de Layout no WPForms.
Em seguida, gostaria de saber como mostrar diferentes opções no seu formulário com base nas interações do utilizador? Consulte o nosso guia sobre como usar a lógica condicional no WPForms.