Como criar um formulário de várias colunas no WPForms

Como criar um formulário de contacto responsivo com várias colunas

Criar um formulário de contacto reativo com várias colunas parece ser simples, mas quando se começa a trabalhar nele, as coisas podem complicar-se rapidamente.

Pode perguntar-se: "Posso mesmo fazer com que este formulário fique bem em todos os dispositivos sem quebrar o design?" Esta é uma preocupação válida, especialmente se já teve dificuldades com formulários que não se adaptam bem ou que parecem desajeitados em dispositivos móveis.

A boa notícia é que você pode usar o WPForms para configurar um formulário de contato responsivo com várias colunas. Siga os passos deste guia para começar!

Crie já o seu formulário multi-colunas! 🙂

Como criar um formulário com várias colunas no WPForms

Criar um formulário com várias colunas no WPForms é incrivelmente fácil. Antes de começar, certifique-se de ter uma licença WPForms Pro, porque você terá o campo Layout junto com toneladas de recursos úteis com este plano.

A página de preços do WPForms.

Depois de comprar a licença e instalar o WPForms no seu site, basta seguir os passos abaixo para criar layouts de coluna no seu formulário.

Passo 1. Criar um novo formulário

Vamos começar por criar um novo formulário com um layout de colunas. Para isso, abra o painel de controlo do WordPress e aceda a WPForms " Adicionar novo.

adicionar novo formulário

Isso abrirá a interface do construtor de formulários WPForms. Pode introduzir um nome para o seu formulário e selecionar um modelo.

Para este exemplo, vamos criar um formulário de raiz. Isto permitir-nos-á escolher primeiro uma disposição de formulário com várias colunas e, em seguida, atribuir campos diferentes a cada coluna, conforme acharmos adequado.

No entanto, o WPForms tem vários modelos prontos que utilizam várias colunas, como o modelo de formulário de contacto com várias colunas.

Para criar um formulário a partir do zero, passe o cursor sobre Formulário em branco (deve ser o primeiro item na lista de modelos) e prima Criar formulário em branco.

criar formulário em branco wpforms

O WPForms irá agora carregar um formulário em branco que pode começar a construir usando controlos simples de arrastar e largar.

Formulário em branco carregado

Agora, vamos adicionar alguns campos a este formulário e organizá-los numa disposição de várias colunas.

Passo 2. Adicionar campos à estrutura de colunas

Para dividir uma área do seu formulário em várias colunas, basta adicionar o campo Layout.

Basta procurar na secção Campos Extravagantes, no painel esquerdo, e arrastar e largar o campo Layout no formulário à sua direita.

Campo de layout

Agora, vamos adicionar o campo Nome, E-mail e Telefone na coluna da esquerda e um campo Endereço na coluna da direita.

A forma mais fácil de o fazer é clicar numa coluna para a tornar ativa e, em seguida, clicar nos campos que queremos adicionar a essa coluna.

Nota: Também pode arrastar e largar campos nas colunas a que os pretende atribuir.

Vamos começar por atribuir campos à coluna da esquerda. Vamos clicar na coluna da esquerda para a definir como ativa (como indicado pela seta para cima).

coluna esquerda ativa

Agora, vamos clicar nos campos Nome, E-mail e Telefone para que sejam adicionados diretamente à coluna ativa, um a um.

coluna esquerda preenchida

De seguida, repetimos o mesmo processo para a coluna da direita e adicionamos-lhe o campo Endereço.

coluna direita preenchida

Ótimo! Este formulário de 2 colunas está agora em boa forma.

Mas e se pretender larguras diferentes para as duas colunas? Ou talvez até mais de 2 colunas?

O WPForms torna tudo isso possível, como mostraremos no próximo passo.

Leia também: Formulários de coluna única: Exemplos e inspiração

Passo 3. Personalizar o layout do formulário

Por defeito, o campo Disposição cria 2 colunas de tamanho igual no seu formulário. Mas pode escolher entre 8 esquemas diferentes e adicionar até 4 colunas num único formulário.

