Suporte » Plugins » Contact Form 7, Colocar campos lado a lado

  • Estou usando o Contact Form 7 e preciso deixar alguns campo lado a lado:

    <label> Cidade
    [text* text-317] </label>

    <label> Estado
    [text* text-317] </label>

    <label> Código Postal
    [text* text-317] </label>

    <label> Telefone para Contato
    [tel* tel-459] </label>

    <label> Seu e-mail
    [email* your-email] </label>

    Assim que está atualmente, e os campos ficam um embaixo do outro, gostaria de deixar os campos Cidade e Estado um do lado do outro, alguém saberia como fazer isso?
    Agradeço desde já pela ajuda.

Visualizando 3 respostas - 1 até 3 (de um total de 3)
  • Os formulários do CF7 aceitam qualquer tipo de html, então você só precisa adicionar divs/sections com as classes de coluna do seu tema. Caso você não conheça muito bem o seu tema, você pode fazer assim:

    1. Adicione esse CSS ao seu tema:

    .row {
      display: flex;
      flex-wrap: wrap;
    }
    
    .col-50 {
      width: 48%;
      margin: 0 1%;
    }

    2. No seu formulário você usa as classes dessa maneira:

    <div class="row">
      <div class="col-50">
        <label>Cidade
        [text* text-317]</label>
      </div>
    
      <div class="col-50">
        <label>Estado
        [text* text-317]</label>
      </div>
    </div>

    Funcionou,muito obrigado. Apenas mais uma dúvid, como posso mudar a cor da fonte que o div gera??

    • Esta resposta foi modificada 1 semana, 3 dias atrás por  enz0g.

    Você pode mudar a cor do texto colocando a propriedade color no CSS. Mas vai precisar do código hexadecimal da cor. Caso você não tenha experiência com CSS, recomendo usar algum plugin que te ajuda nessa parte. Abaixo tem 2 recomendações:

    https://wordpress.org/plugins/so-css/
    https://br.wordpress.org/plugins/yellow-pencil-visual-theme-customizer/

Visualizando 3 respostas - 1 até 3 (de um total de 3)
  • Você deve estar conectado para responder a este tópico.