Formulário em duas colunas com Contact Form 7

O Contact Form 7 é um dos plugins de formulário mais utilizados no WordPress, e é muito comum, por diversos motivos, que você precise dividir os campos em duas colunas. Mas como fazer um formulário no Contact form 7 em duas colunas?

Contact form 7 em duas colunas

A configuração do formulário de contato com o plugin é muito simples, e caso você precise fazer a exibição em duas colunas, também é muito simples. Você vai precisar construir o seu formulário dentro de uma div, identificando cada uma delas para, posteriormente, editar o estilo com CSS.

Mas calma, se você não está tão habituado com códigos ou essas nomenclaturas não se preocupe. É bem mais simples do que você imagina.

Passo 1: Criar o formulário

Vá até aba contato no painel do WordPress e crie seu novo formulário. Coloque os campos que você deseja, dentro dessa estrutura, como no exemplo abaixo:

Repare que você não precisa utilizar a estrutura <label> que o plugin cria automaticamente quando você cria um novo formulário. Basta adicionar o texto que você quer na etiqueta (Ex.: Nome) e na sequencia a tag do formulário.

Caso queira, também pode utilizar placeholder ao invés da etiqueta, sem problemas.

Outro ponto importante é que, se você estiver utilizando apenas 1 campo em cada coluna, não precisará do <br/> ao final da linha. Esse código (<br/>) só é utilizado quando você tem mais de um item na mesma coluna e precisará incluir uma linha entre eles.

Feito isso, vamos para o próximo passo.

Passo 2: Editar o CSS

Agora vá até o seu editor de CSS (plugin ou editor do tema) e adicione o seguinte código:

Passo 3: Tudo pronto!!!

Pronto! Seu formulário em duas colunas (responsivo) está pronto. O seu resultado será esse:

Agora é só você seguir com o desenvolvimento do seu site e aproveitar seu formulário em duas colunas.

Até a próxima!

Compartilhe:
Share on facebook
Facebook
Share on whatsapp
WhatsApp
Share on email
Email
Share on linkedin
LinkedIn

Receba dicas no seu e-mail

Eduardo Villão
Eduardo Villão

É gaúcho, apaixonado por tecnologia e especialista em Wordpress. Atualmente trabalha com desenvolvimento web.

PUBLICIDADE
Contact Us!
×
×

Cart

Cart