Para selecionar uma predefinição de esquema, basta clicar no campo Esquema depois de este ter sido adicionado ao formulário.

clicar no campo de apresentação

Depois disso, basta selecionar o esquema que melhor se adequa a si. Por exemplo, se pretender uma coluna estreita à esquerda e uma mais larga à direita, pode optar pela 3ª opção de apresentação.

larga 2ª coluna

Se quiser ter 4 colunas no seu formulário, basta escolher a opção de esquema correspondente no painel da esquerda e arrastar e largar os campos para as respectivas colunas.

Estrutura de 4 colunas

Recomendamos que experimente diferentes layouts e pré-visualize o seu formulário no frontend para verificar se tudo está bem. O nosso guia para a conceção de layouts de formulários dar-lhe-á um bom começo.

Por vezes, o esquema do formulário escolhido pode não combinar bem com o esquema da página e causar problemas de alinhamento. Mas se testar bem o seu formulário e verificar tudo antes de o publicar, isto não deverá ser um problema.

O WPForms cria automaticamente formulários responsivos com várias colunas. Isto significa que o formulário será recolhido em menos colunas para se ajustar a um ecrã mais pequeno quando visualizado a partir de dispositivos móveis.

Passo 4. Configurar a notificação e a confirmação do formulário

A configuração das notificações garante que está sempre atualizado relativamente a novas entradas de formulários. Aceda a Definições e, em seguida, a Notificações no criador de formulários.

definições do formulário de notificação

A partir daqui, edite as definições de notificação predefinidas, como a linha de assunto, ou altere os e-mails dos destinatários conforme necessário.

notificação de formulário

Pode agora selecionar Confirmações no menu Definições para definir respostas para submissões de formulários bem sucedidas.

confirmações de formulários

Escolha o tipo de confirmação que melhor se adequa ao seu site: uma mensagem, a apresentação de uma página ou um redireccionamento.

Não se esqueça de guardar as alterações para manter o formulário e as respectivas definições actualizadas. Agora está tudo pronto para publicar o formulário no seu sítio WordPress!

Passo 5. Publique o seu formulário com várias colunas

Agora, é hora de passar para a etapa final de publicação. Para iniciar o processo de incorporação, clique no botão Incorporar ao lado de Guardar.

botão de incorporação do criador de formulários

Depois de premir o botão Incorporar, verá um modal a perguntar se pretende incorporar o formulário numa página existente ou criar uma nova. Vamos escolher a opção Criar nova página , mas os passos são muito semelhantes em ambos os casos.

Criar uma nova página para incorporar o seu formulário

Dê um nome à sua página e prima Lets' Go.

Incorporar numa nova página

Encontrará o formulário incorporado nesta nova página. Faça quaisquer edições utilizando o editor do WordPress aqui e, quando estiver satisfeito, prima Publicar.

Eis o aspeto de uma coluna múltipla publicada quando visualizada a partir do frontend:

Formulário de várias colunas publicado

E é isso! Agora você pode criar facilmente formulários de várias colunas no WPForms sem código. Não se esqueça: você também pode estilizar seus formulários no editor de blocos com facilidade.

Perguntas frequentes sobre como criar um formulário com várias colunas no WordPress

Qual é a vantagem de um layout de formulário com várias colunas?

Os formulários com várias colunas podem ser muito benéficos do ponto de vista da experiência do utilizador. Um cenário comum em que os formulários com várias colunas são úteis é quando tem um formulário suficientemente longo para ter uma deslocação vertical.

Neste cenário, pode reduzir o comprimento do formulário e torná-lo mais compacto, ordenando os campos em duas ou mais colunas.

Da mesma forma, ao incorporar um formulário longo numa barra lateral, este pode encaixar melhor e reduzir a deslocação vertical se utilizar uma disposição em colunas.

Não existe uma abordagem única para um design de formulário eficaz, razão pela qual é tão importante ter diferentes opções de layout disponíveis para diferentes cenários.

