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:

<div class="clearfix">
    <div id="left">
        Nome [text* your-name] <br/>
        E-mail [text your-subject]
    </div>
    <div id="right">
        Assunto [email* your-email] <br/>
        Telefone [tel tel-207]
    </div>
</div>

Mensagem [textarea your-message] <br/>

[submit "Enviar"]

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:

/*--- form 2 colunas ---*/
#left {
width: 49%;
float: left;
margin-right:2%;
}

#right {
width: 49%;
float: left;
}

.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:30px;
}

.clearfix {
display:block;
}
/*--- form 2 colunas fim ---*/

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!