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

Contact Form 7, Colocar campos lado a lado

  • enz0g

    (@enz0g)


    4 anos, 6 meses atrás

    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)
  • Luiz Bills

    (@luizbills)

    4 anos, 6 meses atrás

    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>
    Criador do tópico enz0g

    (@enz0g)

    4 anos, 6 meses atrás

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

    • Esta resposta foi modificada 4 anos, 6 meses atrás por enz0g.
    Luiz Bills

    (@luizbills)

    4 anos, 6 meses atrás

    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)
  • O tópico ‘Contact Form 7, Colocar campos lado a lado’ está fechado para novas respostas.

Tags de tópico

Visualizações