Como é que crio um formulário com várias colunas?

Para criar um formulário com várias colunas no WordPress, pode utilizar o WPForms e o seu construtor de arrastar e largar. Quando o formulário estiver configurado, pode facilmente dividir os campos em várias colunas utilizando o campo Layout.

O WPForms garante automaticamente que o formulário é responsivo, pelo que se ajustará em ecrãs mais pequenos para uma experiência de utilizador sem problemas.

Como é que divido os dados em várias colunas?

Com o WPForms, a divisão de dados em várias colunas é simples.

Ao criar o seu formulário, basta selecionar os campos de formulário que pretende apresentar lado a lado e utilizar a funcionalidade de arrastar e largar para os adicionar a um campo de Apresentação.

O WPForms tratará do resto, certificando-se de que as suas colunas são apresentadas corretamente em todos os dispositivos.

A seguir, utilize o Net Promoter Score para inquéritos

Se está a tentar avaliar os níveis de satisfação do cliente, o melhor instrumento de inquérito que pode utilizar para isso é o Net Promoter Score (NPS). O WPForms facilita a criação de formulários de inquérito com a Net Promoter Scale, como explicamos neste guia.

Se estiver a ter problemas com os utilizadores que não introduzem corretamente os seus endereços de correio eletrónico, eis como adicionar um campo de endereço de correio eletrónico de confirmação para evitar esta situação. Além disso, poderá achar interessante o nosso guia sobre as principais perguntas do inquérito "como soube da nossa existência".

E, se não tiver a certeza sobre qual a ferramenta de prevenção de spam que deve utilizar nos seus formulários, veja a nossa comparação entre Akismet e reCAPTCHA.

Crie o seu formulário WordPress agora

Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.

Divulgação: O nosso conteúdo é apoiado pelos leitores. Isso significa que se você clicar em alguns de nossos links, podemos ganhar uma comissão. Veja como o WPForms é financiado, por que isso é importante e como você pode nos apoiar.

Osama Tahir

Osama é um escritor sénior da WPForms. Ele é especialista em desmontar plugins do WordPress para testar e compartilhar suas idéias com o mundo.Saiba mais

O melhor plug-in de criação de formulários de arrastar e soltar do WordPress

Fácil, rápido e seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

Active o JavaScript no seu browser para preencher este formulário.

6 comentários em "Como criar um formulário de contacto responsivo com várias colunas"

    1. Bilal, os campos de layout são responsivos a dispositivos móveis e exibirão o campo como uma única coluna no celular. Quando tiveres algum tempo, podes dar uma vista de olhos e dizer-nos como correu?

      Se você tem uma licença WPForms, você tem acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte. Caso contrário, oferecemos suporte gratuito limitado no fórum de suporte do WPForms Lite WordPress.org.

      Obrigado.

  1. Concebo sempre formulários para o telemóvel em primeiro lugar, mas o modo de resposta automática continua a estragar o formulário na vista do telemóvel.

    1. Olá Patrick!

      Peço desculpa, mas criar 10 colunas utilizando o campo Layout não é atualmente possível. No entanto, é possível criar layouts de várias colunas usando classes CSS. Na verdade, temos um guia detalhado sobre a criação de layouts de formulários com várias colunas que apresenta todas as opções e classes CSS disponíveis.

      Para obter conselhos personalizados sobre como alcançar as suas necessidades específicas de layout, recomendo que entre em contacto com os nossos Trusted Advisors na equipa de suporte se tiver uma licença WPForms. Envie um ticket de suporte e eles entrarão em contato com você o mais rápido possível.

Adicionar um comentário

Ficamos satisfeitos por ter escolhido deixar um comentário. Tenha em atenção que todos os comentários são moderados de acordo com a nossa política de privacidade e que todas as hiperligações são nofollow. NÃO utilize palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

Este formulário é protegido pelo Cloudflare Turnstile e aplicam-se a Política de Privacidade e os Termos de Serviço da Cloudflare.