Como deixar Contact Form 7 em duas colunas WordPress

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você sobre o plugin de WordPress Contact Form 7, dessa vez iremos sanar a dúvida do Thiago Salgueiro um dos Incubers que nos acompanha que é a seguinte "Como deixar Contact Form 7 em duas colunas".

O Processo é bem tranquilo e envolve HTML e CSS, mas não se assuste por não ter conhecimento sobre essas linguagens, eu vou te ajudar do começo ao fim para garantir que tudo sairá como deve ser. Vale ressaltar também que esse post é pra resolver uma dúvida pontual e não explicar detalhadamente sobre HTML e CSS, caso esse conhecimento lhe interesse deixe nos comentários que o seu pedido pode ser atendido e a gente comece uma série de vídeos sobre o assunto.

Todo o procedimento pode ser realizado através do painel do WordPress a partir da versão 5 que conta com um editor CSS maneiro para fazer pequenas alterações nos estilos do seu tema ou se você já conhece do assunto pode utilizar a sua IDE favorita.

Veja o resultado que iremos obter ao final do tutorial

Como deixar contact form 7 em duas colunas

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Snipets utilizados no processo para deixar formulário CF7 em 2 colunas

O pedaço de código abaixo é a estrutura do formulário, você tem total liberdade para alterar os textos e os campos do Formulário que ficam entre colchetes [].

As DIV's com a classe "formulario-item-50" deixará o campo com 50% de largura e a classe "formulario-item-100" deixará o campo com 100% de largura e isso será configurado via CSS posteriormente.

<div class="envelopa-formulario">
    <div class="formulario-item-50 item-esquerda">
        Seu nome (obrigatório)
        [text* your-name]
    </div>

    <div class="formulario-item-50">
        Seu e-mail (obrigatório)
        [email* your-email]
    </div>

   <div class="clearfix"></div>

<div class="formulario-item-50 item-esquerda">
        Seu nome (obrigatório)
        [text* your-name]
    </div>

    <div class="formulario-item-50">
        Seu e-mail (obrigatório)
        [email* your-email]
    </div>

   <div class="clearfix"></div>

    <div class="formulario-item-100">
        Assunto
        [text your-subject]
    </div>

    <div class="formulario-item-100">
        Sua mensagem
        [textarea your-message]
    </div>

[submit "Enviar"]

</div>

Depois criar a estrutura HTML do seu formulário é hora de inserirmos o CSS da "bagaça".

O pedaço de código abaixo será inserido no editor de CSS do WordPress que fica em Aparência > CSS adicional.

//Estilizando a classe para deixar os campos com 50% de largura
.formulario-item-50 {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}
//Estilizando os campos que vão receber o conteúdo (inputs)
.formulario-item-50 input {
  width: 100%;
  float: left;
}

//Estilizando a classe item-esquerda para dar um espaço na direita entre os campos
.formulario-item-50.item-esquerda {
  padding-right: 15px;
}

//Configurando o comportamento dos campos no mobile
@media only screen and (max-width: 767px) {
  .formulario-item-50 {
    width: 100%
  }

  //Retirando o espaçamento da direita no mobile para alinhar os campos
  .formulario-item-50.item-esquerda {
    padding-right: 0;
  }
}

.formulario-item-100 {
  width: 100%;
  margin-bottom: 20px;
}

.formulario-item-100 input {
  width: 100%;
}

.formulario-item-100 textarea {
  width: 100%;
}

Agora é só acompanhar o procedimento ensinado no vídeo e testar!

E aqui finalizamos mais um tutorial que dessa vez foi a pedido de um Incuber. Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Vá até o canal e Larga o Like nessa P#&%@
• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Faça como o Thiago Salgueiro e interaja com a gente, gostamos que de ajudar! Compartilhe suas dúvidas, experiências e resultados.

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre como deixar o layout de um formulário com Contact Form 7 em duas colunas.

Quer aprender mais sobre Contact Form 7?

Veja outros tutoriais sobre o assunto:
Como instalar e configurar o Contact form 7 – PT 1/2
Como instalar e configurar o Contact form 7 – PT 2/2 – Configurando SMTP
Salvar contatos enviados pelo Contact form 7
Como inserir Google reCAPTCHA no Contact Form 7
Criar redirecionamento de página no Contact Form 7 após envio
Escolher destinatário com base na opção do select Contact Form 7
Inserir e Editar Placeholder no Contact Form 7